Google Maps API Tutorial

Using GControlPosition

Here's an example

As the map moves or zooms, the element stays fixed in the same place relative to the container.

In this example I've used a div, but you could use something else, like an image or an iframe.

The following steps are required:

• Create your html element in the normal way.
   
  
• Create a GControlPosition() object, e.g.
  var pos = new GControlPosition(G_ANCHOR_BOTTOM_LEFT, new GSize(100,10));
  The first parameter indicates which corner to caclulate the position from. The possible values are G_ANCHOR_BOTTOM_LEFT, G_ANCHOR_BOTTOM_RIGHT, G_ANCHOR_TOP_LEFT, G_ANCHOR_TOP_RIGHT.
  The second parameter is a GSize object indicating the distance from the corner.
   
  
• "apply" the GControlPosition to the element, e.g.
  pos.apply(document.getElementById("control"));
   
  
• "append" the element to the map container
  map.getContainer().appendChild(document.getElementById("control"));

Notes:

1. Info windows will not avoid opening under elements placed this way. They only avoid real GControl() objects.
    
   
2. You can learn about creating real GControl() objects in the Official Documentation
    
   
3. Placing elements in such a way that they obscure the Google Logo or the copyright information is a violation of the Terms of Use.
    
   
4. To place an element so that it moves with the map, rather than being fixed in place, use an ELabel.

Back to Mike's Homepage
Up to the start of this tutorial