google map center javascript apiを移動

Question

私のプロジェクトでは、地図の中心を新しい座標に移動したいと思います。これは私がマップのために持っているコードです

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

    } 

moveToLocation関数は呼び出されますが、マップは再配置されません。私が逃しているものは何ですか？

Answer 1

あなたの問題はmoveToLocationに、あなたはMapオブジェクトを取得しようとするdocument.getElementByIdを使用しているということですが、それだけであなたにHTMLDivElementなく、あなたが期待しているgoogle.maps.Map要素を取得します。だからあなたの変数mapにはpanToという関数がないので、うまくいきません。あなたが必要とするのは、mapがどこかで変わるリスであり、計画どおりに動作するはずです。あなたはそうのようなグローバル変数を使用することができます。

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

はここで働いjsFiddleを参照してください：http://jsfiddle.net/fqt7L/1/

Answer 2

は長い間、緯度、場所を表示するには、データベース内のデータをフェッチし、動的に使用してGoogle MapsのAPIを表示するとしAngularJSを使用して地図マーカーを中央に表示します。

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