Styxin
Styxin

Reputation: 115

Google maps api with infowindow not working

I'm trying to create a map with info windows that open with the user clicks on a marker. So far the code doesn't seem to be working, the map was displaying before but once I put in the code for the info window pop-ups not only did the info window not show but the map also stopped showing on my webpage. Here's the code:

<div id= "map"> </div>


        <script>
        var map;

            var markers=[];

        function initMap(){

            map= new google.maps.Map(document.getElementById('map'),{

                center:{ lat:40.7413549, lng:-73.9980244},
                zoom:13
            });


        var locations=[


            {title:"Park Ave Penthouse",location:{lat:40.7713024,lng:-73.9632393}},
            {title:"Chelsea Loft", location;{lat:40.7444883,lng:-73.9949465}},
            {title:"Union Square Open Floor Plan",location:{lat:40.7347062,lng:-73.984377}},
            {title:"East Village Hip Studio",location:{lat:40.7281777,lng:-73.984377}},
            {title:"TriBeCa Artsy Bachelor Pad",location:{lat:40.7195264,lng:-74.0089934}},    
            {title:"Chinatown Homey Space",location:{lat:40.7180628,lng:-73.9961237}}

        ];
            var largeInfowindow= new google.maps.InfoWindow();
            var bounds= new google.maps.LatLngBounds();


            for (var i=0; i< locations.lenght;i++){

                var position = locations[i].location;
                var title = locations[i].title;

                var marker= new google.maps.Marker({

                    map: map,
                    position:position,
                    title:title,
                    animation:google.maps.Animation.Drop,
                    id:i

                  });

                    markers.push(marker);
                    bounds.extend(marker.position);
                    marker.addListner ("click",function(){

                    populateInfoWindow(this,largeInfowindow);




            });

             map.fitBounds(bounds);






                };

                markers.push(marker);

                markers.addListner("click",function(){

                    populateInfoWindow(this,largeInfoWindow);
                });


                }



            function populateInfoWindow (marker, infowindow){


                if(infowindow.marker=!marker){

                    infowindow.marker= marker;
                    infowindow.setContent("<div>"+marker.title+"</div>");

                    infowindow.open(map,marker);

                    infowindow.addListner("closeclick",function(){


                        infowindow.setMarker(null);
                    });






                }

            }


 <script async defer
               src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAvrWT4KKcsDSSGYXpxRry3m7j90pPjZgA&v=3&callback=initMap"></script>

Upvotes: 0

Views: 460

Answers (1)

Ninad Ramade
Ninad Ramade

Reputation: 266

The error is in this line:

if(infowindow.marker=!marker){ //it is "!=" and not "=!"

Always check console for javascript errors. After infowindow code, you could not even see the mao which means you have javascript errors.

Upvotes: 1

Related Questions