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