CODEWITHSUNDEEP
google-mapsgoogle-maps-api-3
jhanifen
jhanifen

Reputation: 4591

Google Maps v3 Custom Controls - Interact with control outside of map

I am using a google maps custom control. I would like a text link outside of the map (on another place on the page) to interact with the control. Basically I want to be able to trigger a click on the custom control.

Does anyone have advice or assistance on how this can be accomplished?

This also relates to Using custom control with Google Maps KeyDragZoom - how to activate drag zoom? , decided to make a question more general.

Upvotes: 4

Views: 3052

Answers (4)

Alien Technology
Alien Technology

Reputation: 1838

The accepted answer assumes that the zoom control is on the map. If visualEnabled is false, the dragzoom_btn image will not exist, nor will buttonDiv_.

Until external controls are officially supported, this hack seems to work:

function onZoomClick() {
   var myKeyDragZoom = map.getDragZoomObject();
   myKeyDragZoom.hotKeyDown_ = !myKeyDragZoom.hotKeyDown_;
}

When clicked, the zoom mode is turned on. When clicked again or the rectangle is drawn, zoom mode is automatically turned off.

Upvotes: 0

Antonio Almeida
Antonio Almeida

Reputation: 371

I've managed to create custom zoom in and zoom out buttons outside the map:

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <style type="text/css">
      html { height: 100% }
      body { height: 100%; margin: 0; padding: 0 }
      #map-canvas { height: 60%; width:60%; margin:20px auto; border:1px solid; padding-left:100px; }
    </style>
    <script type="text/javascript"
      src="https://maps.googleapis.com/maps/api/js?key=ADD-YOUR-API-KEY-HERE&sensor=false&region=AU">
    </script>
    <script type="text/javascript">

function HomeControl(controlDiv, map) {

 google.maps.event.addDomListener(zoomout, 'click', function() {
   var currentZoomLevel = map.getZoom();
   if(currentZoomLevel != 0){
     map.setZoom(currentZoomLevel - 1);}

  });

   google.maps.event.addDomListener(zoomin, 'click', function() {
   var currentZoomLevel = map.getZoom();
   if(currentZoomLevel != 21){
     map.setZoom(currentZoomLevel + 1);}

  });

}
var map;

/**
 * The HomeControl adds a control to the map that simply
 * returns the user to Chicago. This constructor takes
 * the control DIV as an argument.
 * @constructor
 */

function initialize() {

  var mapDiv = document.getElementById('map-canvas');
  var mapOptions = {
    zoom: 15,
    center: new google.maps.LatLng(-33.90224, 151.20215),
    panControl: false,
    zoomControl: false,
    streetViewControl: false,
    overviewMapControl: false,
     mapTypeControl: false,
     mapTypeControl: false,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  }
  map = new google.maps.Map(mapDiv, mapOptions);

  // Create the DIV to hold the control and
  // call the HomeControl() constructor passing
  // in this DIV.
  var homeControlDiv = document.createElement('div');
  var homeControl = new HomeControl(homeControlDiv, map);

  homeControlDiv.index = 1;
  map.controls[google.maps.ControlPosition.TOP_LEFT].push(homeControlDiv);
}

google.maps.event.addDomListener(window, 'load', initialize);    
</script>

</head>
  <body>
    <div id="map-canvas"></div>
    <div id="zoomout" style="border:1px solid; width:150px; heoght:50px; cursor:pointer; margin-bottom:20px;">ZOOM ME OUT</div>
    <div id="zoomin" style="border:1px solid; width:150px; heoght:50px;cursor:pointer;">ZOOM ME IN</div>
  </body>
</html>

Upvotes: 0

Trott
Trott

Reputation: 70075

If you are trying to make KeyDragZoom turn on/off when you click on a link outside the map, you can set the onclick event on the link to run a function like this:

function toggleClickZoom() {
    var myKeyDragZoom = map.getDragZoomObject();
    myKeyDragZoom.buttonDiv_.onclick(document.createEvent('MouseEvent'));
}

Upvotes: 1

hookedonwinter
hookedonwinter

Reputation: 12666

Try directly selecting it by source:

$('img[src=http://maps.gstatic.com/mapfiles/ftr/controls/dragzoom_btn.png]').click();

Upvotes: 2

Related Questions