Brenelz Web Design Solutions

Creating a Google map is almost a requirement in every website I design these days.  Google maps have been the showcase for AJAX ever since it was coined.  Google Maps are interactive maps that you can embed within your web page using Google’s already built API.

latitude and longitude?

When I began embedding Google Maps in my web pages, one of the clear limitation I found was needing to specify a latitude and longitude.  This was the only way I knew how to use the maps.  This worked fine for a little while as I mainly used them on contact forms with fixed places.  I found sites that helped me identify a latitude / longitude and then I plunked it in the code.

Eventually this theory didn’t work as now I needed to implement this Google map to use dynamic addresses to find the right location.  Remember, all I knew was to implement it using lat / long coordinates.  This would force me to store these two values in a database.  This of course isn’t very user friendly for the client I am setting up the administration for.  They have no clue what these values are, and why should they?  They want to just enter the address.

Geo Coding the answer?

This is when I found out that Google Maps offers a simple way for which to translate an address into its corresponding lat / long coordinates.  The theory is called Geo Coding.  Here you can view Google’s Geo Coding Documentation.  This in the end is a much more practical way of dynamically creating a Google Map.  You can now pull the address from the database and insert it into the JavaScript code.  Below is an example (I have assumed you have a Google map API key, as well as included the appropriate base script)

var map = null;
var geocoder = null;

function initialize() {
    if (GBrowserIsCompatible()) {
        map = new GMap2(document.getElementById("map_canvas"));
        map.setCenter(new GLatLng(49.843774, -99.961166), 13);
        geocoder = new GClientGeocoder();
        address = '< ?php echo $address ?>';

        if (geocoder) {
            geocoder.getLatLng(
                address,
                function(point) {
                    if (!point) {
                       alert("Google map for "+address + " could not found");
                   } else {
                       map.setCenter(point, 13);
                      var marker = new GMarker(point);
                      map.addOverlay(marker);
                      marker.openInfoWindowHtml(address);
                  }
              }
          );
      }
    }
}

Now all that is needed is for you to place the container somewhere in the body of your HTML:

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

Now the other benefit you see is that you can reuse this Google Map code whenever you need to, and you don’t need to find out those blasted lat / long coordinates!