Working with Addresses? Use the new Google Maps API! 

 August 26, 2019

By  Jack Fisher

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.

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.

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!

 

Jack Fisher


Hey - I'm Jack. I've been goofing around with code since 2002, and I've come a long way from my first Geocities site. I started Lateral Code 12 years ago and have been blogging ever since.

{"email":"Email address invalid","url":"Website address invalid","required":"Required field missing"}

Subscribe to our newsletter now!