ExtLargeMapControl How-to

You can use this class to add a control that mimics the 3-d pan/zoom control used on Google Maps. Since it's open source, you can also tweak its UI or functionality to meet your needs. Adding it to your map is easy:

  1. Include extlargemapcontrol.js in your document header. You can reference it from here or download it to your own server.
    <script src="extlargemapcontrol.js" type="text/javascript"></script>
    
  2. Create a ExtLargeMapControl object and add it to the map.

    var map = new GMap2(document.getElementById("map_canvas"));
    map.setCenter(new GLatLng(37.4419, -122.1419), 13);
    var extLargeMapControl = new ExtLargeMapControl();
    map.addControl(extLargeMapControl);
    

View example (simple.html)

Advanced Configuration

The following example shows 2 maps with two advanced uses of the control. In the first map, we add the small version of the control (just the +/- buttons) by specifying type="small" in the constructor options.

var extLargeMapControl1 = new ExtLargeMapControl({type : "small"});
map1.addControl(extLargeMapControl1);

In the second map, we add a version of the control with tooltips in a different language (Spanish) by specifying the various tooltip strings in the constructor options.

var opts2 = {
  zoomInBtnTitle : "Aumentar",
  zoomOutBtnTitle : "Reducir",
  moveNorthBtnTitle : "Vista panorámica hacia arriba",
  moveSouthBtnTitle : "Vista panorámica hacia abajo",
  moveEastBtnTitle : "Vista panorámica a la derecha",
  moveWestBtnTitle : "Vista panorámica a la izquierda",
  homeBtnTitle : "Volver al último resultado"
};
var extLargeMapControl2 = new ExtLargeMapControl(opts2);
map2.addControl(extLargeMapControl2);

View example (advanced.html)