Sposta google map center javascript api

Question

Nel mio progetto voglio spostare il centro della mappa su nuove coordinate. Questo è il codice che ho per la mappa

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 funzione moveToLocation viene richiamata ma la mappa non viene centrata. Qualche idea di cosa mi stia perdendo?

Answer 1

Il tuo problema è che in moveToLocation, si sta utilizzando document.getElementById per cercare di ottenere l'oggetto Map, ma che si ottiene solo un HTMLDivElement, non l'elemento google.maps.Map vi aspettate. Quindi la tua variabile map non ha la funzione panTo, motivo per cui non funziona. Quello di cui hai bisogno è scoiattolare la variabile map da qualche parte, e dovrebbe funzionare come pianificato. Si può semplicemente utilizzare una variabile globale in questo modo:

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); 
} 

Vedi jsFiddle lavorare qui: http://jsfiddle.net/fqt7L/1/

Answer 2

Visualizzare l'API di Google Maps in modo dinamico utilizzando, recuperare i dati nel database per visualizzare il luogo, lat, long e per mostra l'indicatore della mappa al centro usando AngularJS. Fatto da Sureshchan ...

$(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); 
    }); 
});