Is my custom infoWindow unnecessarily complicated?

Question

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

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); }

Click listener on each marker 在每个标记上单击侦听器

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

display infoWindow function 显示infoWindow功能

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);
}

Answer 1

Seems "okay." Here is an example via the Google code site:

http://gmaps-samples-v3.googlecode.com/svn/trunk/infowindow_custom/infowindow-custom.html

Take a look at the source.