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

Related searches

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.

Try directly selecting it by source:

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

Controls | Maps JavaScript API, This constructor takes the control DIV as an argument. * @constructor */ function CenterControl(controlDiv: Element, map: google.maps.Map) { // Set CSS for the� let map: google.maps.Map; const chicago = { lat: 41.85, lng: -87.65 }; /** * The CenterControl adds a control to the map that recenters the map on * Chicago. * This constructor takes the control DIV as an argument.

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'));
}

Custom Controls | Maps JavaScript API, function CenterControl(controlDiv: Element, map: google.maps.Map) { // Set CSS for the control border. const controlUI = document.createElement("div"); View example.. Below is a list of the full set of controls you can use in your maps: The Zoom control displays "+" and "-" buttons for changing the zoom level of the map.

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>

Custom Controls, Adding and removing controls Users can zoom in/out, drag the map, change the user interface, is one of the important parts of the Google Maps JavaScript API. create a mapping application that a user can interact with outside the map. map.html ) that was introduced in the Creating a simple map in a custom DIV� Creating a custom control. And finally, we end this article with an example of building custom controls for your Google Maps. As noted earlier, we are building a custom button that adds a marker to the center of the map. While the code for this looks a little complicated, it is straightforward.

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.

Changing map properties programmatically - Google Maps , Pure CSS3 popups and controls for easy restyling � Image- and HTML-based markers � A simple interface for custom map layers and controls� Default Controls; Disabling the Default UI; Replacing Default Controls; Adding Controls to the Map; Control Options; Control Positioning; Custom Controls

Leaflet, Controls are user interface (UI) elements provided for users to interact with your map. The NAVER Maps API v3 provides the following controls by default. Zoom control: Slider or +/- buttons that adjust the zoom level of the map. This control is disabled by default.

Replacing Default Controls; Adding Controls to the Map; Control Options; Control Positioning; Custom Controls; Adding State to Controls; Cooperative Gesture Handling; Restricting Map Bounds; Resizable Split Map Panes; Inset Overview Map

Replacing Default Controls; Adding Controls to the Map; Control Options; Control Positioning; Custom Controls; Adding State to Controls; Cooperative Gesture Handling; Restricting Map Bounds; Resizable Split Map Panes; Inset Overview Map; Delay Loading Dynamic Map

Comments
  • Can you show the code you already have? What does the custom control do?
  • Here is an example of the same usuage I am using. You will see a small control below the zoom controls. I want to do the same behavior as clicking on that from html outside the map. google-maps-utility-library-v3.googlecode.com/svn/tags/…
  • I think this generalization is not good, because it has only the dirty solution presented... it is better to solve it based on the operation you actually need to do, as in your example with keydragzoom. And there is certainly some functionality missing..
  • This ended up working exactly as needed, I was hoping there would be a method for doing this directly with the control, but this will work.
  • $('img[src="maps.gstatic.com/mapfiles/ftr/controls/…;
  • Looking for the method in their docs now. google-maps-utility-library-v3.googlecode.com/svn/tags/…
  • Have not been able to find the method needed.
  • What are you hoping to find a method to do?
  • To be able to trigger the custom control from outside the map.
  • What do you mean by "trigger"?