單頁上有兩個不同編號的谷歌地圖

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