David Thomas Baker » Web » How to setup simple Google Maps on your website

Here's a quick howto on setting up Google Maps on your website.

Ideal for "Contact Us" pages.

<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=YOUR_API_KEY_HERE"
      type="text/javascript"></script>

Put this <script> tag on the page you want the map to appear on.

<script type="text/javascript">
 //<![CDATA[
function loadmap() {
 if (GBrowserIsCompatible()) {
  var map = new GMap2(document.getElementById("map"));
  var geocoder = new GClientGeocoder();
  map.setCenter(new GLatLng(37.4419, -122.1419), 13);
  map.addControl(new GSmallMapControl());
  var address = "1 James Street, Burleigh, QLD, Australia";
  geocoder.getLatLng(
      address,
      function(point) {
       if (!point) {
         alert(address + " not found");
       } else {
         map.setCenter(point, 13);
         var marker = new GMarker(point);
         map.addOverlay(marker);
         marker.openInfoWindowHtml(
            "<strong>Address</strong><br>Type It Here:"+
            " <br>Southport, QLD 4215<br>Australia.");
       }
     }
  );
 }
}
$(window).load(function(){loadmap()});
//]]>
</script>

<div id="map" style="width: 300px; height: 400px">
</div>