CODEWITHSUNDEEP
javascriptgoogle-maps-api-3
volt
volt

Reputation: 23

How to add events to overlay tiles in the Google Maps Javascript API

I want to implement a grid overlay to the map, where all tiles should be individually clickable and thus distinguishable from each other, to get the clicked tile boundaries at the end.

I really don't know why the event div.onclick = function(){console.log(coord);}; is not fired.

function CoordMapType(tileSize){
    this.tileSize = tileSize;
}
CoordMapType.prototype.getTile = function(coord, zoom, ownerDocument){
    var div = ownerDocument.createElement('div');
    div.innerHTML = coord;
    div.style.width = this.tileSize.width + 'px';
    div.style.height = this.tileSize.height + 'px';
    div.style.borderStyle = 'solid';
    div.style.borderWidth = '1px';
    div.style.borderColor = '#AAAAAA';
    div.onclick = function(){
        console.log(coord);
    };
    return div;
};

This method is called during map initialization

var map;

function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
    center: {lat:0.0,lng:0.0},
    zoom: 2
});

map.overlayMapTypes.insertAt(0, new CoordMapType(new google.maps.Size(128,128)));

The tiles are correctly displayed, but the event is not triggered.

Upvotes: 1

Views: 384

Answers (1)

geocodezip
geocodezip

Reputation: 161334

The map tiles aren't clickable, the layers over them absorb the click events. See the description of MapPanes which indicates which panes receive DOM events.

Upvotes: 1

Related Questions