October 22, 2014
Hot Topics:
RSS RSS feed Download our iPhone app

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

  • March 19, 2010
  • By Jason Gilmore
  • Send Email »
  • More Articles »

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

Heat Maps offer a highly intuitive way to represent information density according to color. The concept can be applied quite well to maps, varying the intensity of color-based overlays according to the number and proximity of markers on a given map. Even when you've mastered how to create custom overlays, achieving an effect such as that shown in Figure 1 can be rather difficult.

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.


Tags: JavaScript, Google Maps, local search, mobile development, localization



Page 1 of 2



Comment and Contribute

 


(Maximum characters: 1200). You have characters left.

 

 


Sitemap | Contact Us

Rocket Fuel