Open infoWindow on load API Google Maps v3

Question

Я пытаюсь настроить infoWindow для автоматической загрузки при загрузке карты, а затем, когда каждое местоположение выбрано из моего дополнительного меню.

Вот мой главный JavaScript:

// set up variables 
var map; 
var marker; 
var infowindow; 

// List out cities, coord, addy and phone 
var cityList = [ 
    ['Atlanta, GA', 33.840644, -84.238972], 

    ['Austin, TX', 30.402887, -97.721606], 

    ['Boston, MA', 42.364247, -71.078575] 
]; 

startCenter = new google.maps.LatLng(cityList[0][1], cityList[0][2]); // Atlanta Location 

function initialize() { 

    map = new google.maps.Map(document.getElementById('map_canvas'), { 
     center: startCenter, 
     zoom: 18, 
     disableDefaultUI:true, 
     mapTypeId: google.maps.MapTypeId.ROADMAP, 
     scrollwheel: false 
    }); 

    map.set('styles', [ 
     { 
      stylers: [{ saturation: -100 }] 
     }, 
     { 
      "elementType": "labels.icon", 
      "stylers": [ 
       { "visibility": "off" } 
      ] 
     } 
    ]); 

    addMarkers(); 

} // end initialize() 

var boxList = []; 

function addMarkers(){ 

    var marker, i; 
    var infowindow = new google.maps.InfoWindow(); 

    for (var i = 0; i < cityList.length; i++) 
    { 
     marker = new google.maps.Marker({ 
      position: new google.maps.LatLng(cityList[i][1], cityList[i][2]), 
      map: map, 
      id: i, 
    animation: google.maps.Animation.DROP 
     }); 

     var boxText = document.createElement("div"); 
     boxText.id = i; 
     boxText.style.textAlign = 'left'; 
     boxText.className = 'boxText'; 
     boxText.innerHTML = '<p class="maptitle">Business Name in '+cityList[i][0]+’</span></p>'+cityList[i][0]+’<p><a href="'+cityList[i][4]+'" target="_blank">View this Campus</a></p>' ; 
     boxList.push(boxText); 

     google.maps.event.addListener(marker, 'click', (function(marker, i) { 
       return function() { 
        infowindow.setContent(boxList[this.id]); 
        infowindow.open(map, marker); 
       } 
      })(marker, i)); //end add marker listener 

      google.maps.event.addDomListener(boxList[i],'click',(function(marker, i) { 

      })(marker, i)); 

    } //endfor 

}//end function 

google.maps.event.addDomListener(window, 'load', initialize); 

Затем на вспомогательном меню, у меня есть следующие ссылки для загрузки каждого местоположения:

<div class="mapmenu"> 
     <ul> 
      <script type="text/javascript"> 
       for (var i = 0; i < cityList.length; i++) 
        { 
         document.write('<li><a onclick="map.setCenter(new google.maps.LatLng('+cityList[i][1]+', '+cityList[i][2]+')); return false">'+cityList[i][0]+'</a></li>'); 
        } 
      </script> 
     </ul> 
    </div> 

То, что я не могу сделать загрузите информационное окно при загрузке карты или при нажатии ссылок. Я попытался выполнить несколько разных ответов, но чувствую, что я просто что-то упустил.

Заранее спасибо.

Answer 1

Мое предложение состояло в том, чтобы вызвать существующий обработчик кликов, когда вы нажимаете на вкладку боковой панели. Сохраните маркеры в массиве, чтобы вы могли получить к ним доступ.

var markers = []; 

Выдвиньте их на этот массив, как вы их создания:

markers.push(marker); 

Trigger событие нажмите на соответствующий маркер, когда запись боковой кнопки.

document.getElementById('sidebar').innerHTML += '<li><a onclick="map.setCenter(new google.maps.LatLng(' + city[1] + ',' + city[2] + ')); google.maps.event.trigger(markers['+markers.length+'],\'click\'); return false">' + city[0] + '</a></li>'; 

работает фрагмент кода (на основе вашего previous question:

var map; 
 
var markers = []; 
 
var cityList = [ 
 
    ['Atlanta, GA', 33.840644, -84.238972, 1, "text 0"], 
 
    ['Austin, TX', 30.402887, -97.721606, 2, "text 1"], 
 
    ['Boston, MA', 42.364247, -71.078575, 3, "text 2"], 
 
    ['Chicago, IL', 41.898111, -87.638394, 4, "text 3"] 
 
]; 
 

 
function initialize() { 
 
    var mapOptions = { 
 
    zoom: 6, 
 
    center: new google.maps.LatLng(46.8, 1.7), 
 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
 
    } 
 

 
    map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions); 
 

 
    setMarkers(map, cityList); 
 
    google.maps.event.trigger(markers[0],'click'); 
 
} 
 

 
function setMarkers(map, locations) { 
 
    var bounds = new google.maps.LatLngBounds(); 
 
    var image = 'http://maps.google.com/mapfiles/ms/icons/blue.png'; 
 
    for (var i = 0; i < locations.length; i++) { 
 
    var city = locations[i]; 
 
    var myLatLng = new google.maps.LatLng(city[1], city[2]); 
 
    bounds.extend(myLatLng); 
 
    var infoWindow = new google.maps.InfoWindow(); 
 
    var marker = new google.maps.Marker({ 
 
     position: myLatLng, 
 
     map: map, 
 
     icon: image 
 
    }); 
 
    document.getElementById('sidebar').innerHTML += '<li><a onclick="map.setCenter(new google.maps.LatLng(' + city[1] + ',' + city[2] + ')); google.maps.event.trigger(markers['+markers.length+'],\'click\'); return false">' + city[0] + '</a></li>'; 
 

 
    (function(i) { 
 
     google.maps.event.addListener(marker, "click", function() { 
 
     var galeries = locations[i]; 
 
     infoWindow.close(); 
 
     infoWindow.setContent(
 
      "<div id='boxcontent'><a href='" + city[0] + "'><strong style='color:black'>" + galeries[0] + "</strong></a><br />" + city[4] + "</div>"); 
 
     infoWindow.open(map, this); 
 
     }); 
 
    })(i); 
 
    markers.push(marker); 
 
    } 
 
    map.fitBounds(bounds); 
 
} 
 

 
google.maps.event.addDomListener(window, 'load', initialize);

html, 
 
body, 
 
#map_canvas { 
 
    height: 100%; 
 
    width: 100%; 
 
    margin: 0px; 
 
    padding: 0px 
 
}

<script src="https://maps.googleapis.com/maps/api/js"></script> 
 
<table border="1" style="height:100%; width:100%"> 
 
    <tr style="height:100%; width:100%"> 
 
    <td style="height:100%; width:80%"> 
 
     <div id="map_canvas" style="border: 2px solid #3872ac;"></div> 
 
    </td> 
 
    <td style="height:100%; width:20%"> 
 
     <div id="sidebar"></div> 
 
    </td> 
 
    </tr> 
 
</table>