Tenho um infowindow
em meu mapa. Todas as vezes que dou um dragstart
eu fecho este infowindow
. Meu problema, é que dou um infowindow.open(map, marker);
, para abrir o infowindow
.
Todas as vezes que faço isso, ele adiciona outro infowindow
na DOM. Assim, quando faço o pedido map.setZoom(map.getZoom() + 1);
, ele adiciona varios zoom, de acordo com as vezes que chamei o infowindow
.
Segue o código:
HTML
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyA-OlPHUh2W7LUZXVjQjjxQ8fdCWdJISmc"></script>
CSS
#map{width:500px; height:500px; float:left;}
JAVASCRIPT
var map;
var uluru = {lat:-17,lng: -47};
var infowindow = null;
function initialize(){
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 10,
center: uluru,
mapTypeId: google.maps.MapTypeId.SATELLITE
});
var infowindow = new google.maps.InfoWindow({
content: '<p><a href="#" 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();
Este exemplo em execução aqui.
Basta mover o Marker
uma 4 vezes e clicar no zoom. Vocês verão que ele aumentara 4 vezes o zoom.