web-dev-qa-db-fra.com

Déplacer l'API javascript de Google Map Center

Dans mon projet, je souhaite déplacer le centre de la carte vers de nouvelles coordonnées. C'est le code que j'ai pour la carte 

function initialize() {
    var mapOptions = {
      center: new google.maps.LatLng(0, 0),
      zoom: 4,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map(document.getElementById("map_canvas"),
        mapOptions);
  }
  function moveToLocation(lat, lng){
     var center = new google.maps.LatLng(lat, lng);
     var map = document.getElementById("map_canvas");
     map.panTo(center);

  }

La fonction moveToLocation est appelée mais la carte n'est pas recentrée. Une idée de ce que je manque?

javascriptmaps
27
taormania

Votre problème est que, dans moveToLocation, vous utilisez document.getElementById pour essayer d'obtenir l'objet Map, mais vous obtenez uniquement une HTMLDivElement et non l'élément google.maps.Map que vous attendez. Donc, votre variable map n'a pas de fonction panTo, c'est pourquoi elle ne fonctionne pas. Ce dont vous avez besoin, c’est que la variable map soit écartée quelque part, et elle devrait fonctionner comme prévu. Vous pouvez simplement utiliser une variable globale comme ceci:

var map;      // global variable

function initialize() {
    var mapOptions = {
        center: new google.maps.LatLng(0, 0),
        zoom: 4,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    // assigning to global variable:
    map = new google.maps.Map(document.getElementById("map_canvas"),
        mapOptions);
}

function moveToLocation(lat, lng){
    var center = new google.maps.LatLng(lat, lng);
    // using global variable:
    map.panTo(center);
}

Voir le travail de jsFiddle ici: http://jsfiddle.net/fqt7L/1/

64
Ethan Brown

Affichez l’API de Google Maps de manière dynamique, extrayez les données de la base de données pour afficher le lieu, lat, long et pour afficher le marqueur de carte au centre à l’aide d’AngularJS. Fait par Sureshchan ...

 Screenshot of Google Maps 

$(function() {
    $http.get('school/transport/scroute/viewRoute?scRouteId=' + scRouteId).success(function(data) {
        console.log(data);

        for (var i = 0; i < data.viewRoute.length; i++) {
            $scope.view = [];
            $scope.view.Push(data.viewRoute[i].stoppingName, data.viewRoute[i].latitude, data.viewRoute[i].longitude);
            $scope.locData.Push($scope.view);
        }            

        var locations = $scope.locData;
        var map = new google.maps.Map(document.getElementById('map'), {                    
            mapTypeId : google.maps.MapTypeId.ROADMAP
        });
        var infowindow = new google.maps.InfoWindow();
        var bounds = new google.maps.LatLngBounds();
        var marker, j;

        for (j = 0; j < locations.length; j++) {
            marker = new google.maps.Marker({
                position : new google.maps.LatLng(locations[j][1], locations[j][2]),
                map : map
            });

            google.maps.event.addListener(marker, 'click', (function(marker, j) {
                bounds.extend(marker.position);
                return function() {
                    infowindow.setContent(locations[j][0]); 
                    infowindow.open(map, marker);
                    map.setZoom(map.getZoom() + 1);
                    map.setCenter(marker.getPosition());
                }
            })(marker, j));
        };
        map.fitBounds(bounds);
    });
});
1
sureshchann