All StyledMarkers on the map display the text of the last StyledMarker created

GoogleCodeExporter commented 9 years ago

<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript" 
src="http://maps.googleapis.com/maps/api/js?libraries=visualization&key=MY_KEY&s
ensor=false"></script>
<script src="StyledMarker.js" type="text/javascript"></script>

<script type="text/javascript">
var map;

var surveys = {
    "-45.9;169.4856518":[
        {"date":"02/12/2012","time":"12:06","type":"Mm2","url":"/mm2s/551"}],
    "-45.8600678;170.48565180000003":[
        {"date":"02/12/2012","time":"12:06","type":"Mm2","url":"/mm2s/547"},
        {"date":"15/01/2010","time":"19:04","type":"Mm2","url":"/mm2s/550"}],
    "-43.92955678827454;168.92090974006405":[
        {"date":"13/11/2012","time":"22:26","type":"Mm2","url":"/mm2s/542"},
        {"date":"28/05/2010","time":"02:53","type":"Mm2","url":"/mm2s/543"},
        {"date":"15/01/2010","time":"19:04","type":"Mm2","url":"/mm2s/544"}]
};

var markers = [];

function displaySurveys(surveys){

    for (loc in surveys) {
        var locArr = loc.split(";");
            lat = locArr[0],
            lng = locArr[1],
            nb_surveys = surveys[loc].length;

        markers.push(new StyledMarker({
                styleIcon:new StyledIcon(StyledIconTypes.BUBBLE,{color:"ff0000",text: nb_surveys}),
                position:new google.maps.LatLng(lat, lng)
             }));

    }
    showOverlays();
}

function initialize() {
    var center = new google.maps.LatLng(-41.343825,174.155273); 
    map = new google.maps.Map(document.getElementById('map_canvas'), {
        zoom: 5,
        center: center,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    });

    displaySurveys(surveys);
}

function clearOverlays() {
  if (markers) {
    for (i in markers) {
      markers[i].setMap(null);
    }
  }
}

// Shows any overlays currently in the array
function showOverlays() {
  if (markers) {
    for (i in markers) {
      markers[i].setMap(map);
    }
  }
}

// attach init handler
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map_canvas" style="width: 600px; height: 450px"></div>
</body>
</html>

What steps will reproduce the problem?
1. Just load the page

Expected result:
The 3 markers should display the numbers 1, 2 and 3 respectively

Actual result:
The 3 markers display number 3

Version:
 * @name StyledMarkerMaker
 * @version 0.5

Browser / Operating System:
Chrome 15 / Ubuntu 10.04

Other comments:
I might be doing something stupid :)

Original issue reported on code.google.com by manu.de...@gmail.com on 2 Dec 2012 at 4:31

GoogleCodeExporter commented 9 years ago

even simpler: 

<script type="text/javascript">
var map;

var markers = [
    {lat: -45.9, lng: 169.4856518},
    {lat: -45.8600678, lng: 170.48565180000003},
    {lat: -43.92955678827454, lng: 168.92090974006405}
];

function display(surveys){
    for (var i=0; i < markers.length; i++) {

        new StyledMarker({
                styleIcon:new StyledIcon(StyledIconTypes.BUBBLE,{text: i}),
                position:new google.maps.LatLng(markers[i].lat, markers[i].lng),
                map: map
        });

    }
}

function initialize() {
    var center = new google.maps.LatLng(-41.343825,174.155273); 
    map = new google.maps.Map(document.getElementById('map_canvas'), {
        zoom: 5,
        center: center,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    });

    display(markers);
}

// attach init handler
google.maps.event.addDomListener(window, 'load', initialize);
</script>

Original comment by manu.de...@gmail.com on 2 Dec 2012 at 10:53

GoogleCodeExporter commented 9 years ago

I have also recently seen this behavior & am at a loss to explain why.

Original comment by ericbeer...@gmail.com on 8 Jan 2013 at 6:53

GoogleCodeExporter commented 9 years ago

Same problem

Original comment by shanelh...@gmail.com on 19 Mar 2013 at 6:27

GoogleCodeExporter commented 9 years ago

I can't reproduce this issue in Chrome 28, Firefox 15.01, or Internet Explorer 
8 with the latest StyledMarker.js code, and your supplied code.  Marking as 
invalid.  If you are still able to reproduce this with latest StyledMarker 
code, please post an example and I will re-open this issue.

Original comment by brett.mc...@gmail.com on 15 Jul 2013 at 10:44

Changed state: Invalid

tyjoti89 / google-maps-utility-library-v3

All StyledMarkers on the map display the text of the last StyledMarker created #214