Using the Google Maps API to Add Cool Stuff to Your Applications
  November 21, 2012

Maybe you can’t use a map in your application to save the world, but you might set a more modest goal, such as helping the business improve sales. Fortunately, by using the Google Maps API, it’s easy to build in location-specific functionality that helps people visualize your application’s data. Here’s an overview and a simple example.

With Google’s API, you can add maps to your application in a number of interesting ways. The main ingredient you need is creativity.

Maps do more than let people visualize a geographic location. They represent the means by which we see data in the context of how it affects the world around us. For example, when you create a report that shows what stores sell the most widgets, people understand the value of those sales. However, when you place those sales on a map, people begin to see patterns to the data that don’t exist within the report. A manager may notice that most of the widget sales occur in industrial areas or along a specific route with a nearby airport or major freeway. The sales could be affected by the altitude of the stores or any of a number of other geographical features that the static report simply can’t make clear and for which no data exist.

Or, for a non-sales example, you might create a location map that shows each member of your family based on their cellphone data so you can see where they actually are. As family members change location, so do the map pins (sort of like the Marauder’s Map in Harry Potter).

Relating data to the world, magical or not, helps your application’s users get a context for the information they work with. When you view documentation without the benefit of a map, you only get a piece of the information that’s available. Combining all sorts of data with maps helps you see how the data interacts with the physical world you reside in and makes the data far friendlier.

Understanding What It Can Do

The Google Maps API does more than simply allow you to view a map. Even if that was all it did, you could still use it for data analysis, but the API actually allows to you perform four levels of inquiry:

  • Location maps: A location map can show either a street view or a satellite view. You’ve surely used these to plan a trip from one location to another. However, even with this sort of map, you can create innovative uses. For example, when placing a pin on the map to represent a location, you could color-code the pins to define certain criteria. The colors could form a pattern that would tell you more than the data itself. Google also demonstrates a tabular use for location maps: Place the cursor in any cell, and the map shows how to get from the location on the left to the location at the top of the table. You also obtain distance and travel time between the two locations; that can add value to a lot of Web applications.
  • Geospatial visualization: To visualize the data more completely, you can add graphics to your maps, which might include elevation data or unique coloring to show how the data affect it. For example, your application might display sales data for each location by the hour, with traffic flow information and an animation that illustrates the rate of change. The sum of this information could help you advertise your locations better or pick a new location that takes advantage of the information you’ve just uncovered.
  • Mobile apps: You can customize applications to work on mobile devices and to integrate with location information – something that matters more and more with so many of us looking for products, stores, or friends nearby. With the Google API, too, you don’t have to rely on JavaScript. That may be wise, considering that many people have complained about how JavaScript tends to cause Android devices to flicker (although I’m sure that the flicker isn’t limited to Android devices).
  • Customized maps: Using map customization, you can change the underlying map colors to better highlight specific features, remove map sections, and animate the map presentation in specific ways. It’s also possible to add your own street views and create custom routes on the map. In this last case, you might want to create a route that shows guests specific views of the surrounding area or avoid less palatable scenery (such as a competitor’s store).

The point to all of this is that you can create a map that doesn’t really look or act the way people expect maps to work. The map can take on entirely new meaning and act as an aid to analyzing data, working more efficiently, or determining human and technology loads. The maps can be linked to data you provide, animations, videos, or other visuals so that people using the application gain an immersive experience. How you use these features simply depends on what you want to do with the map creatively.

Gaining Access to Google Maps API

The Google Maps API comes in two flavors: free and paid. As you might expect, the free version has a significant number of restrictions and has fewer capabilities than the paid version. Some of the restrictions might not bother you at all. For example, the free version is limited to 2,500 requests for directions, with a maximum of 10 waypoints, in a given day. A small business may not use that many.

Other restrictions could prove problematic. When working with the free version, your application must not only be free to the public, but it must also be publicly available as either a Web page or a mobile application. That could limit the way you interact with the Google Maps API (especially for in-house software development) unless you’re willing to buy a license. It pays to read their fine print before you get too involved in creating an application; you might be disappointed when the application won’t run as you expect it to, or you'll have to convince the boss to spend money from the IT budget.

