CODEWITHSUNDEEP
javascriptgoogle-maps-api-3
Djam
Djam

Reputation: 1043

Google Maps V3 Custom Overlay children stopped receiving mouse events

Custom Overlay (google.maps.OverlayView()) children used to respond to mouse events. I noticed they stopped doing so.

Here is an example ("overlay, click me" div should change its text to "worked for overlay" when clicked, but never does so):

http://savedbythegoog.appspot.com/?id=3fe560b541afaf7994e73a328d110f19e3864a06

Here is the code (cut/paste to https://code.google.com/apis/ajax/playground/ for debugging), overlay child click listener is attached in USGSOverlay.prototype.onAdd()

div.addEventListener("click", function(){ this.innerHTML="worked for overlay";});

// overlay-problem.js

var overlay;
USGSOverlay.prototype = new google.maps.OverlayView();

// Initialize the map and the custom overlay.

function initialize() {

  var div = document.createElement('div');
  div.style.borderStyle = 'none';
  div.style.borderWidth = '0px';
  div.style.position = 'absolute';
  div.className="findme";
  div.style.width="150px";
  div.style.height="150px";
  div.style.backgroundColor="red";
  div.innerHTML="NOT overlay, click me";

  div.addEventListener("click", function(){this.innerHTML="Thanks, it worked for a regular div";});
  document.body.appendChild(div);

  var mapOptions = {
    zoom: 8,
    center: new google.maps.LatLng(62.323907, -150.109291),
    mapTypeId: google.maps.MapTypeId.SATELLITE
  };

  var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

  var swBound = new google.maps.LatLng(62.281819, -150.287132);
  var neBound = new google.maps.LatLng(62.400471, -150.005608);
  var bounds = new google.maps.LatLngBounds(swBound, neBound);

  overlay = new USGSOverlay(bounds, map);
}

/** @constructor */
function USGSOverlay(bounds, map) {

  // Initialize all properties.
  this.bounds_ = bounds;
  this.map_ = map;
  this.div_ = null;

  // Explicitly call setMap on this overlay.
  this.setMap(map);
}

/**
 * onAdd is called when the map's panes are ready and the overlay has been
 * added to the map.
 */
USGSOverlay.prototype.onAdd = function() {


  var div = document.createElement('div');
  div.style.borderStyle = 'none';
  div.style.borderWidth = '0px';
  div.style.position = 'absolute';
  div.className="findme";
  div.style.width="150px";
  div.style.height="50px";
  div.style.backgroundColor="yellow";
  div.innerHTML="overlay, click me";
  div.addEventListener("click", function(){ this.innerHTML="worked for overlay";});
  this.div_ = div;

  // Add the element to the "overlayLayer" pane.
  var panes = this.getPanes();
  panes.overlayLayer.appendChild(div);
};

USGSOverlay.prototype.draw = function() {

  // We use the south-west and north-east
  // coordinates of the overlay to peg it to the correct position and size.
  // To do this, we need to retrieve the projection from the overlay.
  var overlayProjection = this.getProjection();

  // Retrieve the south-west and north-east coordinates of this overlay
  // in LatLngs and convert them to pixel coordinates.
  // We'll use these coordinates to resize the div.
  var sw = overlayProjection.fromLatLngToDivPixel(this.bounds_.getSouthWest());
  var ne = overlayProjection.fromLatLngToDivPixel(this.bounds_.getNorthEast());

  var div = this.div_;
  div.style.left = sw.x + 'px';
  div.style.top = ne.y + 'px';
  div.style.width = (ne.x - sw.x) + 'px';
  div.style.height = (sw.y - ne.y) + 'px';
};

// The onRemove() method will be called automatically from the API if
// we ever set the overlay's map property to 'null'.
USGSOverlay.prototype.onRemove = function() {
  this.div_.parentNode.removeChild(this.div_);
  this.div_ = null;
};​

Upvotes: 0

Views: 1044

Answers (1)

Mauno Vähä
Mauno Vähä

Reputation: 9788

Your code should work if you change your overlay from:

panes.overlayLayer.appendChild(div);

to:

panes.overlayMouseTarget.appendChild(div);

From the docs:

overlayMouseTarget contains elements that receive DOM mouse events, such as the transparent targets for markers. It is above the floatShadow, so that markers in the shadow of the info window can be clickable.

Working js fiddle example (Updated to contain styles of your overlay).

Cheers.

Upvotes: 3

Related Questions