Mover google map center javascript api

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

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

  }

Se llama a la función moveToLocation pero el mapa no vuelve a centrar. ¿Alguna idea de lo que me estoy perdiendo?

Author: taormania, 2012-10-03
Source

2 answers

Tu problema es que en moveToLocation, estás usando document.getElementById para intentar obtener el objeto Map, pero eso solo te da un HTMLDivElement, no el elemento google.maps.Map que estás esperando. Así que su variable map no tiene función panTo, por lo que no funciona. Lo que necesitas es ardilla la variable map lejos en algún lugar, y debería funcionar como estaba previsto. Puedes usar una variable global como esta: 

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 trabajo jsFiddle aquí: http://jsfiddle.net/fqt7L/1 /

 58
Author: Ethan Brown,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2012-10-02 22:55:18

Mostrar la API de Google Maps utilizando dinámicamente, obtener los datos en la base de datos para mostrar el lugar, lat, long y para mostrar el marcador de mapa en el centro utilizando AngularJS. Hecho por Sureshchan...

Captura de pantalla de 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);
    });
});
 0
Author: sureshchann,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-05-20 17:29:26