web-dev-qa-db-fra.com

Comment changer Google Map Center en cliquant sur un bouton

J'utilise Google Map API v3 et jQuery 1.11.0.

J'ai une carte Google dans la div suivante:

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

map.js est en dehors du fichier html, il est lié.

Maintenant, j'ai un bouton dans une autre partie du html (en dehors de la carte) comme ceci:

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

Maintenant, je veux ajouter un événement au clic qui changera le centre de la carte en nouvelle latitude et longitude.

Donc, j'ai JavaScript en HTML comme ceci:

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

Quelqu'un peut-il m'aider s'il-vous-plaît? Merci d'avance pour votre aide.

javascriptjqueryhtmlgoogle-mapsgoogle-maps-api-3
11
Abrar Jahin

Voici le code pour votre problème:

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)
{
        map.setCenter({
                lat : newLat,
                lng : newLng
        });
}

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

//Setting Location with jQuery
$(document).ready(function ()
{
    $("#1").on('click', function ()
    {
          newLocation(48.1293954,11.556663);
        });
  
        $("#2").on('click', function ()
    {
          newLocation(40.7033127,-73.979681);
        });
  
    $("#3").on('click', function ()
    {
          newLocation(55.749792,37.632495);
        });
});
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>

La démo en direct est ici si vous avez besoin de plus :).

24
Ivan Belchev

Dans votre fonction initialize (ou là où vous créez la carte), ajoutez le code suivant après avoir créé l'objet carte:

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

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