在加载 Google Maps API v3 时打开 infoWindow

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>

我似乎无法做的是在地图加载或点击链接时加载 infoWindow。我尝试了许多不同的答案，但感觉我只是错过了一些东西。

提前致谢。

Answer 1

我的建议是在您单击侧边栏条目时触发现有的单击处理程序。将标记保存在数组中，以便您可以访问它们。

var markers = [];

在创建它们时将它们推送到该数组中：

markers.push(marker);

点击侧边栏条目时触发相应标记上的点击事件。

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>';

工作代码 sn-p（基于您的 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>