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.
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
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.
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
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!