여러 Google지도 인스턴스로드

Question

현재 Google지도 인스턴스를 map div에로드하는 방법입니다.

다른 Google지도 인스턴스를 보유 할 map2 ID를 가진 다른 div를 추가하고 싶습니다. 어떻게해야합니까? 당신은 자바 스크립트

var map2 = document.createElement('div'); 
map2.id = "map2"; 

document.body.innerHTML += map2; 

를 통해이 작업을 수행하려면

<script type="text/javascript"> 
    var map; 
    function initialize() { 
    var myLatlng = new google.maps.LatLng(33.33333,44.44444); 
    var myOptions = { 
     zoom: 14, 
     center: myLatlng, 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    } 
    map = new google.maps.Map(document.getElementById("map"), myOptions); 


    var marker = new google.maps.Marker({ 
     position: myLatlng, 
     map: map, 
     title:"If this is your exact location, press \"Add this location\"" 
    }); 
    google.maps.event.addListener(marker, 'click', function() { 
     map.setZoom(8); 
    }); 
    } 


</script> 
<div id="map"></div> 

Answer 1

그런 다음 다른 DIV의 ID ;, 즉, MAP2로 초기화 함수를 호출;

편집 : 기능을 잘못 호출하지 않습니까?

<script type="text/javascript"> 

    function initialize(mapNum) { 
    var map; 
    var myLatlng = new google.maps.LatLng(33.33333,44.44444); 
    var myOptions = { 
     zoom: 14, 
     center: myLatlng, 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    } 
    map = new google.maps.Map(document.getElementById("map"+mapNum), myOptions); 


    var marker = new google.maps.Marker({ 
     position: myLatlng, 
     map: map, 
     title:"If this is your exact location, press \"Add this location\"" 
    }); 
    google.maps.event.addListener(marker, 'click', function() { 
     map.setZoom(8); 
    }); 
    } 


initialize(1); 
initialize(2); 

</script> 
<div id="map1"></div> 
<div id="map2"></div>