CODEWITHSUNDEEP
jquerygoogle-mapsgoogle-maps-api-3keydragzoom
Vince Lowe
Vince Lowe

Reputation: 3620

How to use KeyDragZoom with GMAP3?

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

Upvotes: 1

Views: 776

Answers (2)

jbdemonte
jbdemonte

Reputation: 705

yes, or you also can use the callback function from "init" wich include the map:

    callback: function(map){
       map.enableKeyDragZoom({
        boxStyle: {
          border: "thick dashed black",
          backgroundColor: "red",
          opacity: 0.5
        },
        paneStyle: {
          backgroundColor: "gray",
          opacity: 0.2
                }
        });
    }

Upvotes: 0

Engineer
Engineer

Reputation: 48793

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.

Upvotes: 2

Related Questions