Google maps multiple markers using do not work! Without loops OK

Question

I have the following function to display two markers on the maps. you can check it online - 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>

But without using loops, markers shows correctly. Here is code without loops;

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
            });

New Problem

Sir, this is my new problem when I am going to store markers in an array so that later I can easily access a particular marker. But when I modify the code, it does not work. Here is my array to store markers;

                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

You use wrong array for place (you use places instead of place)

           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]
                });
        }