CODEWITHSUNDEEP
google-maps-api-3
Blaze
Blaze

Reputation: 109

Mouse events propagation from marker to underlying map

I have one question, why dose mouse events related to a map never fire when we are over marker

exp. having a mouse move listener added to a map is never called when we move over a marker (there is not so called event propagation or bubbling).

This was actully working on maps v2!

Is it a bug, or its changed to this behavior in v3?

Blaze

Here is the example...

If you move around the map, the mapLabel is updated as should be but if u move over the marker the mapLabel is never updated

var map;
  function initialize() {
    var myLatlng = new google.maps.LatLng(-25.363882,131.044922);
    var myOptions = {
    zoom: 4,
    center: myLatlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  }
  map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

  google.maps.event.addListener(map, 'MOUSEMOVE', function() {
    document.getElementByID('moveLabel').innerHtml = 'Mouse map move' + Math.random();
  });

  var marker = new google.maps.Marker({
      position: myLatlng,
      map: map,
      title:"Hello World!"
  });
google.maps.event.addListener(marker, 'MOUSEOUT', function() {
    document.getElementByID('markerLabel').innerHtml = '';
  });
  google.maps.event.addListener(marker, 'MOUSEOVER', function() {
    document.getElementByID('markerLabel').innerHtml = 'Mouse over marker';
  });
}

Upvotes: 2

Views: 1169

Answers (1)

Engineer
Engineer

Reputation: 48793

All google maps' data that is drawn placed on 7 layers. These layers are called Panes. According to what pane the drawing belongs , it can receive or not receive events. For more information look at the google.maps.MapPanes documentation.

UPDATE: Google maps draws all data on 7 panes. All panes are children of the same parent. For event bubbling it is neccessary that the relation of elements should be parent-child ( then child can bubble the event to parent ),but not sibling-sibling. In sibling-sibling relation, event is received by element with the highest z-index. This is the reason you don't get events bubbled from marker's pane to map's pane.

Upvotes: 1

Related Questions