Using custom pin icon in Google maps only shows first location in loop

问题

I've tried a number of things to try resolve this but I can't seem to find a solution. The problem is that only the first location is added to my map and the other places are left out. When I remove the custom pin icon, all the locations are added correctly. The line that seems to affect this is:

icon: iconType[place.icon]

As I said when I remove this line everything works as expected. What am I doing wrong?

Code below

I have a number of places defined in an object like so:

var data = [
  {
    "name" : "Hotel A",
    "latlng" : new google.maps.LatLng(-33.636784,19.098212),
    "icon" : "venue",
    "desc" : "This is the venue",
  },
  ...
];

Icons are defined like this:

iconType = {
  'oneStar' : 'mapimages/lodging_1star.png',
  'twoStar' : 'mapimages/lodging_2star.png',
  ...
};

I place my locations on the map using a for loop, looping through the data variable like so:

var bounds = new google.maps.LatLngBounds();
var map;
var infowindow = new google.maps.InfoWindow({ maxWidth: 300 }); 
var marker;

function initialize() {
  // init map
  var venueLatlng = new google.maps.LatLng(-33.636784,19.098212);
  var mapOptions = {
    zoom: 12,
    center: venueLatlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  }
  map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);

  for (var i = 0; i < data.length; i++) { 
    createMarker(data[i]);
  }
  map.fitBounds(bounds);
}

function createMarker(place) {
    bounds.extend(place.latlng);
    marker = new google.maps.Marker({
      position: place.latlng,
      title: place.name,
      map: map,
      icon: iconType[place.icon]
    });
    google.maps.event.addListener(marker, 'click', function() {
      infowindow.setContent(place.desc);
      infowindow.open(map, marker);
    });
}

回答1:

This works for me (I don't have your icons, so I linked to public ones on Google's server):

    <script>
       var map;

var data = [
  {
    "name" : "Venue A",
    "latlng" : new google.maps.LatLng(-33.636784,19.098212),
    "icon" : "venue",
    "desc" : "This is the venue",
  },
  {
    "name" : "Hotel A",
    "latlng" : new google.maps.LatLng(-33.6,19.0),
    "icon" : "oneStar",
    "desc" : "one star",
  },
  {
    "name" : "Hotel B",
    "latlng" : new google.maps.LatLng(-33.4,19.0),
    "icon" : "twoStar",
    "desc" : "two star",
  }
];

iconType = {
  'oneStar' : 'http://maps.google.com/mapfiles/ms/icons/blue.png',
  'twoStar' : 'http://maps.google.com/mapfiles/ms/icons/red.png',
  'venue'   : 'http://maps.google.com/mapfiles/ms/icons/yellow.png'
};

var bounds = new google.maps.LatLngBounds();
var map;
var infowindow = new google.maps.InfoWindow({ maxWidth: 300 }); 
var marker;

function initialize() {
  // init map
  var venueLatlng = new google.maps.LatLng(-33.636784,19.098212);
  var mapOptions = {
    zoom: 12,
    center: venueLatlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  }
  map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);

  for (var i = 0; i < data.length; i++) { 
    createMarker(data[i]);
  }
  map.fitBounds(bounds);
}

function createMarker(place) {
    bounds.extend(place.latlng);
    var marker = new google.maps.Marker({
      position: place.latlng,
      title: place.name,
      map: map,
      icon: iconType[place.icon]
    });
    google.maps.event.addListener(marker, 'click', function() {
      infowindow.setContent('<b>'+place.name+'</b><br>'+place.desc);
      infowindow.open(map, marker);
    });
}

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

来源：https://stackoverflow.com/questions/14863825/using-custom-pin-icon-in-google-maps-only-shows-first-location-in-loop