Show google maps from address

If you have for a task to show google maps location using just the address the following script should help you.
Here is the HTML code

<html>
<body onload="initialize();">
    <div id="mapsaddress">Boulevard Mansions, Borough Road, SE1, United Kingdom</div>
    <div>
        <div id="map-canvas" style="width: 750px; height: 450px; margin: auto; padding: auto;"></div>
    </div>
</body>
</html>

For Google Maps visualization we will use -> Google Maps Javascript API v3:

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCClx895bzWz1KUS4aytDTnTpi8Dv988Pg&sensor=false"></script>
<script>
  var geocoder;
  var map;
  var latlng;
  function initialize() {
    var address = document.getElementById("mapsaddress").innerHTML;
    geocoder = new google.maps.Geocoder();
    geocoder.geocode( { "address": address}, function(results, status) {
      if (status == google.maps.GeocoderStatus.OK) {
        map.setCenter(results[0].geometry.location);
        var latlng = results[0].geometry.location;
        var marker = new google.maps.Marker({
            map: map,
            position: results[0].geometry.location,
            center: latlng
        });
      } else {
        alert("Geocode was not successful for the following reason: " + status);
      }
    });     
    var mapOptions = {      zoom: 13,center: latlng   } 
    map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);           
  }
</script>

We will use the predefined address from the div with id=”mapsaddress” and will get the coordinates needed for Google Maps API. Don’t forget to use your own google map key!

You can also check the working DEMO.

2 thoughts on “Show google maps from address”

  1. Hiya, I am really glad I have found this information. Nowadays bloggers publish just about gossips and web and this is really annoying. A good blog with interesting content, that is what I need. Thanks for keeping this website, I’ll be visiting it. Do you do newsletters? Can not find it.

Leave a Reply

Your email address will not be published. Required fields are marked *