Using event listeners for Google Maps overlays instead of markers?

Below I have a snippet which generates a marker and a mapLabel (which extends the overlay class) on a google map.

I have tried to implement an event listener which deletes the overlay by right clicking, the same way I do with the marker, but it does not work!!!

I am not sure how to make it work, I have tried using "DomListener" and various iterations, but it doesn't even seem to hit that line of code when I debug.

How do I make it so that I can right click to delete my mapLabel object???

var map;


function initialize() {
  map = new google.maps.Map(
    document.getElementById("map_canvas"), {
      center: new google.maps.LatLng(37.4419, -122.1419),
      zoom: 13
    });
  addPlace();
  placeLabel();
}

function addPlace() {
  var marker = new google.maps.Marker({
    map: map,
    position: new google.maps.LatLng(37.4419, -122.1419)
  });
  google.maps.event.addListener(marker, 'rightclick', function() {
    this.setMap(null);
  });
}

function placeLabel() {
  var mapLabel = new MapLabel({
    text: 'Right click to delete??',
    position: new google.maps.LatLng(37.4419, -122.1419),
    map: map,
    fontSize: 21,
    align: 'center'
  });
  google.maps.event.addListener(mapLabel, 'rightclick', function() {
    this.setMap(null);
  });
}
google.maps.event.addDomListener(window, "load", initialize);
html,
body,
#map_canvas {
  height: 250px;
  width: 500px;
  margin: 0px;
  padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<script src="https://googlemaps.github.io/js-map-label/src/maplabel-compiled.js"></script>
<div id="map_canvas" style="border: 2px solid #3872ac;"></div>

Answers


MapLabel doesn't have event listeners, but MarkerWithLabel does. The way it's done there is they have a almost-transparent div laying over the label. Any listeners are added to this div.

Something similar can be done with the MapLabel. Have a look at the source code of MarkerWithLabel here: http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerwithlabel/src/markerwithlabel.js

Here are a few code snippets from my own MapLabel alternative. It's not complete and untested, but it should get you started.

MapLabel.prototype.onAdd = function() {
  var eventDiv = this.eventDiv_ = document.createElement('div');

  // ...

  this.drawCanvas_();

  this.drawEventDiv_();

  var panes = this.getPanes();
  if (panes) {
    panes.overlayMouseTarget.appendChild(eventDiv);

    panes.overlayImage.appendChild(canvas);
  }

  // ...

};

Add the div to overlayMouseTarget, the uppermost layer.

MapLabel.prototype.drawEventDiv_ = function() {
  var eventDiv = this.eventDiv_;
  if (!eventDiv) return;

  var canvasWidth = this.canvas_.getContext('2d').measureText(this.get('text')).width;
  var canvasHeight = this.get('fontSize');

  eventDiv.innerHTML = this.get('text');
  // This is needed for proper behavior on MSIE:
  eventDiv.setAttribute("onselectstart", "return false;");
  eventDiv.setAttribute("ondragstart", "return false;");

  var eventDivStyle = this.eventDiv_.style;
  eventDivStyle.width = canvasWidth + 'px';
  eventDivStyle.height = canvasHeight + 'px';
  eventDivStyle.cssText = this.get('text');
  eventDivStyle.font = this.get('fontSize') + 'px ' + this.get('fontFamily');
  eventDivStyle.position = 'absolute';
  eventDivStyle.opacity = 0.01; // Don't use 0; DIV won't be clickable on MSIE
  eventDivStyle.MsFilter = "\"progid:DXImageTransform.Microsoft.Alpha(opacity=1)\"";
  eventDivStyle.filter = "alpha(opacity=1)"; // For MSIE
  eventDivStyle.marginLeft = this.getMarginLeft_(canvasWidth) + 'px';
  eventDivStyle.zIndex = /** @type number */(this.get('zIndex'));
};

To add an event listener do this:

google.maps.event.addDomListener(this.eventDiv_, 'click', function (e) {
  //..

  this_.cAbortEvent(e); // Prevent click from being passed on to map
});

cAbortEvent prevents bubbling.

MapLabel.prototype.cAbortEvent = function(e) {
    if (e.preventDefault) {
      e.preventDefault();
    }
    e.cancelBubble = true;
    if (e.stopPropagation) {
      e.stopPropagation();
    }
};

Try using 'mousedown' instead of 'rightclick', then distinguish which type of click it was.

 google.maps.event.addListener(mapLabel, 'mousedown', function(e) {
    if(e.which === 3)
    {
       this.setMap(null);
    }
  });

Mouse Click Codes MSDN API: 0: No button 1: Left button 2: Middle button (if present) 3: Right button


Need Your Help

Having trouble with clojure macro

macros clojure

I'm trying to write a macro that I can use to call a function on a new thread and print the name of the function as well as the name of the thread after running it.