How to use KeyDragZoom with GMAP3?

Question

The documentation shows - http://google-maps-utility-library-v3.googlecode.com/svn/tags/keydragzoom/1.0/docs/examples.html

     function init(){
      var myOptions = { 
        zoom: 13, 
        center: new google.maps.LatLng(49.2903, -123.1294), 
        mapTypeId: google.maps.MapTypeId.ROADMAP 
       };
      var map = new google.maps.Map(document.getElementById("map"), myOptions); 
      map.enableKeyDragZoom({
            boxStyle: {
              border: "thick dashed black",
              backgroundColor: "red",
              opacity: 0.5
            },
            paneStyle: {
              backgroundColor: "gray",
              opacity: 0.2
            }
      });
    }

but because i am using gmap3 im not sure how to implement? here is my code to init the map

     $('#dispatcher').gmap3(
      {action: 'init',
        options:{
          center:[53.9783997, -1.5666347],
          zoom:6,
          mapTypeId: google.maps.MapTypeId.MAP,
          mapTypeControl: true,
          mapTypeControlOptions: {
            style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
          },
          navigationControl: true,
          scrollwheel: true,
          streetViewControl: true
        }
      }

any ideas? Cheers

Answer 1

Try this:

$('#dispatcher').gmap3({action:'get'}).enableKeyDragZoom({
            boxStyle: {
              border: "thick dashed black",
              backgroundColor: "red",
              opacity: 0.5
            },
            paneStyle: {
              backgroundColor: "gray",
              opacity: 0.2
            }
      });

.gmap3({action:'get'}) returns google.maps.Map object. So you can perform any actions on it,that google.maps.Map object can do, included enableKeyDragZoom action.