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.
On 30 Jul, 09:35, Villu <[email protected]> wrote:
> 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>
--
You received this message because you are subscribed to the Google Groups
"Google Maps JavaScript API v3" group.
To post to this group, send email to [email protected].
To unsubscribe from this group, send email to
[email protected].
For more options, visit this group at
http://groups.google.com/group/google-maps-js-api-v3?hl=en.
