異なるIDを持つ1ページの2つのGoogleマップ

Question

Googleマップapiには全く新しいので、2つのマップを表示する方法についてはあまり知られていません。私は学校で近くを表示するためのマップを使用しており、クライアントの要件は、各マップ上の異なるデータを持つ異なる場所に1ページで3つのマップを表示しています。ここで問題となるのは、私が新しい地図のdivと変更スクリプトを置くと表示されなくなることです。変更されたIDが表示されない、スクリプトでinitが変更されるloading = 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コードは、私はあなたがすべてのjavascriptをラップ示唆

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

いずれかの適切なアプローチを提案してください

Answer 1

複数のマップでページを開発してきたですコードをdiv要素のidを受け入れる関数にマップします。その後、一意のIDを持つ3つのdiv要素があります。その後、関数を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), { 
}