Sunday, July 14, 2013

Adding A Google Map To Your Site Using Google Maps API

Recently I redesigned one of my old web sites (turbografx.net), and decided to add a few Google Maps on pages where address information was important. It was nice to see that this simply required a little bit of JavaScript to get up and running. Minimal effort is needed to add a simple map that will include a marker on a specified address.

Below is a simple example of how to setup your map using a provided street address. The Google Geocoding API makes it possible to use a street address instead of the standard GPS coordinates. This made my life a lot easier, as I already had street addresses stored in my database and did not also want to store the GPS coordinates.

To get started, head over to the Google API Console and get yourself an API key. Once you've done that, you can reference the Google API script using a script tag like the one below.

<script src="http://maps.googleapis.com/maps/api/js?key=your-key-here&sensor=false"></script>

After doing that, you can add your own JavaScript similar to the example below. Replace the address information with the street address that you would like to appear on the map. This can easily be fed from a database to make the maps dynamic. I am adding a marker that points to the address in this example, as well as centering the map to the specified address. If you don't want a marker, you can easily remove the code that references the marker variable.



One final thing that you will need to do is to add a container for your map. Mine is a div with an id of "google-map." As you can see, it is referenced in the JavaScript above, so you will need to update that if you use a different id.


You'll want to specify a size for your div container. Below is some example CSS for this. As you can see, I also surrounded it with a border and added a margin on the bottom.


All in all, adding a simple Google Map is quite painless. I found the Google API Tutorial at w3schools to be quite helpful in getting me on track with Google Maps development, so you may want to check that out if you'd like to delve into some of the many additional features that are available.