Come modificare Google Map Center facendo clic su un pulsante

Question

Sto utilizzando Google Maps API v3 e jQuery 1.11.0.

Ho una mappa di Google nel seguente div-

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

I map.js è file all'esterno HTML, esso è collegato.

ora ho un pulsante in un'altra parte del html (fuori mappa) come questo-

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

Ora voglio aggiungere un evento click su che cambierà il centro della mappa per nuova Lat, Lon.

Così, ho JavaScript in HTML come questo-

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

Qualcuno mi può aiutare per favore?

Grazie in anticipo per l'aiuto.

Answer 1

Qui è il codice per ur problema:

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 se u bisogno di più :).

Answer 2

Nella initialize funzione (o in cui si crea la mappa) aggiungere il seguente codice dopo aver creato l'oggetto della mappa:

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

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