Bringing Google Maps API to Your Website

Published: January 13th, 2011 by Ryan M.



maps-api
Google Maps’ APIs are one of the most functional tools out there for businesses. They let you embed Google’s vast amounts of location data in any website you create, whether it’s desktop or mobile.

The newest versions of the APIs have been improved to load fast on mobile browsers like the iPhone and Android. They’re also highly customizable. That means you can take a standard Google map and make it reflect your own brand identity. You can change the colors, incorporate animation, remove or add data, and add custom icons and text labels.

Google Maps APIs in action

Here’s a map that we created for Hageman Trucking, for example. You’ll notice that we laid a transparent map of 17 Ohio counties on top of a standard Google map, showing Hageman’s service areas. We also created custom icons (miniature Hageman logos) showing the company’s two locations.

Another example is what we did for Koehlke Components. We created a streamlined map of the United States showing only state names. States turn a Koehlke red when you mouse over them, and when you click on a state, a text box pops up showing that state’s sales rep. If you click on “Contact Your Sales Rep,” you can email your rep right from that page, without jumping to Outlook. We used jQuery to create that special feature.

For the developer

From the developer’s perspective, the Google Maps APIs are pretty awesome. Unlike other APIs, they are nearly always fast and available. That makes a difference, because if you embed a third-party API in your customer’s website – and that API is unreliable – nobody’s happy. Not your customer, and not their customers.

Typical of Google, the documentation for the APIs is very user-friendly. What you can do with them is pretty much limitless. There’s also a huge community surrounding each of their API platforms (Google Maps, Google Earth, Google Charts, etc.). So there are a ton of other developers writing about how to solve certain problems they run into, and offering up new ideas.

Finally, because this is a JavaScript-based technology, it works just as well on mobile devices as it does on a desktop. And that’s when you need a map most, anyway – when you’re mobile.

Leave a Reply

You must be logged in to post a comment.

Atomic Interactive