在加載時顯示特定的 Google Map 信息 window

Question

我使用一些谷歌地圖示例組合了一個簡單的多標記 map。 代碼如下：

function initMap() {

  var center = {
    lat: 51.7504111,
    lng: -1.2826071
  };

  var locations = [
    ['Philz Coffee<br>\
    801 S Hope St A, Los Angeles, CA 90017<br>\
    <a href="https://goo.gl/maps/L8ETMBt7cRA2">Get Directions</a>', 34.046438, -118.259653],
    ['Philz Coffee<br>\
    525 Santa Monica Blvd, Santa Monica, CA 90401<br>\
    <a href="https://goo.gl/maps/PY1abQhuW9C2">Get Directions</a>', 34.017951, -118.493567],
    ['Philz Coffee<br>\
    146 South Lake Avenue #106, At Shoppers Lane, Pasadena, CA 91101<br>\
    <a href="https://goo.gl/maps/eUmyNuMyYNN2">Get Directions</a>', 34.143073, -118.132040],
    ['Philz Coffee<br>\
    21016 Pacific Coast Hwy, Huntington Beach, CA 92648<br>\
    <a href="https://goo.gl/maps/Cp2TZoeGCXw">Get Directions</a>', 33.655199, -117.998640],
    ['Philz Coffee<br>\
    252 S Brand Blvd, Glendale, CA 91204<br>\
    <a href="https://goo.gl/maps/WDr2ef3ccVz">Get Directions</a>', 34.142823, -118.254569]
  ];

  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 9,
    center: center
  });

  var infowindow = new google.maps.InfoWindow({});
  var marker, count;

  for (count = 0; count < locations.length; count++) {

    marker = new google.maps.Marker({
      position: new google.maps.LatLng(locations[count][1], locations[count][2]),
      map: map,
      title: locations[count][0]
    });

    google.maps.event.addListener(marker, 'click', (function(marker, count) {
      return function() {
        infowindow.setContent(locations[count][0]);
        infowindow.open(map, marker);
      }
    })(marker, count));
  }
}

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

infowindow.open(map, marker);

我添加了以下內容以嘗試使信息 windows 默認顯示（文檔建議這應該有效），但這似乎不起作用：

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

infowindow.open(map, marker);

但我真正想要實現的是如何在頁面加載時顯示特定標記，例如第二個“Philz Coffee”位置。 任何幫助深表感謝。

Answer 1

實現此目的的一種（好的）方法是定義您的“默認”標記並在其上觸發點擊事件（因為您已經在每個標記上注冊了點擊事件）。

下面的工作片段。 代碼被注釋了，所以它應該自己說話。

 function initialize() { var mapOptions = { zoom: 5, mapTypeId: google.maps.MapTypeId.ROADMAP, center: new google.maps.LatLng(1, 1) }; var locations = [ [new google.maps.LatLng(0, 0), 'Marker 1', 'Infowindow content for Marker 1'], [new google.maps.LatLng(0, 1), 'Marker 2', 'Infowindow content for Marker 2'], [new google.maps.LatLng(0, 2), 'Marker 3', 'Infowindow content for Marker 3'], [new google.maps.LatLng(1, 0), 'Marker 4', 'Infowindow content for Marker 4'], [new google.maps.LatLng(1, 1), 'Marker 5', 'Infowindow content for Marker 5'], [new google.maps.LatLng(1, 2), 'Marker 6', 'Infowindow content for Marker 6'] ]; var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); // Create empty markers array var markers = []; // Create empty Info Window var infowindow = new google.maps.InfoWindow(); // Create marker for each location for (var i = 0; i < locations.length; i++) { var marker = new google.maps.Marker({ position: locations[i][0], map: map, title: locations[i][1] }); // Register click event on each marker google.maps.event.addListener(marker, 'click', (function (marker, i) { return function () { infowindow.setContent(locations[i][2]); infowindow.open(map, marker); } })(marker, i)); // Push marker to markers array markers.push(marker); } // Define the default marker, here for example the marker labeled "Marker 4" var defaultMarker = markers[3]; // Trigger click on default marker google.maps.event.trigger(defaultMarker, 'click'); }

 #map-canvas { height: 180px; }

 <div id="map-canvas"></div> <.-- Replace the value of the key parameter with your own API key: --> <script src="https.//maps.googleapis?com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initialize" async defer></script>