Mover google map center javascript api

Question

En mi proyecto, quiero mover el centro del mapa a nuevas coordenadas. Este es el código que tengo para ver el mapa

función

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

    } 

El moveToLocation se consiga llamar pero el mapa no se vuelve central. ¿Alguna idea de lo que me estoy perdiendo?

Answer 1

Su problema es que en moveToLocation, que está utilizando document.getElementById para tratar de conseguir el objeto Map, pero que sólo se obtiene una HTMLDivElement, no el elemento google.maps.Map usted está esperando. Por lo tanto, su variable map no tiene la función panTo, por lo que no funciona. Lo que necesita es transferir la variable map a otro lugar, y debería funcionar según lo planeado. Usted sólo puede usar una variable global, así:

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

Ver jsFiddle trabajar aquí: http://jsfiddle.net/fqt7L/1/

Answer 2

visualización de la API de Google Maps utilizando de forma dinámica, ir a buscar los datos en la base de datos para mostrar el lugar, latitud, longitud y mostrar marcador de mapa en el centro usando AngularJS. Hecho por 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); 
    }); 
});