Zoom repeats google maps several times

1

I have infowindow on my map. Every time I give a dragstart I close this infowindow . My problem is that I give infowindow.open(map, marker); , to open infowindow . Every time I do this, it adds another infowindow to the DOM. So when I make the map.setZoom(map.getZoom() + 1); request, it adds several zooms, according to the times I've called infowindow .

Follow the code:

HTML

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyA-OlPHUh2W7LUZXVjQjjxQ8fdCWdJISmc"></script>

CSS

#map{width:500px;height:500px;float:left;}

JAVASCRIPT

varmap;varuluru={lat:-17,lng:-47};varinfowindow=null;functioninitialize(){varmap=newgoogle.maps.Map(document.getElementById('map'),{zoom:10,center:uluru,mapTypeId:google.maps.MapTypeId.SATELLITE});varinfowindow=newgoogle.maps.InfoWindow({content:'<p><ahref="#" id="zoom_mais"><b>+++++</b> </a> | <a href="#" id="zoom_menos"><b>-------</b></a></p>'
        });

    var marker = new google.maps.Marker({
                    position: uluru,
                    draggable: true,
                    map: map,
        });

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

        google.maps.event.addListener(marker, 'dragstart', function() {
                    if (infowindow) {
                        infowindow.close();
                        //infoWindow = null;
                    }
                    infowindow;
                    console.log('dragstart')
        });


    google.maps.event.addListener(marker, 'dragend', function () {
                    map.setCenter(this.getPosition()); // Set map center to marker position
          infowindow.open(map, marker);

        }); 

    //ZOOM
                google.maps.event.addListener(infowindow, 'domready', function() {
                    document.getElementById('zoom_mais').addEventListener('click', function(e) {
                        map.setZoom(map.getZoom() + 1);
                        console.log(map.getZoom());
                    });
                    document.getElementById('zoom_menos').addEventListener('click', function(e) {
                        map.setZoom(map.getZoom() - 1);
                        console.log(map.getZoom());         
                    });
                });

}

initialize();

This running example here .

Just move the Marker a 4 times and click the zoom. You will see that it has zoomed 4 times.

    
asked by anonymous 15.04.2016 / 19:08

1 answer

0

I was able to solve the problem by removing this option:

google.maps.event.addListener(infowindow, 'domready', function() {});

In reality, I adapted it to my situation, because every time I called it with one event, another was added.

    
22.04.2016 / 12:16