2015-12-10 8 views
0

У меня есть автоматическое открытие infoWindow.Google Maps 2 InfoWindows Auto-Opening infoWindow, 1 infoWindow после нажатия

Я желаю, чтобы только два были открыты автоматически, в то время как никто этого не делал. Эффект Как и на фотографиях. Мой код:

<script> 
function initialize() { 
    var openedInfoWindow = []; 
    var locations = [ 
     ['Oddział', 52.846190, 17.723237, 3], 
     ['Oddział', 52.812224, 17.201023, 2], 
     ['Zakład Poligraficzny - Siedziba', 52.847942, 17.757889, 1]  
    ]; 
    var cityCircle; 
    var map = new google.maps.Map(document.getElementById('map-canvas'), { 
     mapTypeId: google.maps.MapTypeId.ROADMAP, 
     zoomControl: true, 
      zoomControlOptions: { 
      style: google.maps.ZoomControlStyle.SMALL 
      } 

    }); 

    var bounds = new google.maps.LatLngBounds(); 

    for (i = 0; i < locations.length; i++) { 
     var marker = new google.maps.Marker({ 
      position: new google.maps.LatLng(locations[i][1], locations[i][2], locations[i][3]), 
      map: map, 
      content: locations[i][0] 
     }); 

     bounds.extend(marker.position); 

     var infowindow = new google.maps.InfoWindow();     

     google.maps.event.addListener(marker, 'click', (function(marker, i, infowindow) { 
      return function() { 

       if(openedInfoWindow[i] != null){        
        openedInfoWindow[i].close(); 
        openedInfoWindow[i] = null; 
       }else{     
        infowindow.setContent(this.content); 
        infowindow.open(map, this); 
        openedInfoWindow[i] = infowindow; 
        google.maps.event.addListener(infowindow, 'closeclick', function() { 
         openedInfoWindow[i] = null;       
        }); 
       } 
      }    
     })(marker, i, infowindow));   

     google.maps.event.trigger(marker, 'click'); 
    } 

    map.fitBounds(bounds); 

    var listener = google.maps.event.addListener(map, "idle", function() { 
     map.setZoom(9); 
     google.maps.event.removeListener(listener); 
    }); 
} 
function loadScript() { 
    var script = document.createElement('script'); 
    script.src = 'https://maps.googleapis.com/maps/api/js?key=AIzaSyADTnbl7e9y2o13cXkUFO8RZpXFJI-yzp4&' + 'callback=initialize'; 
    document.body.appendChild(script); 
} 

window.onload = loadScript; 
</script>` 

Picture 1 = so now

Picture 2 = so it has to be

ответ

0

Я хотел бы предложить вам обобщить его, добавить элемент в массив, чтобы определить, следует ли открыть маркер или нет.

var locations = [ 
    // IW content, lat, lng, nowrap, open IW 
    ['Oddział', 52.846190, 17.723237, 3, true], 
    ['Oddział', 52.812224, 17.201023, 2, true], 
    ['Zakład Poligraficzny - Siedziba', 52.847942, 17.757889, 1, false]  
]; 

Тогда это сделать, чтобы открыть InfoWindow:

if (locations[i][4]) { 
    google.maps.event.trigger(marker, 'click'); 
} 

proof of concept fiddle

фрагмент кода:

function initialize() { 
 
    var openedInfoWindow = []; 
 
    var locations = [ 
 
    ['Oddział', 52.846190, 17.723237, 3, false], 
 
    ['Oddział', 52.812224, 17.201023, 2, true], 
 
    ['Zakład Poligraficzny - Siedziba', 52.847942, 17.757889, 1, true] 
 
    ]; 
 
    var cityCircle; 
 
    var map = new google.maps.Map(document.getElementById('map-canvas'), { 
 
    mapTypeId: google.maps.MapTypeId.ROADMAP, 
 
    zoomControl: true, 
 
    zoomControlOptions: { 
 
     style: google.maps.ZoomControlStyle.SMALL 
 
    } 
 

 
    }); 
 

 
    var bounds = new google.maps.LatLngBounds(); 
 

 
    for (i = 0; i < locations.length; i++) { 
 
    var marker = new google.maps.Marker({ 
 
     position: new google.maps.LatLng(locations[i][1], locations[i][2], locations[i][3]), 
 
     map: map, 
 
     content: locations[i][0] 
 
    }); 
 

 
    bounds.extend(marker.position); 
 

 
    var infowindow = new google.maps.InfoWindow(); 
 

 
    google.maps.event.addListener(marker, 'click', (function(marker, i, infowindow) { 
 
     return function() { 
 

 
     if (openedInfoWindow[i] != null) { 
 
      openedInfoWindow[i].close(); 
 
      openedInfoWindow[i] = null; 
 
     } else { 
 
      infowindow.setContent(this.content); 
 
      infowindow.open(map, this); 
 
      openedInfoWindow[i] = infowindow; 
 
      google.maps.event.addListener(infowindow, 'closeclick', function() { 
 
      openedInfoWindow[i] = null; 
 
      }); 
 
     } 
 
     } 
 
    })(marker, i, infowindow)); 
 

 
    if (locations[i][4]) { 
 
     google.maps.event.trigger(marker, 'click'); 
 
    } 
 
    } 
 

 
    map.fitBounds(bounds); 
 

 
    var listener = google.maps.event.addListener(map, "idle", function() { 
 
    map.setZoom(9); 
 
    google.maps.event.removeListener(listener); 
 
    }); 
 
} 
 

 
function loadScript() { 
 
    var script = document.createElement('script'); 
 
    script.src = 'https://maps.googleapis.com/maps/api/js?' + 'callback=initialize'; 
 
    document.body.appendChild(script); 
 
} 
 

 
window.onload = loadScript;
html, 
 
body, 
 
#map-canvas { 
 
    height: 100%; 
 
    margin: 0; 
 
    padding: 0; 
 
}
<script src="https://maps.googleapis.com/maps/api/js"></script> 
 
<div id="map-canvas"></div>

+0

Спасибо! Отличная работа! – Skidzla