Web ServicesThe Google Maps API's Top 10 Under-the-Radar Enhancements

The Google Maps API’s Top 10 Under-the-Radar Enhancements

Developer.com content and product recommendations are editorially independent. We may make money when you click on links to our partners. Learn More.

The Google Maps API has been around since June 2005, helping developers build location-based applications. With new features added all of the time, some very useful extensions can get overlooked. In this article, I offer 10 unheralded Google Maps API tips and tricks that can help you enhance your location-based applications in exciting new ways.


1. Create Heat Maps

10 Google Maps API Tips and Tricks

If you’re in search of a readily available HeatMap implementation solution that plugs directly into your application maps, look no further than HeatMapAPI. To use HeatMapAPI, all you need to do is create a HeatMapAPI key and reference their JavaScript library within your application.


HeatMapAPI is a commercial service, but it does allow users to map up to 100 points per API call with a maximum limit of 500 calls per day. Users requiring more involved use of the API have the option of purchasing one of several service tiers, starting at $20/month for 200 daily calls with no maximum number of points. See the HeatMap API fee schedule for complete details.


2. Build Mobile-Optimized Applications


With mobile devices increasingly used as a primary means for interacting with the web, it stands to reason that mapping applications would garner a great deal of interest for those users who are on the go and in search of more information about a certain location. To help developers overcome the challenges encountered when working within resource-constrained environments, the Google Maps API team has been hard at work creating a version of the API specifically suited for a mobile use.


The Google Maps JavaScript API V3 consists of a highly optimized JavaScript library intended for use on mobile devices, with particular emphasis on Android- and iPhone-based devices. However, developers are free to use it within standard desktop browser applications as well. While the syntax is slightly different from version 2, developers will have little problem working with the new version.


Given the focus on performance, not all features available within the Google Maps API V2 release are available within version 3. See the V3 documentation for a complete overview of what’s currently available.


3. Manage Large Numbers of Markers


Several location-based web applications have experienced extraordinary growth during the past few years, resulting in thousands of new locations. If you have similar ambitions for your project, it is imperative that you design the site in such a way that it can handle the load imposed by managing so many markers. For starters, using the API’s native marker plotting capabilities simply won’t do if the user is zoomed out over a large city and you attempt to plot 500 or so WIFI markers within the map boundaries. Instead, you’ll need to effectively optimize the way these markers are displayed.


For instance, you probably should consolidate marker locations plotted around a specific location, displaying only a representative marker when the user is zoomed out to a certain level. As the user zooms in towards a representative marker, the application can display additional markers plotted around that location. For instance, Figure 2 displays a map containing markers representing the weather forecast around Europe. If you zoom in, you’ll be provided with a more localized representation of the forecast for specific areas, as presented in Figure 3.








By managing your markers according to zoom level, you’ll reduce the number of markers that must be plotted within a given viewport, in turn greatly improving your application’s performance. Fortunately, the GMaps Utility Library includes a tool called MarkerManager that automates the task. You can simply add your markers to a manager rather than directly to the map as you would using the API’s native capabilities, and MarkerManager will take care of the rest!


4. Add Local Search


Pre-populating a map with various embedded markers provides users with some context regarding what can be found around a region. However, what if the user wanted to search for a specific location, or category of location, such as “grocery store?” You can provide users with the ability to perform a localized search by embedding the GoogleBar (see Figure 4).





Adding the GoogleBar to your map is shockingly easy. It takes just one line of code:

map.enableGoogleBar();

5. Make Money with AdSense for Maps


Google’s various advertising programs account for 99 percent of its corporate revenue, and for good reason; the pay-per-click approach has proved enormously successful for not only advertisers who participate in the program but also for the content managers who embed Google-managed advertising into their web sites.


Developers are now able to embed location-specific advertisements into their maps using two approaches. The first, known as Maps Ad Unit, allows you to overlay advertisements atop your map, as demonstrated in Figure 5.





The second approach allows you to embed ads within the previously introduced GoogleBar Local Search feature, resulting in relevant ads being displayed alongside local search results.


It’s now possible to embed advertising into your location-based applications using Google AdSense for Maps To learn more about how to embed advertising into your Google Maps, see the documentation. Also, be sure to read this post from the Inside AdSense blog for a great overview of this advertising program’s capabilities.

6. Add Traffic to Your Map


One relatively unknown feature of the Google Maps web site is the ability to view realtime traffic information, as depicted in Figure 6.





If you’d like to include a traffic-oriented feature within your application, you can draw upon Google’s trove of traffic-related data by adding a custom traffic overlay made available through the API, as demonstrated here:

  var trafficOptions = {incidents:true};
trafficInfo = new GTrafficOverlay(trafficOptions);
map.addOverlay(trafficInfo);

7. Add a Context Menu Control


The official Google Maps web site regularly adds interesting new features to the site, including most recently the ability to drop a marker identifying a location’s coordinates, as demonstrated in Figure 7.





Adding the marker is done via a context menu, which is similar to the application-specific menu that appears when you right click at item on your computer’s operating system. You can add a context menu to your Google Maps API-enabled web applications. The context menu contains several useful features, such as the ability to center the map over the menu location. An example of this context menu is presented in Figure 8.





Such a capability comes thanks to the GMaps Utility Library’s Context Menu Control. Adding the context menu control is easy; you use just one line of code:

 map.addControl(new ContextMenuControl());

8. Use the Code Playground


Building applications using the Google Maps API is often involves much trial and error. Consider using the Google Code Playground to experiment with new features! This tool allows you to build maps using an amazingly simple point-and-click interface, in addition to providing you with an intuitive way to learn about how to implement some of the API’s more difficult features, such as creating custom marker icons.


To begin creating your map, just select the map feature from the list as depicted in Figure 9. The utility will add the feature to the code editor and automatically update a map located below these widgets.





9. Build Custom Applications Using the Google Maps Data API


Given the mind-boggling amount of data stored within Google’s mapping service, it’s clear that they’ve devoted a great deal of time to designing a scalable, reliable storage and access solution. If you’d like to leverage not only their cataloged data but the actual data storage system used by the service to create your own custom mapping application, check out the Google Maps Data API. By accessing the raw data in KML format, you can create geo-applications for mobile devices, desktop applications, or even command-line interfaces!


10. Embed Google Street View


Google’s Street View project has received a great deal of press, both positive and negative. Regardless of your feelings about the project’s implications, the techie in you has to admit that it’s pretty darned cool. If you’d like to integrate Street View into your mapping applications, check out the API’s Street View capabilities. Not only can you add a Street View overlay such as that found on the official Google Maps web site, but you also can implement advanced features such as integrating user photos found within photo services such as Google Picasa.


The StreetViewPanorama object is Flash-based, meaning it will work only on client devices that support Flash. Sorry iPod and iPhone users!


Conclusion


Almost five years after its initial release, the Google Maps API remains a model of innovation, as indicated by the 10 great features discussed in this article. Are you using new or interesting API features within your applications? Tell me about them in the comments!


About the Author


Jason Gilmore is founder of EasyPHPWebsites.com. He is the author of several popular books, including “Easy PHP Websites with the Zend Framework,” “Easy PayPal with PHP,” and “Beginning PHP and MySQL, Third Edition.”

Get the Free Newsletter!

Subscribe to Developer Insider for top news, trends & analysis

Latest Posts

Related Stories