Google AJAX Map API

Want to include a map directly on your site? The solu­tion is rather easy using the Google AJAX Map API.

To use the Google AJAX Map API we’ll first include the JS (JavaScript) file to make it possible.

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>

We can include that JS file any­where on your page as long as it’s valid markup. Along with that we’re going to use some helper JS func­tions to make things easier.

  var geocoder;
  var map;
  var hide = false;
  function initialize() 
  {
      geocoder = new google.maps.Geocoder();
      var latlng = new google.maps.LatLng(-34.397, 150.644);
      var myOptions = {
        zoom: 15,
        center: latlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
      }
      map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
  }

  function codeAddress(map_loc) {
    if(document.getElementById('map_canvas').style.display == '')
    {
      document.getElementById('map_canvas').style.display = 'none';
      hide = true;
    }
    else
    {
      if(hide == false)
      {
        initialize();
        var address = map_loc;
        if (geocoder) {
          document.getElementById('map_canvas').style.display = '';
          geocoder.geocode( { 'address': address}, function(results, status) {
            if (status == google.maps.GeocoderStatus.OK) {
              map.setCenter(results[0].geometry.location);
              var marker = new google.maps.Marker({
                  map: map, 
                  position: results[0].geometry.location
              });
            } else {
              alert("Geocode was not successful for the following reason: " + status);
            }
          });
        }
      }
      else
      {
        document.getElementById('map_canvas').style.display = '';  
      }
    }
  }

These helper func­tions will allow us to take a reg­u­lar address and use them in the Google AJAX Map API. With all that behind us let’s get to the sim­ple code dis­play our map.

<a href="javascript:codeAddress('3730 Las Vegas Blvd S, Las Vegas, NV 89109');">3730 Las Vegas Blvd S, Las Vegas, NV 89109 (Map)</a>
<div id="map_canvas" style="width: 100%;height:480px;display:none;"></div>

That is all!