Google Maps API V3 Overview Control

In mid-2009, Google launched version 3 of their fantastic Google Maps API. This new version was a complete overhaul of the existing system, moving to an MVC-based architecture, with the primary focus on speeding up the code so it would work better on mobile devices. It has now taken over from Maps API v2 as their primary Maps AP v2 now deprecated.

One of the things missing from v3 that was in v2 was v2’s GOverviewControl, which was the mini-map you’d see on the bottom right of the main map, which would be zoomed out further than the main map. When I started work on overhauling Daft.ie’s mapping system, we originally used Maps v2 and had such a control in place. We decided to use Maps v3 for the new system and it was then I noticed that the Overview Control was missing. At the time I was still learning how to use the API and have since become reasonably proficient in it, enough so to complete our maps overhaul! Taking these skills, I’ve now written a jQuery-based JavaScript extension that enables users to add the Overview Control to their map, along with a number of customisation options.

First, let’s see it in action:

Most of this is simply building the div for the map, with the key line being map.Overview();, which adds the Overview Control. When calling the Overview function for a div, you must ensure it has an id, as well as width and height values, in pixels.

As promised, there are a number of customisation options, which are passed as the only parameter to the Overview function and are combined into a JSON object. In the example here, no parameters are passed. These options are outlined below. Further description and defaults are available in the googlemapsv3overview.js file.

• zoom_difference: Difference between the main map zoom and the overview zoom
• border_color: Color of border around the overview box
• rectangle: Whether or not you want to display a rectangle in the overview map that represents the bounds of the main map
• rectangle_border_width: Width of the rectangle’s border
• rectangle_color: Color of the rectangle
• rectangle_opacity: Opacity of the fill of the rectangle
• up_img: Image to be used for the arrow in the bottom right corner of the overview, when the overview is invisible.
• down_img: Image to be used for the arrow in the bottom right corner of the overview, when the overview is visible.
• img_width: Width, in pixels, of up_img and down_img
• img_height: Height, in pixels, of up_img and down_img
• img_width: Width, in pixels, of your overview map
• img_height: Height, in pixels, of of your overview map

An example of an overview map of 200px * 200px dimensions, with a red box would look something like:

The only piece I didn’t implement from Google Maps v2 GOverviewControl was making the blue rectangle draggable. The project is available on GitHub, so if anyone wishes to modify the code and add this feature, or anything else, please feel free to do so.

If you don’t want to get the code from GitHub, here’s the link to download the zip file, containing a regular JavaScript file, a minified JavaScript file, images for the up & down arrows and a sample page: googlemapsv3overview.zip.