Google Maps API + SharePoint

April 30, 2008

Apologies for the flurry of posts here in the last 24 hours, I’m trying to get things up that I’ve left in open browser tabs knowing I wanted to capture them someplace useful beyond my del.icio.us bookmarks.

This topic is pretty neat though, because it’s really so simple and yet has high wow-to-effort ratio. Live Earth from Microsoft works slightly differently, but Google Maps API is really quite easy to plug into, even from a SharePoint page. They call this a “mashup” because you’re mixing media here in some delightful new way. Here’s what you need to do:

  1. Read through the Static Maps API Developer’s Guide from Google. Google has two map APIs, one for dynamic maps (the kind you can drag within the window) and static maps (which appear frozen but are also generated on-the-fly). I’ll go with static for the time being.
  2. You have to register for a Google Map API key (it’s free).
  3. Then all you need to do is pass some parameters to the API via your page! Here’s a full URL: http://maps.google.com/staticmap?center=40.714728,-73.998672&zoom=14
    &size=512x512&maptype=mobile&markers=40.702147,-74.015794,blues|
    40.711614,-74.012318,greeng|40.718217,-73.998284,redc&key=XXXXX

So here’s what you’re passing above:

  • Longitude for the center of the map
  • Latitude for the center of the map
  • the level of the zoom (in/out) you want for the map
  • the size of the image you want (512 x 512)
  • the maptype (for mobile, normal, etc.)
  • then you describe what points you would like laid out on the map, what Google calls “markers.” Each of these has:
  • a color for the marker, as well as a size (normal, tiny, mid-sized)
  • a letter or character to appear in the marker pin
  • longitude and latitude for the marker itself
  • the parameters for each marker are comma-separated, and each set of marker parameters are separated by a “|” character
  • finally, your API key (the XXXXX at the end is where this would go)

So the image above would end up looking like this:

Advertisements

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: