Google Maps API Tutorial

© 2006, 2007, 2008, 2009 Mike Williams

 
Translate this page:

 

Using GOverviewMapControl

GOverviewMapControl provides an "overview" map which is linked to the main map.

Here's an example

Tweaking the Overview map

In versions below v2.93 the following tweaks can be applied directly.
In version v2.93 and above you need to wait for the control code to be loaded from an external module.
See Tweaking GOverviewMapControl in v2.93

Absolute Positioning

Positioning the overview can be achieved by obtaining a reference to the div that contains the overview map and applying styles to it. The "id" of the overview div is created from the "id" of the parent map by appending "_overview". So if your main map is called "map", the overview map div will be called "map_overview".

Applying styles

Once you've got a reference to the div, you could apply other styles to it. Those margins on the left and top look rather odd when it's not in the corner of the page. I guess that the styles might be likely to change in future releases, so the styles that I apply in the example may well need to be changed.

The overview has three nested divs, the outer one has id="map_overview". The API styles are:

  • Outer div: width and height set to the requested GSize() or (150,150).
  • Next div: width and height set to the requested GSize() or (150,150), background-color: white, border-top and border-left: "1px solid gray".
  • Inner div: width and height 9px less than the outer div size, background-color: "rgb(229, 227, 223)", border: "1px solid gray", left: "7px", top: "7px".
It's the "left:7px; right:7px" that causes the map to be placed asymmetrically within the div.

In my example, I make the border go all the way round, centre the inner div within the middle div, and change the size of the inner div to be an even number of pixels so that the margins are the same width all the way round.

Accessing the overview GMap2

It is possible to get a reference to the GMap2 that sits inside the GOverviewMapControl, and then use GMap2 methods to manipulate it.

Here's an example that changes the map type of the overview and sets up a "click" listener on it.

Restrictions

  • Many GMap2 methods can't be used on the overview until the GOverviewMapControl has completed its initialisation. If you try to perform them in the same "time slice" as the GOverviewMapControl was created, you'll get an error. The calls can be deferred, like this setTimeout("ovmap.setMapType(G_SATELLITE_MAP);",1);.
     
  • There's no point using setCenter() or setZoom() on the overview, since the GOverviewMapControl code will update those settings the next time the main map information changes.
Back to Mike's Homepage
Up to the start of this tutorial