Found this method of having DIV as custom google maps infoWindow. It works, but

Question

0

Asked: May 28, 20262026-05-28T16:06:29+00:00 2026-05-28T16:06:29+00:00

Found this method of having DIV as custom google maps infoWindow. It works, but

0

Found this method of having DIV as custom google maps infoWindow. It works, but it feels kinda hacky.. Is there an easier way?

a) Setting up the overlay

MyOverlay.prototype = new google.maps.OverlayView();
MyOverlay.prototype.draw = function() {}
overlay = new MyOverlay(this.map);

function MyOverlay(map) { this.setMap(map); }

b) Click listener on each marker

    google.maps.event.addListener(markers[i], 'click', function() {
        displayInfo(this);
    });

c) display infoWindow function

function displayInfo(marker) {

 var e = $('#infobox');

overlay.getPanes().floatPane.appendChild(e);

//important! Removes already active listeners.
if(displayInfoProcess) {google.maps.event.removeListener(displayInfoProcess);}

displayInfoProcess = google.maps.event.addListener(map, 'bounds_changed', function() {

    show('#infobox');

    var markerOffset = overlay.getProjection().fromLatLngToDivPixel(marker.position);

    e.style.top = markerOffset.y - 115 + 'px';
    e.style.left = markerOffset.x - 57 + 'px';

    e.innerHTML = marker.store + '<br><em>' +marker.distance;

});
map.panTo(marker.position);
}