So ändern Sie Google Map Center durch Klicken auf eine Schaltfläche

Question

Ich verwende Google Map API v3 und jQuery 1.11.0.

Ich habe eine Google Map in der folgenden div-

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

Die map.js außerhalb html-Datei, es verknüpft ist.

Jetzt habe ich eine Schaltfläche in einem anderen Teil des HTML (außerhalb Karte) wie this-

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

Jetzt möchte ich ein auf Click-Ereignis hinzuzufügen, die die Mitte der Karte auf neue ändern wird Lat, Lon.

Also, ich habe JavaScript in HTML wie this-

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

Kann mir jemand bitte helfen?

Vielen Dank im Voraus für die Hilfe. Hier

Answer 1

ist der Code für ur Problem:

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 wenn u mehr brauchen :).

Answer 2

In Ihrer initialize Funktion (oder wo Sie die Karte erstellen) den folgenden Code hinzu, nachdem Sie das Kartenobjekt erstellt:

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

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