单个页面上的两个谷歌地图具有不同的 ID答案

【问题标题】：Two google maps on single page with different id's单个页面上的两个谷歌地图具有不同的 ID
【发布时间】：2017-02-23 11:49:17
【问题描述】：

我对 google map api 完全陌生，我不太了解如何将其配置为显示两个地图。我正在使用地图来显示附近的学校，而客户的要求是在不同位置的单页中显示 3 张地图，每张地图上都有不同的数据。这里的问题是，当我放置一个新的地图 div 并更改脚本时，它不会显示出来。更改 id 不显示，在脚本加载中更改 init =places&callback=initMap 不显示更改的 js 不再工作。我的 js 代码是

<script type="text/javascript">
var map;
var infowindow;
function initMap() {
  var pyrmont = {lat: <?= $data->latitude ?>, lng: <?= $data->longitude ?>};
  map = new google.maps.Map(document.getElementById('map2'), {
    center: pyrmont,
    zoom: 15
  });

  infowindow = new google.maps.InfoWindow();
  var service = new google.maps.places.PlacesService(map);
  service.nearbySearch({
    location: pyrmont,
    radius: 1500,
    type: ['school']
  }, schoolCallback);


}
function schoolCallback(results, status) {
  if (status === google.maps.places.PlacesServiceStatus.OK) {
    for (var i = 0; i < results.length; i++) {
      createSchoolMarker(results[i]); //results doesn't contain anything related to type (school,store,etc)
    }
  }
}
function createSchoolMarker(place) {
  var placeLoc = place.geometry.location;
  var marker = new google.maps.Marker({
    icon: "http://icons.iconarchive.com/icons/icons8/windows-8/16/Science-School-icon.png",
    map: map,
    position: place.geometry.location
  });
  google.maps.event.addListener(marker, 'click', function () {
    infowindow.setContent(place.name);
    infowindow.open(map, this);
  });
}

HTML代码是

<div class="resultmap" style="width: 100%;">
    <div id="map3" style="width: 100%; height: 316px;"></div>
  </div>

任何人开发了包含多个地图的页面，请提出合适的方法

【问题讨论】：

标签： javascript jquery google-maps

【解决方案1】：

我建议您将所有 javascript 地图代码包装到一个接受 div 元素 id 的函数中。之后去有三个 div 元素，每个元素都有一个唯一的 id。然后调用该函数3次。

<!-- each of the following will hold a map -->
<div id="map1"></div>
<div id="map2"></div>
<div id="map3"></div>

//wrap the javascript code for the map in a function
function makeMap("whichMap"){
  //the following will be the line that selects the div
  map = new google.maps.Map(document.getElementById(whichMap), {
}

【讨论】：