Google отображает использование нескольких маркеров, не работает! Без петель OK

Question

У меня есть следующая функция для отображения двух маркеров на картах. вы можете проверить его онлайн - http://raveen.comlu.com/300.html;

 <script src="http://maps.googleapis.com/maps/api/js"> 
    </script> 

    <script> 
     function initialize(){ 
      var latlng = new google.maps.LatLng(6.242635,80.051840); //latitude and longitude respectively 
      //xxxvar image = 'office2.ico'; 
      //xxxvar image2 = 'children.ico'; 
      var contentString = '<h1> Volunteer House </h1>'+ 
       '<p>Many people also refer to this home as <b>VH</b>. This is a must see place in the city.'+ 
        '<br><br>Direction - Pass the <i>Ambalangoda </i> and the <i>Kanda Road</i>. '+ 
        'nd walk just 25m.</p>'+ 
        '<br>Address - Ambalangoda, Sri Lanka'+ 
        '<br>Website: Volunteer House, <a href="http://raveen.comlu.com" target="_blank">'+ 
        'http://raveen.comlu.com</a>'; 

      var infowindow = new google.maps.InfoWindow({ 
       content: contentString 
      });    

      var mapProp = { 
       center:latlng, 
       zoom:15, //4 - displays in world map zoom 
       mapTypeId:google.maps.MapTypeId.ROADMAP 
      }; 
      var map = new google.maps.Map(document.getElementById("googleMap"), mapProp); 


      //------------------------------ code for multiple markers using loops 
      var places = [ 
       ['Ambalangoda Children Park', 6.241713, 80.052307, 2], //2 is the zIndex - order in which these markers should display on top of each other 
       ['My Home', 6.242693, 80.051855, 1] 
      ]; 

      var images = ['office2.ico', 'children.ico']; 

      for(var i=0; i<places.length; i++){ 
        var place = places[i]; 
        var myMarker = new google.maps.Marker({ 
          position: {lat: places[1], lng:places[2]}, 
          map: map, 
          icon: images[i], 
          title: place[0], 
          zIndex: place[3] 
        }); 
      } 

      //--------------------------------------------------------------------- 


      myMarker.addListener('click', function(){ 
       infowindow.open(map, myMarker); 
      }) 
     } 

     google.maps.event.addDomListener(window, 'load', initialize) 

    </script> 

Но без использования петель, маркеры отображаются правильно. Вот код без циклов;

var myMarker = new google.maps.Marker({ 
       position: {lat: 6.242693, lng: 80.051855}, 
       //position: latlng, 
       map: map, 
       title: "My Home", 
       icon: image //instead of default Google Maps pushpin icon 
      }); 

      var myMarker2 = new google.maps.Marker({ 
       position: {lat: 6.241713, lng: 80.052307}, 
       //position: latlng, 
       map: map, 
       title: "Ambalangoda Children Park", 
       icon: image2 //instead of default Google Maps pushpin icon 
      }); 

Новой проблема

Сэр, это моя новая проблема, когда я буду хранить маркеры в массиве, так что позже я могу легко получить доступ к определенному маркеру. Но когда я изменяю код, он не работает. Вот мой массив для хранения маркеров;

   var myMarker = new Array(); //store marker in array 

      for(var i=0; i<places.length; i++){ 
        var place = places[i]; 
        var myMarker[i] = new google.maps.Marker({ 
          position: {lat: place[1], lng:place[2]}, 
          map: map, 
          title: place[0], 
          icon: images[i],         
          zIndex: place[3] 
        }); 

        /*if(i == 1){ 
          myMarker[1].setAnimation(google.maps.Animation.BOUNCE); 

          myMarker[1].addListener('click', function(){ 
           infowindow.open(map, myMarker[1]); 
          }) 
        }*/ 
      } 

Answer 1

Вы используете неправильный массив для места (использовать места вместо места)

  for(var i=0; i<places.length; i++){ 
       var place = places[i]; 
       var myMarker = new google.maps.Marker({ 
         position: {lat: place[1], lng:place[2]}, 
         map: map, 
         icon: images[i], 
         title: place[0], 
         zIndex: place[3] 
       }); 
     }