InfoWindowListeners
HTML
<script src="http://maps.google.com/maps/api/js?sensor=false&.js"></script>
<div id="map"></div>
CSS
#map{
width: 450px;
height: 400px;
}
JavaScript
var markerArray = [],
map, overlay;
//infobox code----------
function InfoBox(map) {
google.maps.OverlayView.call(this);
this.setMap(map);
}
InfoBox.prototype = new google.maps.OverlayView();
InfoBox.prototype.createElement = function() {
var panes = this.getPanes();
var div = this.div_;
if (!div) {
div = this.div_ = document.createElement("div");
div.style.position = "absolute";
div.setAttribute('id', "infobox");
div.style.backgroundColor = 'white';
div.style.border = '1px solid black';
this.div_ = div;
panes.floatPane.appendChild(div);
}
}
InfoBox.prototype.setMarker = function(marker) {
this.marker_ = marker;
}
InfoBox.prototype.draw = function() {
this.createElement();
}
InfoBox.prototype.hide = function() {
if (this.div_) {
this.div_.style.visibility = "hidden";
}
}
InfoBox.prototype.show = function() {
if (this.div_) {
var markerOffset = this.getProjection().fromLatLngToDivPixel(this.marker_.position);
this.div_.style.top = markerOffset.y + 20 + 'px';
this.div_.style.left = markerOffset.x - 40 + 'px';
this.div_.innerHTML = 'latlng: <b>' + this.marker_.position + '</b>';
this.div_.style.visibility = "visible";
}
}
//infobox code end-----------
function initialize() {
var centerPosition = new google.maps.LatLng(38.713107, -90.42984);
var options = {
zoom: 5,
center: centerPosition,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map($('#map')[0], options);
overlay = new InfoBox(map);
var positions = [
new google.maps.LatLng(39.939225, -93.850708),
new google.maps.LatLng(37.474858, -83.188477),
new google.maps.LatLng(36.844461, -92.06543)
];
for (i = 0; i < positions.length; i++) {
CreateMarker(positions[i], i + 1);
}
//map dragstart event.
google.maps.event.addListener(map,...