All geek questions in one place

Google Maps v3 Custom Controls - Interaction with off-map controls

I am using a Google Maps user control. I would like the text link outside the map (elsewhere on the page) to interact with the control. Basically, I want to be able to click on a user control.

Does anyone have any advice or help on how to do this?

This also applies to Using a Custom Control Using Google Maps KeyDragZoom - How do I activate drag and drop scaling? , I decided to make the question more general.

+4
source share
4 answers

Try to directly select it by source:

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

+2
source

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

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

I managed to create custom zoom and zoom 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>
0
source

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

While external control is not officially supported, this hack works:

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

When pressed, the zoom mode is activated. When you press or draw a rectangle again, the zoom mode is automatically turned off.

0
source

Source: https://habr.com/ru/post/1369233/

More articles:


All Articles