Geolocation: Moving Only Google Maps Marker Without Reload The Map
I need to update only the marker when the device is moving or when the device is getting more accuracy. When the position change also reload the map and I need to move only the mak
Solution 1:
I believe that the problem is that you create a new map inside the watchPosition function. You only need to create one marker and then update its position inside the watchPosition function.
navigator.geolocation.watchPosition(
function (position) {
setMarkerPosition(
currentPositionMarker,
position
);
});
function setMarkerPosition(marker, position) {
marker.setPosition(
new google.maps.LatLng(
position.coords.latitude,
position.coords.longitude)
);
}
Maybe this example will help you:
<!doctype html><htmllang="en"><head><title>Google maps</title><scriptsrc="http://code.jquery.com/jquery-1.8.2.min.js"></script><scripttype="text/javascript"src="http://maps.google.com/maps/api/js?v=3&sensor=false&language=en"></script><scripttype="text/javascript">var map,
currentPositionMarker,
mapCenter = new google.maps.LatLng(40.700683, -73.925972),
map;
functioninitializeMap()
{
map = new google.maps.Map(document.getElementById('map_canvas'), {
zoom: 13,
center: mapCenter,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
}
functionlocError(error) {
// the current position could not be locatedalert("The current position could not be found!");
}
functionsetCurrentPosition(pos) {
currentPositionMarker = new google.maps.Marker({
map: map,
position: new google.maps.LatLng(
pos.coords.latitude,
pos.coords.longitude
),
title: "Current Position"
});
map.panTo(new google.maps.LatLng(
pos.coords.latitude,
pos.coords.longitude
));
}
functiondisplayAndWatch(position) {
// set current positionsetCurrentPosition(position);
// watch positionwatchCurrentPosition();
}
functionwatchCurrentPosition() {
var positionTimer = navigator.geolocation.watchPosition(
function (position) {
setMarkerPosition(
currentPositionMarker,
position
);
});
}
functionsetMarkerPosition(marker, position) {
marker.setPosition(
new google.maps.LatLng(
position.coords.latitude,
position.coords.longitude)
);
}
functioninitLocationProcedure() {
initializeMap();
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(displayAndWatch, locError);
} else {
alert("Your browser does not support the Geolocation API");
}
}
$(document).ready(function() {
initLocationProcedure();
});
</script></head><body><divid="map_canvas"style="height:600px;"></div></body></html>
Post a Comment for "Geolocation: Moving Only Google Maps Marker Without Reload The Map"