In my project I want to move the center of the map to new coordinates. This is the code I have for the map
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);
}
The moveToLocation function does get called but the map does not re center. Any idea what I'm missing?
Your problem is that in moveToLocation
, you're using document.getElementById
to try to get the Map
object, but that only gets you an HTMLDivElement
, not the google.maps.Map
element you're expecting. So your variable map
has no panTo
function, which is why it doesn't work. What you need to is squirrel the map
variable away somewhere, and it should work as planned. You can just use a global variable like so:
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);
}
See working jsFiddle here: http://jsfiddle.net/fqt7L/1/
Display the Google Maps API using dynamically, fetch the data in database to display the place, lat, long and to show map marker in center using AngularJS. Done by 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);
});
});