In usability we trust

UX and all things web

Extending Google Maps API 3 with libraries

Google Maps API 3 is streamlined to include just the core functionality needed to create basic maps. It’s architected that way too ensure that the API will load as fast as possible. It’s unnecessary for the browser to download and parse functionality that’s not needed. If, however, you need to use specific functionality such as being able to measure distances or display ads, you can get this additional functionality by including a library in the API.

This article will describe how to do just that and what libraries that are currently available.

Libraries

There are currently 2 libraries available. These are:

  • The Geometry Library
  • The AdSense Library

This list will likely grow as the API matures. It’s actually a great plugin architecture that lets the API evolve nicely with side-track functionality without interfering with the core API functionality.

The Geometry Library

The Geometry Library includes methods to calculate distances and areas as well as methods to encode and decode the points used in polylines and polygons (Encoding is a technique that’s used to compress and optimize polylines and polygons).

The AdSense Library

If you want to display ads in your map, the AdSense Library provides methods to do just that. Note that it requires that you have an AdSense account that’s enabled for AdSense for Content.

To see how these might look like, check out this example from Google. To the left of the map you can choose the format of the ads.

How AdSense might look on a map

Including a library

To include a library in the API you need to reference it in the <script> tag where you include the main API. This is done by adding an additional parameter in the URL called libraries. This is how to include the Geometry Library.

<script type="text/javascript" src="http://maps.google.com/maps/api/js?libraries=geometry&sensor=true_or_false"></script>

Note: To add more than one library you add them separated with a comma.

Accessing the methods

The methods of the library are accessed through the google.maps.libraryName namespace. So for instance; to encode the path of a polyline (a feature of the Geometry Library) you write this:

var encodedPath = google.maps.geometry.encoding.encodePath(myPath);

Summary

Libraries are a powerful way of including more functionality into the Google Maps API. If you have the need for additional geometry functionality or need to include ads in a map, you can start benefiting from them right away. For other needs, I’m sure that new libraries will gradually be added as the API evolves.

Resources

To read more about how to use the Google Maps API 3 Libraries check out these resources:

My Google Maps book

If you found this article useful you might be interested in my book Beginning Google Maps API 3. It covers everything you need to know to create awesome maps on your web sites. Buy it on Amazon.com

5 Comments

  1. Hej! good to see you’re back in the blogging.

    So can we start developing third-party plug-ins for Google Maps now?

  2. Hej Tom!

    Well I’ll try to post more frequently from now on. 🙂

    You’ve always been able to create utility libraries like these ones. The (native) libraries that can be imported via the API is restricted to Google’s own.

  3. Nice Lib! This geometry lib will aid my apps so much!

  4. Hi ! I’d like to know how to add more than one libraries in the URL, for example if you want to add the 3 of them in one call what is the syntax of the URL ? Thanks

  5. henri4: You just add them separated with a comma like this:

    <script type="text/javascript" src="http://maps.google.com/maps/api/js?libraries=geometry,places&sensor=true_or_false"></script>
    

Leave a Reply

Your email address will not be published.

*