Google지도를 특정 위치에 배치하는 방법은 무엇입니까?

Question

세 개의 다른 div에 세 개의지도 캔버스가 있습니다. 자바 스크립트에서 나는 세 가지 모두에서 같은 위치에 센터를 설정했습니다. 그러나 두 번째와 세 번째는 그 중심에 있지 않습니다. 무엇이 문제 일 수 있습니까? 좋은 아이디어 있으십니까?

var centerPosition=new google.maps.LatLng(6.924782, 79.863643); 
function initialize() { 
    var map_canvas1 = document.getElementById('map_canvas1'); 
    var map_canvas2 = document.getElementById('map_canvas2'); 
    var map_canvas3 = document.getElementById('map_canvas3'); 
    var map_options1 = { 
     center: centerPosition, 
     zoom: 8, 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    }; 

var map_options2 = { 
    center: centerPosition, 
    zoom: 8, 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
}; 

var map_options3 = { 
    center: centerPosition, 
    zoom: 8, 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
}; 
map1 = new google.maps.Map(map_canvas1, map_options1); 
map2 = new google.maps.Map(map_canvas2, map_options2); 
map3 = new google.maps.Map(map_canvas3, map_options3); 

} 
google.maps.event.addDomListener(window, 'load', initialize); 

Answer 1

JSON 개체에서 'center'속성을 사용하는 대신 각지도의 가운데 위치를 설정할 수도 있습니다. 지도 객체

map1.setCenter(centerPosition); 
map2.setCenter(centerPosition); 
map3.setCenter(centerPosition); 

Answer 2

Please refer to the jsfiddle. Your code is working fine 
http://jsfiddle.net/2mw6b/ 
var centerPosition=new google.maps.LatLng(6.924782, 79.863643); 
function initialize() { 
    var map_canvas1 = document.getElementById('map_canvas1'); 
    var map_canvas2 = document.getElementById('map_canvas2'); 
    var map_canvas3 = document.getElementById('map_canvas3'); 
    var map_options1 = { 
     center: centerPosition, 
     zoom: 8, 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    }; 

var map_options2 = { 
    center: centerPosition, 
    zoom: 8, 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
}; 

var map_options3 = { 
    center: centerPosition, 
    zoom: 8, 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
}; 
map1 = new google.maps.Map(map_canvas1, map_options1); 
map2 = new google.maps.Map(map_canvas2, map_options2); 
map3 = new google.maps.Map(map_canvas3, map_options3); 

} 
initialize(); 

**Html code** 
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v3&libraries=places,drawing&sensor=false"></script> 
<div id="map_canvas1" class="mapCont"></div> 
<div id="map_canvas2" class="mapCont"></div> 
<div id="map_canvas3" class="mapCont"></div> 
**Css** 
.mapCont{ 
    height: 200px; 
    width: 200px; 
} 

를 인스턴스화 한 후 코드 아래

시도하십시오