Working with the Google Maps API (v2/v3)

Update: The javascript version in the post no longer works due to a change on googles side, I’ve created a new version, that also includes multiple points and styling the map, please check that post here:

The new google maps API is a great improvement over some earlier versions, and the documentation explains all the new options in great detail (usually with examples) but tends to be a bit overkill if your only trying to get a simple map of a location output. After wading through it and finding all the options I needed I decided to make a post with a more streamlined approach to getting maps on your site. First you have to decided what type of map your going for, the original static image maps (that haven’t changed in quite a while) or the new javascript interactive maps. For simplicity I’ll talk about the static maps first.

The static maps are generated via a simple URL you place in an img elements src tag. Heres how the url’s are formatted:

http://maps.googleapis.com/maps/api/staticmap?zoom=zoom&size=widthxheight&maptype=type&markers=address&sensor=sensor
zoom: The zoom level of the map, from 0-22;
width: Image width in pixels;
height: Image height in pixels;
type: The type of map, either roadmap (default), satellite, terrain, or hybrid.
address: The address point centered and marked.
sensor: determins if the API will use ny sensor input data, not used for these examples.

Using that format you can get a final URL that looks like this:
http://maps.googleapis.com/maps/api/staticmap?zoom=14&size=400x300&maptype=road&markers=219+4th+Ave+N,+Seattle,+WA+98109&sensor=false

Those are just the basics needed to get a map out, there are a ton more options from multiple markers with custom icons, to paths and polygon areas. If anybody is interested I’ll make a post about them as well, but it seems that simple maps are used for more often. You can check out the full documentation at the Google Static Maps API Documentation Page. I have an example of the different levels of zoom on my Google Maps API example page as well, depending on what your doing you can change the zoom level to whatever you want, but I think 14 works best for single point location maps.

Now that the static maps are out of the way it’s time to talk about the interactive maps. Naturally there a bit more complex but there still incredibly simple. First, we need to get an API key as the one used in the examples will only work at this domain. You can get your API at the Google Maps API Key SignUp Page. Once you have that we need to include the API script:

Snipplr: http://snipplr.com/view/57428/google-maps-api3-made-simple/

Simply swap out your API key for mine. Once again the sensor is for telling the API if it needs to load location data, and we won’t be using it for this example. I also use jquery for the example, but it’s simple enough to not use it in lieu or traditional javascript or another library. After thats out of the way we can start on the scripting. Unlike the static maps API we can’t just plug an address directly in, we need to use the geocaching API first to get the lat/long of the location. This is probably a good time to mention that the geocaching API results differ from the normal google map search results, and terms that may work in the google search and pull a good address may not return anything from the geocacher. It’s best to use a actual address as it seems to have no problem getting those right. Anyway with that in mind where is the javascript:

Snipplr: http://snipplr.com/view/57428/google-maps-api3-made-simple/

The first part of that should be self explanatory, it runs the maps initialize() function once the document loads. The functions declares a few variables right off the bat, lat/lng ia needed so we can store the latitude and longitude somewhere. The address is encoded before transmission to prevent any potential problems on that front. Then we use $.getJSON() to get the information needed from the geocaching API. remember to change the key out with the one you got earlier at the top of this post. The the callback function prevents the Allow-Access-Control problem that cross domain calls can generate, and rest of the request URL is normal (were not using the sensor, we need json back). After we get the results from the JSON request to drive down through the object till we get to the variables we want (the latitude and longitude, which seems backwards to me).

Then we declare an options object, this is really for simplicity (and because it’s how google demos the API in their documentation), In the example were starting at zoom level 14, with a center at the address we got earlier. Not that you can’t just give it lat/long, you have to declare a new google.maps.LatLng for the script to use. The final option is the mayTypeId, again in this case its a roadmap. This time however the options for that are roadmap, satellite, hybrid, and terrain.

Then all we have to do is declare a new map object on an element ID. The element should be a div, and the dimensions you give it will be the dimensions of the map, in the case of the example, I used this:

Snipplr: http://snipplr.com/view/57428/google-maps-api3-made-simple/

Once we’ve done that we should have a map up and running, draggable and zoomable. But a map is only so useful without a point of reference. That is where the last little bit of code comes in. We have to declare one last thing, a new google.maps.Marker object. In this case we reuse the lat/lng from the maps center point, and attach it to the proper map. Since we called out map “map” (when we created the new map object on your div) it’s simple map : map and were done, obviously you’ll want to be a little more creative if your using more than one map per page.

There a lot more this API can do, you can read it all at the Google Maps Javascript API V3 Documentation Page. If anybody wants something else demoed I can easily add it to the post. I also have an example over at the Google Maps API example page as well. The Google maps API is incredibly versatile and can seemingly do anything you want with a little reading. I also looked into the Bing maps API, it seems just as versatile aut not as easy to implement. Also the UI was pretty tacky (but perhaps I was looking at an older version). Comments, Questions, Criticisms, Concerns, post ’em in the comments below.

5 Replies to “Working with the Google Maps API (v2/v3)”

  1. Thanks,
    It will be great if you can give a sample of a dynamic map based on an array of multiple address. Supposed I want to pinpoint my blog contributors’ location in a single map and use a variable key as address.

Leave a Reply

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