Because of the restrictions that Google has placed on the Google Maps API, your best bet in working with it is to start with the JavaScript API, which has a useful tutorial. Make sure you obtain the required API key before you proceed too far, because you need the key to do any sort of testing. You also need a Google account in order to obtain an API key. The simple example that follows this section assumes that you’ve obtained the API key (or the code won’t run as presented).

Creating a Simple Example

You don’t have to do anything too fancy to create a Google Maps API example that does something useful. I started with Google’s Hello World example and worked through some changes so I could see how things actually work. Along the way I discovered that it’s essential to learn more about the MapOptions object before you can really do much. The result of some initial experiments is the example that follows.

<!DOCTYPE html>



      <title>Mapping Interesting Application Additions Using the Google Maps API</title>

      <style type="text/css">

         html { height: 100%; }

         body { height: 100%; margin: 0; padding: 0; }

         #MapCanvas { height: 90%; }


      <script type="text/javascript"



      <script type="text/javascript">

         function GetMap() {

            var Latitude = document.getElementById("latitude").value;

            var Longitude = document.getElementById("longitude").value;

            var mapOptions = {

               center: new google.maps.LatLng(Latitude, Longitude),

               zoom: 8,

               mapTypeId: google.maps.MapTypeId.ROADMAP


            var map = new google.maps.Map(document.getElementById("MapCanvas"),





   <body onload="GetMap()">

      <h1 style="text-align:center;">Google Map Example</h1>

      <div id="Input" style="width:100%; height:10%; padding-left:15px;">

         Longitude: <input id="longitude" value="-87.95" type="text" />

         Latitude: <input id="latitude" value="43.04" type="text" />

         <input id="submit" value="Get Map" type="button" onclick="GetMap()" />


      <div id="MapCanvas" style="width:100%; height:90%"></div>



This is probably the next step after the Google Hello World example, and I hope it serves as a good introduction to how much you can achieve with relatively little effort. This code lets you enter a latitude and longitude and center the map on that location. I decided to start at Milwaukee, Wisconsin, but you can use any starting point that works for you as long as you know the latitude and longitude for it. Here’s how the example looks in Internet Explorer.

Mapping Interesting Application

(Because this is an HTML5 example, your browser must support HTML5 to display the map.)

The example works in three parts. The first part is the user interface, which consists of some controls and a <div> that acts as a canvas to hold the map. You need to allocate space to hold the map, which is the reason for the <style> tag in the heading. The canvas takes up 90% of the page, while the controls take up the other 10%. Notice that I placed default values in the two textboxes. The example fails if you don’t provide default values and providing them is simply good coding practice anyway.

The second part is gaining access to the Google Maps API. The first <script> contains a simple src (source) value that points to the API. Replace YourKeyHere with the key you obtained from Google or the example fails.

The third part actually obtains the map from Google. The second <script> contains the GetMap() function that is called by the document’s onload event and also each time the user clicks Get Map. It begins by obtaining the latitude and longitude from the document. The next step is to create an object literal that contains the three required parameters for the MapOptions object: where to center the map, the amount of zoom to use, and the kind of map to display. Calling the google.maps.Map() function loads the map into the location you specify using the options you provide.

Bottom Line: Your New Directions

The Google Maps API lets you create remarkable applications that are limited only by your imagination. Using the various features you have available, you can create new types of visualizations that make your data come alive. More importantly, your data can now tell others about the environment in which the data exist. People can now see patterns that might have been invisible in the past and these patterns can give your business a significant edge.

The only limitation for the first time developer is that the free Google Maps API license is somewhat limiting. It’s the license that’s limiting, not the technology. You need to find ways to experiment with the API that don’t break the rules, yet provide you with the full flavor of everything this API can provide.

See also:

Free White Paper: The 8 Keys to Cloud-Op