Would you like to travel to Paris? Maybe Singapore? How about Hawaii? Many people love to travel to discover new places, meet family, or just have a great time. In order to get from place to place, they often use maps. Indeed, maps are a vital part of traveling, providing directions to new, exciting locations.
With the new technology age, maps have moved from tangible paper to the virtual world, allowing anyone to access them with a simple visit to Google Maps. More importantly, with the new Google Maps API Version 3, it’s simple to integrate these maps into any website.
In the following article, I’ll be explaining how to get started with the new API and embrace the technology from the folks at Google.
Focus
We’re going to focus on creating a static map, which is just an image of a location. This is in contrast to a dynamic map, which enables the user to move and zoom. In a follow-up article, which will be posted later this week, we’ll tackle a dynamic map using JavaScript.
Static Map
The static map only requires an image tag and a few configuration options:
<img src="http://maps.google.com/maps/api/staticmap?center=Chicago,IL&zoom=8&size=512x512&maptype=roadmap&sensor=false" alt="Static Map of Chicago, Illinois"></img>It looks a bit daunting at first, but, when broken down, it’s much easier to understand. Note that all the magic happens in the src attribute:
http://maps.google.com/maps/api/staticmap?– the base URL which we pass configuration options to.center=Chicago,IL– the center of the map, which, in this case, is Chicago, Illinois. Note that this can be any address.zoom=8– the amount to zoom in. This value was determined purely by experimentation.size=512x512– the size of the map in pixels. In this case, it’s 512px by 512px.maptype=roadmap– the type of the map. Possible values are roadmap, terrain, satellite, and hybrid.sensor=false– tells Google Maps whether we are trying to sense the user’s location. In this case, we aren’t.
The above code produces the following image:
We can play around with the options a bit to produce a much different map:
<img alt="Static Map of New York City, New York" src="http://maps.google.com/maps/api/staticmap?center=New+York+City,NY&zoom=4&size=512x512&maptype=hybrid&sensor=false"></img>
These new configuration options yield the following map:
When creating maps, it’s also necessary to mark important locations, whether they be destinations or areas to avoid. To do so, we can use the markers parameter:
<img src="http://maps.google.com/maps/api/staticmap?center=Chicago,IL&zoom=8&size=512x512&maptype=roadmap&sensor=false&markers=Chicago,IL" alt="Static, Marked Map of Chicago, Illinois"></img>
Notice the new parameter:
markers=Chicago,IL
This will create the following marked map:
We can add in more configuration options to the marker parameter, including a color and a label. For example:
markers=color:blue|Chicago,IL
Notice the pipe operator (|) which separates the color from the location. This change will edit the marker color, yielding the following map:
As you can see, the blue marker still has a dot representing the location. When working with multiple locations, you might want to change this dot to a number or letter in order to differentiate between locations:
markers=color:blue|label:A|Chicago,IL
Instead of the dot, the image now has the letter A:
To add multiple markers, just add in another markers parameter:
<img src="http://maps.google.com/maps/api/staticmap?center=Chicago,IL&zoom=8&size=512x512&maptype=roadmap&sensor=false&markers=color:blue|label:A|Chicago,IL&markers=color:purple|label:B|Hammond,IN" alt="Static, Marked Map of Chicago, Illinois and Hammond, Indiana"></img>
Now there are two markers: one for Chicago, Illinois and another for Hammond, Indiana:
This is accomplished using the following marker code:
markers=color:blue|label:A|Chicago,IL&markers=color:purple|label:B|Hammond,IN
Finally, when specifying the markers attribute, note that the center and zoom parameters are no longer required. If we omit these, we get the following code:
<img src="http://maps.google.com/maps/api/staticmap?size=512x512&maptype=roadmap&sensor=false&markers=color:blue|label:A|Chicago,IL&markers=color:purple|label:B|Hammond,IN" alt="Static, Marked Map of Chicago, Illinois and Hammond, Indiana with no Center and Zoom"></img>
And the corresponding map:
As shown in the image, Google Maps will automatically use a fitting center and zoom in order to display the two locations.
Conclusion
As you can see, we’ve created multiple static maps all through the new Google Maps API. With no needed API key (which was previously required) and some simple URL manipulation, Google makes it near effortless to integrate a map into any website.
Are you interested in the Google Maps API? Do you have any questions or comments? Did you stumble upon more useful features for static maps? Leave a comment below and a share your thoughts!
Don’t forget that we’ll be creating dynamic maps with the JavaScript API later this week!