Key DragZoom Examples

Include Scripts

The first step is to include keydragzoom.js or keydragzoom_packed.js in your document header, after GMaps API is load. You can use the online version if you do not want to download the script.

      <script src="/path/to/keydragzoom_packed.js" type="text/javascript"></script>
    

Enable Drag Zoom

You can simply call GMap2.enableKeyDragZoom() to enable it, just the same way you call GMap2.enableScrollWheelZoom().

        function init(){
          var map = new GMap2(document.getElementById("map"));
          map.setCenter(new GLatLng(45.5, -122.7), 14);
          //...
          map.enableKeyDragZoom();  
        }
    

View example | Packed |

Style Zoom Box

You can pass some css properties when you enable dragZoom. They will be applied to the zoom box. In the following example, the zoom box is half transparent with yellow with a 3 pixel thick blue border

        function init(){
          var map = new GMap2(document.getElementById("map"));
          map.setCenter(new GLatLng(45.5, -122.7), 14);
          //...
          map.enableKeyDragZoom({
                boxStyle: {
                  border: "thick dashed black",
                  backgroundColor: "red",
                  opacity: 0.5
                },
                paneStyle: {
                  backgroundColor: "gray",
                  opacity: 0.2
                }
          });
        }
    

View example | Packed |

Use Different Key

If you do not want using the SHIFT key as you drag, you can passing one of the other two keys: ALT or CTRL. In the following example, you can drag zoom by hold the CTRL key

        function init(){
          var map = new GMap2(document.getElementById("map"));
          map.setCenter(new GLatLng(45.5, -122.7), 14);
          //...
          map.enableKeyDragZoom({
            key: 'ctrl'
          });
        }
    

View example | Packed |

Multiple Map

Each map has its own drag zoom tool.

        function init(){
          var map1 = new GMap2(document.getElementById("map1"));
          map1.enableKeyDragZoom();
          var map2 = new GMap2(document.getElementById("map1"));
          map2.enableKeyDragZoom();
        }
    

View example | Packed |

Events

The dragzoom tool triggers different events at key moments of the drag zoom operation.

       map.enableKeyDragZoom();
          var dz = map.getDragZoomObject();
          GEvent.addListener(dz, 'activate', function() {
            GLog.write('DragZoom Activated');
          });
          GEvent.addListener(dz, 'dragstart', function() {
            GLog.write('DragZoom Started');
          });
          GEvent.addListener(dz, 'drag', function() {
            GLog.write('DragZoom Dragging...');
          });
        }
    

View example | Packed |