Multiple markers, eventlistener AND custom windows. Eventlistener problems

[Villu]

Hi guys,

I've been messin around with it for couple of days and i really dont
understand what is wrong :( Im not very good with javascript :(

The problem:

I have multiple markers (read in from an array), they are put on the
map as expected, but when i click a marker, always the last marker
will open, not the one i click...

here's the code:

<script type="text/javascript">

var park = [
['Rotermanni parkla', 59.439356,24.758329, 1, "<img class='right'
src='images/ravala-parkimismaja.jpg' alt='Rävala parkimisvaja' /
><p>Rävala pst 3<br />Sissepääs: Postimaja vastas.<br />Kohti: 200,
hetkel vaba 65</p><h4>Hinnad</h4><table><tr><td>Parkimistasu </
td><td>30 kr/h</td></tr><tr><td>Iga alustatud 20 minutit</td><td>10
kr</td></tr><tr><td>Parkimismaja kuukaart</td><td>2500 kr</tr></tr></
tr></table><p>Kaubamaja sama päeva ostutšekiesitamisel
<strong>soodustus 20%</strong></p><p><a class='link' href='#'>Vaata
lähemalt</a><a class='link' href='#'>Osta parkimisluba</a></p>"],
['Rävala parkimismaja', 59.433484, 24.756681, 2, "<img class='right'
src='images/ravala-parkimismaja.jpg' alt='Rävala parkimisvaja' /
><p>Rävala pst 3<br />Sissepääs: Postimaja vastas.<br />Kohti: 200,
hetkel vaba 65</p><h4>Hinnad</h4><table><tr><td>Parkimistasu </
td><td>30 kr/h</td></tr><tr><td>Iga alustatud 20 minutit</td><td>10
kr</td></tr><tr><td>Parkimismaja kuukaart</td><td>2500 kr</tr></tr></
tr></table><p>Kaubamaja sama päeva ostutšekiesitamisel
<strong>soodustus 20%</strong></p><p><a class='link' href='#'>Vaata
lähemalt</a><a class='link' href='#'>Osta parkimisluba</a></p>"],
['Rävala kärkimismaja', 59.440484, 24.755681, 3, "<img class='right'
src='images/ravala-parkimismaja.jpg' alt='Rävala parkimisvaja' /
><p>Rävala pst 3<br />Sissepääs: Postimaja vastas.<br />Kohti: 200,
hetkel vaba 65</p><h4>Hinnad</h4><table><tr><td>Parkimistasu </
td><td>30 kr/h</td></tr><tr><td>Iga alustatud 20 minutit</td><td>10
kr</td></tr><tr><td>Parkimismaja kuukaart</td><td>2500 kr</tr></tr></
tr></table><p>Kaubamaja sama päeva ostutšekiesitamisel
<strong>soodustus 20%</strong></p><p><a class='link' href='#'>Vaata
lähemalt</a><a class='link' href='#'>Osta parkimisluba</a></p>"]
];

function InfoBox(opts) {

google.maps.OverlayView.call(this);

this.latlng_ = opts.latlng;
this.map_ = opts.map;
this.title_ = opts.title;
this.content_ = opts.content;
this.offsetVertical_ = -195;
this.offsetHorizontal_ = 0;
this.height_ = 350;
this.width_ = 336;

var me = this;
this.boundsChangedListener_ =
google.maps.event.addListener(this.map_, "bounds_changed",
function() {
return me.panMap.apply(me);
});

this.setMap(this.map_);
}

InfoBox.prototype = new google.maps.OverlayView();

InfoBox.prototype.remove = function() {
if (this.div_) {
this.div_.parentNode.removeChild(this.div_);
this.div_ = null;
}
};

InfoBox.prototype.draw = function() {
this.createElement();
if (!this.div_) return;

var pixPosition =
this.getProjection().fromLatLngToDivPixel(this.latlng_);
if (!pixPosition) return;

this.div_.style.width = this.width_ + "px";
this.div_.style.left = (pixPosition.x + this.offsetHorizontal_ +
30 ) + "px";
this.div_.style.height = this.height_ + "px";
this.div_.style.top = (pixPosition.y + this.offsetVertical_) + "px";
this.div_.style.display = 'block';
};

InfoBox.prototype.createElement = function() {
var panes = this.getPanes();
var div = this.div_;
if (!div) {

div = this.div_ = document.createElement("div");
div.className = "gmap_window";
var headerDiv = document.createElement("div");
headerDiv.className = 'header';
headerDiv.innerHTML = '<h3>' + this.title_ + '</h3>';
var beakDiv = document.createElement("div");
beakDiv.className = 'beak';
beakDiv.style.top = this.width_ / 2 + "px";
var contentDiv = document.createElement("div");
contentDiv.className = 'content';

contentDiv.innerHTML = this.content_;

var footerDiv = document.createElement("div");
footerDiv.className = 'footer';
var closeBox = document.createElement("div");
closeBox.className = 'close';

function removeInfoBox(ib) {
return function() {
ib.setMap(null);
};
}

google.maps.event.addDomListener(closeBox, 'click',
removeInfoBox(this));

div.appendChild(headerDiv);
headerDiv.appendChild(closeBox);
div.appendChild(contentDiv);
contentDiv.appendChild(beakDiv);
div.appendChild(footerDiv);
div.style.width = this.width_ + "px";
div.style.height = this.height_ + "px";
div.style.display = 'none';
panes.floatPane.appendChild(div);
this.panMap();

} else if (div.parentNode != panes.floatPane) {

div.parentNode.removeChild(div);
panes.floatPane.appendChild(div);
} else {

}
}

InfoBox.prototype.panMap = function() {

var map = this.map_;
var bounds = map.getBounds();
if (!bounds) return;

var position = this.latlng_;

var iwWidth = this.width_;
var iwHeight = this.height_;

var iwOffsetX = this.offsetHorizontal_;
var iwOffsetY = this.offsetVertical_;

var padX = 40;
var padY = 40;

var mapDiv = map.getDiv();
var mapWidth = mapDiv.offsetWidth;
var mapHeight = mapDiv.offsetHeight;
var boundsSpan = bounds.toSpan();
var longSpan = boundsSpan.lng();
var latSpan = boundsSpan.lat();
var degPixelX = longSpan / mapWidth;
var degPixelY = latSpan / mapHeight;

var mapWestLng = bounds.getSouthWest().lng();
var mapEastLng = bounds.getNorthEast().lng();
var mapNorthLat = bounds.getNorthEast().lat();
var mapSouthLat = bounds.getSouthWest().lat();

var iwWestLng = position.lng() + (iwOffsetX - padX) * degPixelX;
var iwEastLng = position.lng() + (iwOffsetX + iwWidth + padX) *
degPixelX;
var iwNorthLat = position.lat() - (iwOffsetY - padY) * degPixelY;
var iwSouthLat = position.lat() - (iwOffsetY + iwHeight + padY) *
degPixelY;

var shiftLng =
(iwWestLng < mapWestLng ? mapWestLng - iwWestLng : 0) +
(iwEastLng > mapEastLng ? mapEastLng - iwEastLng : 0);
var shiftLat =
(iwNorthLat > mapNorthLat ? mapNorthLat - iwNorthLat : 0) +
(iwSouthLat < mapSouthLat ? mapSouthLat - iwSouthLat : 0);

var center = map.getCenter();

var centerX = center.lng() - shiftLng;
var centerY = center.lat() - shiftLat;

map.setCenter(new google.maps.LatLng(centerY, centerX));

google.maps.event.removeListener(this.boundsChangedListener_);
this.boundsChangedListener_ = null;
};

function setMarkers(map, locations) {

var image = new google.maps.MarkerImage('img/gmap-gicon.png',
new google.maps.Size(35, 30),
new google.maps.Point(0,0),
new google.maps.Point(0, 32));
var shadow = new google.maps.MarkerImage('img/gmap-gicon-shadow.png',

new google.maps.Size(37, 32),
new google.maps.Point(0,0),
new google.maps.Point(0, 32));

var shape = {
coord: [0,0,0,35,35,35,0,35,35,35,35,0,35,0,0,0],
type: 'poly'
};

for (var i = 0; i < locations.length; i++) {
var park = locations[i];
var myLatLng = new google.maps.LatLng(park[1], park[2]);
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
shadow: shadow,
icon: image,
shape: shape,
title: park[0],
zIndex: park[3],
content: park[4]
});

google.maps.event.addListener(marker, "click", function(e) {
var infoBox = new InfoBox({latlng: marker.getPosition(), map: map,
title: marker.title, content: marker.content});
});
}
}

function initialize() {
var myOptions = {
zoom: 14,
center: new google.maps.LatLng(park[0][1], park[0][2]),
mapTypeId: google.maps.MapTypeId.ROADMAP,
sensor: 'true'
}
var map = new google.maps.Map(document.getElementById("gmap-
full"), myOptions);
setMarkers(map, park);
}

</script>

[Rossko]

> I have multiple markers (read in from an array), they are put on the
> map as expected, but when i click a marker, always the last marker
> will open, not the one i click...

See this post
http://groups.google.com/group/google-maps-js-api-v3/browse_thread/thread/f40390e4a6ba89e9/25a246d92f93e9ea

> here's the code:

No thanks; if you need more help please give a link to your map, so
that people can run debuggers on it.

[Nicklas]

I had the same problem yesterday and found out that if I just moved
the "addListener" part of the code to its own function it will work.
In other words, instead of:

google.maps.event.addListener(marker, "click", function(e) {
var infoBox = new InfoBox({latlng:
marker.getPosition(), map: map,
title: marker.title, content: marker.content});
});

do:

function attachToMark(marker,content) {

google.maps.event.addListener(marker, "click", function(e) {
var infoBox = new InfoBox({latlng:
marker.getPosition(), map: map,
title: marker.title, content: marker.content});
});

}

and call that function inside your for-loop.