Как изменить Центр Google Map, нажав кнопку

Я использую Google Map API v3 и jQuery 1.11.0.Как изменить Центр Google Map, нажав кнопку

У меня есть карта Google в следующем div-

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

The map.js находится за пределами HTML-файл, она связана.

Теперь у меня есть кнопка в другой части HTML (вне карты) как this-

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

Теперь я хочу добавить на клик событии, которое приведет к изменению центра карты к новому Lat, Lon.

Итак, у меня есть JavaScript в HTML, как this-

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

Может кто-нибудь мне помочь, пожалуйста?

Заранее благодарим за помощь.

источник

2015-02-13 Abrar Jahin

Не уверен, что «3» является действительным ID (начиная с номера). Любые ошибки в консоли? –

Где задана переменная «map»? Это не в вашем коде. –

Вы не можете этого сделать, потому что в вашей функции объект карты, вероятно, еще не готов. Вы можете сделать то же самое после инициализации карты или, что еще лучше, в 'google.maps.event.addDomListener'. – MrUpsidown

Вот код для ур проблемы:

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 если и нужно больше :).

источник

2015-02-13 12:29:04

Это будет работать, но это уродливо. Вместо этого используйте прослушиватель событий. – MrUpsidown

Спасибо, MrUpsidown! Я меняю его на функцию jQuery. –

Да, это уже лучше;) См. Мой ответ на чистое решение API Google Maps. – MrUpsidown

В вашей initialize функции (или где вы создаете карту) добавьте следующий код после того, как вы создали объект на карте:

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

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

источник

2015-02-13 13:06:25 MrUpsidown

Не могли бы вы добавить zoom, mapTypeId или другие варианты? – nic

Выяснил это: map.setZoom (10); 'и' map.setMapTypeId (google.maps.MapTypeId.SATELLITE); 'казалось, сделал трюк для меня. – nic

Да, или событие лучше, используйте 'map.setOptions()', если вам нужно сразу изменить несколько параметров. – MrUpsidown

Как изменить Центр Google Map, нажав кнопку

ответ

Смежные вопросы