Cách thay đổi Google Map Center bằng cách nhấp vào nút

Question

Tôi đang sử dụng Google Map API v3 và jQuery 1.11.0.

Tôi có một bản đồ của Google trong div-

sau

<div id="googleMap" class="map_div"></div> 

Các map.js được tập tin bên ngoài html, nó được liên kết.

Bây giờ tôi có một nút trong một phần khác của html (bên ngoài bản đồ) như this-

<button id="3">Change center</button> 

Bây giờ tôi muốn thêm một về sự kiện nhấp chuột mà sẽ thay đổi trung tâm của bản đồ để mới Lat, Lon.

Vì vậy, tôi có Javascript trong HTML như this-

<script> 
$(document).ready(function() 
{ 
    $("#3").click(function(){ 
     var center = new google.maps.LatLng(10.23,123.45); 
     map.panTo(center); 
    }); 
}); 
</script> 

bất cứ ai có thể giúp tôi xin vui lòng?

Cảm ơn bạn đã trợ giúp.

Answer 1

Đây là mã cho vấn đề ur:

var map; 
 
function initialize() 
 
{ 
 
    map = new google.maps.Map(document.getElementById('map-canvas'), { 
 
    center: new google.maps.LatLng(48.1293954,12.556663),//Setting Initial Position 
 
    zoom: 10 
 
    }); 
 
} 
 

 
function newLocation(newLat,newLng) 
 
{ 
 
\t map.setCenter({ 
 
\t \t lat : newLat, 
 
\t \t lng : newLng 
 
\t }); 
 
} 
 

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

 
//Setting Location with jQuery 
 
$(document).ready(function() 
 
{ 
 
    $("#1").on('click', function() 
 
    { 
 
\t newLocation(48.1293954,11.556663); 
 
\t }); 
 
    
 
\t $("#2").on('click', function() 
 
    { 
 
\t newLocation(40.7033127,-73.979681); 
 
\t }); 
 
    
 
    $("#3").on('click', function() 
 
    { 
 
\t newLocation(55.749792,37.632495); 
 
\t }); 
 
});

html, body, #map-canvas { 
 
     height: 100%; 
 
     margin: 0px; 
 
     padding: 0px 
 
     }

<script src="//code.jquery.com/jquery-1.10.2.js"></script> 
 
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true"></script> 
 

 
<button id="1" style="padding:10px; cursor:pointer;">Munich</button> 
 
<button id="2" style="padding:10px;cursor:pointer;">New York</button> 
 
<button id="3" style="padding:10px;cursor:pointer;">Moscow</button> 
 
<br> 
 
<br> 
 
<div style="height:100%;" id="map-canvas"></div>

Live demo is here nếu u cần thêm :).

Answer 2

Trong initialize chức năng của bạn (hoặc nơi bạn tạo bản đồ) thêm mã sau đây sau khi bạn đã tạo các đối tượng bản đồ:

google.maps.event.addDomListener(document.getElementById('3'), 'click', function() { 

    map.setCenter(new google.maps.LatLng(10.23,123.45)); 
});