单页上有两个不同编号的谷歌地图

Question

我对谷歌地图api总是陌生的，我不知道它将如何配置显示两张地图。我正在使用地图来显示附近的学校，而且客户要求在单个页面上显示不同位置的3张地图，并在每张地图上显示不同的数据。这里的问题是，当我把一个新的地图div和改变脚本它不会出现。改变id不显示，在脚本中更改init =加载地址& 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> 

任何一个已经开发了多个地图页请提出一个合适的方法

Answer 1

我建议你换所有的JavaScript将代码映射到接受div元素的id的函数中。之后，有三个div元素，每个元素都有一个唯一的id。然后调用该函数三次。

<!-- 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), { 
}