I don't do a lot of coding but I have tried to write what I thought would be a simple bit of code that will be ran through phonegap/cordova. Right now all I want it to do is locate me, keep the marker on my location as I move/walk/drive and rotate in the direction I'm traveling with a standard triangle SVG Google marker.
I'm really having a tough time figuring out the rotating/bearing/heading since I don't have an end destination or poly lines to follow. Right now I have it locate fine, put the marker on the map, updates fine and keeps the marker in the center. Of course I'll add a lot more to this but this is the portion I'm having trouble with. I put a ***// in the code of the rotation part I'm trying to fix with the code I thought might work. I'll probably turn it into a variable called heading but it shows the concept.
My problem is I don't know how to get the to and from latlng. I'm using navigator.geolocation.watchPosition to follow the location change so I don't know how to get the previous latlng. Also, if there's an easier way to do what I'm trying to do in general I'm all ears. I feel like I've over thought this but maybe it does take all this.
I removed my api code but other than that this all works as is.
<!DOCTYPE html>
<html>
<head>
<title>GEOCODING TEST</title>
<style type="text/css">
html,
body {
height: 100% ;
margin: 0px 0px 0px 0px ;
overflow: hidden ;
padding: 0px 0px 0px 0px ;
width: 100% ;
}
#mapContainer {
height: 100% ;
width: 100% ;
}
</style>
<script src="={MYAPIKEY}" type=
"text/javascript">
</script>
<script src=
".4.2/jquery.min.js" type=
"text/javascript">
</script>
</head>
<body>
<div id="mapContainer">
</div>
<script type="text/javascript">
var mapContainer = $( "#mapContainer" );
map = new google.maps.Map(
mapContainer[ 0 ],
{
zoom: 15,
center: new google.maps.LatLng(
40.700683,
-73.925972
),
mapTypeId: google.maps.MapTypeId.TERRAIN
}
);
function addMarker (latitude, longitude){
var marker = new google.maps.Marker({
map: map,
position: new google.maps.LatLng(
latitude,
longitude
),
flat: true,
icon: {
path: google.maps.SymbolPath.FORWARD_CLOSED_ARROW,
strokeColor : 'red',
strokeWeight : 3,
scale: 6,
***//rotation: google.maps.geometry.sphericalputeHeading(from:LatLng, to:LatLng)
},
});
return( marker );
}
function updateMarker( marker, latitude, longitude, label ){
marker.setPosition(
new google.maps.LatLng(
latitude,
longitude
)
);
if (label){
marker.setTitle( label );
}
}
if (navigator.geolocation) {
var locationMarker = null;
navigator.geolocation.getCurrentPosition(
function( position ){
if (locationMarker){
return;
}
console.log( "Initial Position Found" );
locationMarker = addMarker(
position.coords.latitude,
position.coords.longitude,
"Initial Position"
);
},
function( error ){
console.log( "Something went wrong: ", error );
},
{
timeout: (5 * 1000),
maximumAge: (1000 * 60 * 15),
enableHighAccuracy: true
}
);
var positionTimer = navigator.geolocation.watchPosition(
function( position ){
console.log( "Newer Position Found" );
console.log (position);
updateMarker(
locationMarker,
position.coords.latitude,
position.coords.longitude,
"Updated / Accurate Position"
);
var pos = new google.maps.LatLng(
position.coords.latitude,
position.coords.longitude);
map.setCenter(pos);
}
);
setTimeout(
function(){
// Clear the position watcher.
navigator.geolocation.clearWatch( positionTimer );
},
(1000 * 60 * 5)
);
}
</script>
<div id="map-canvas" style="width: 100%; height: 100%">
</div>
</body>
</html>
I don't do a lot of coding but I have tried to write what I thought would be a simple bit of code that will be ran through phonegap/cordova. Right now all I want it to do is locate me, keep the marker on my location as I move/walk/drive and rotate in the direction I'm traveling with a standard triangle SVG Google marker.
I'm really having a tough time figuring out the rotating/bearing/heading since I don't have an end destination or poly lines to follow. Right now I have it locate fine, put the marker on the map, updates fine and keeps the marker in the center. Of course I'll add a lot more to this but this is the portion I'm having trouble with. I put a ***// in the code of the rotation part I'm trying to fix with the code I thought might work. I'll probably turn it into a variable called heading but it shows the concept.
My problem is I don't know how to get the to and from latlng. I'm using navigator.geolocation.watchPosition to follow the location change so I don't know how to get the previous latlng. Also, if there's an easier way to do what I'm trying to do in general I'm all ears. I feel like I've over thought this but maybe it does take all this.
I removed my api code but other than that this all works as is.
<!DOCTYPE html>
<html>
<head>
<title>GEOCODING TEST</title>
<style type="text/css">
html,
body {
height: 100% ;
margin: 0px 0px 0px 0px ;
overflow: hidden ;
padding: 0px 0px 0px 0px ;
width: 100% ;
}
#mapContainer {
height: 100% ;
width: 100% ;
}
</style>
<script src="https://maps.googleapis./maps/api/js?key={MYAPIKEY}" type=
"text/javascript">
</script>
<script src=
"http://ajax.googleapis./ajax/libs/jquery/1.4.2/jquery.min.js" type=
"text/javascript">
</script>
</head>
<body>
<div id="mapContainer">
</div>
<script type="text/javascript">
var mapContainer = $( "#mapContainer" );
map = new google.maps.Map(
mapContainer[ 0 ],
{
zoom: 15,
center: new google.maps.LatLng(
40.700683,
-73.925972
),
mapTypeId: google.maps.MapTypeId.TERRAIN
}
);
function addMarker (latitude, longitude){
var marker = new google.maps.Marker({
map: map,
position: new google.maps.LatLng(
latitude,
longitude
),
flat: true,
icon: {
path: google.maps.SymbolPath.FORWARD_CLOSED_ARROW,
strokeColor : 'red',
strokeWeight : 3,
scale: 6,
***//rotation: google.maps.geometry.spherical.puteHeading(from:LatLng, to:LatLng)
},
});
return( marker );
}
function updateMarker( marker, latitude, longitude, label ){
marker.setPosition(
new google.maps.LatLng(
latitude,
longitude
)
);
if (label){
marker.setTitle( label );
}
}
if (navigator.geolocation) {
var locationMarker = null;
navigator.geolocation.getCurrentPosition(
function( position ){
if (locationMarker){
return;
}
console.log( "Initial Position Found" );
locationMarker = addMarker(
position.coords.latitude,
position.coords.longitude,
"Initial Position"
);
},
function( error ){
console.log( "Something went wrong: ", error );
},
{
timeout: (5 * 1000),
maximumAge: (1000 * 60 * 15),
enableHighAccuracy: true
}
);
var positionTimer = navigator.geolocation.watchPosition(
function( position ){
console.log( "Newer Position Found" );
console.log (position);
updateMarker(
locationMarker,
position.coords.latitude,
position.coords.longitude,
"Updated / Accurate Position"
);
var pos = new google.maps.LatLng(
position.coords.latitude,
position.coords.longitude);
map.setCenter(pos);
}
);
setTimeout(
function(){
// Clear the position watcher.
navigator.geolocation.clearWatch( positionTimer );
},
(1000 * 60 * 5)
);
}
</script>
<div id="map-canvas" style="width: 100%; height: 100%">
</div>
</body>
</html>
2 Answers
Reset to default 8Since it is really hard to predict the future, if you don't have a real time heading from the GPS device, use the previous point and the updated point. That won't be particularly accurate if it isn't moving (or isn't moving fast enough).
function updateMarker(marker, latitude, longitude, label) {
var prevPosn = marker.getPosition();
marker.setPosition(
new google.maps.LatLng(
latitude,
longitude
)
);
marker.setIcon({
path: google.maps.SymbolPath.FORWARD_CLOSED_ARROW,
strokeColor: 'red',
strokeWeight: 3,
scale: 6,
rotation: google.maps.geometry.spherical.puteHeading(prevPosn, marker.getPosition())
})
if (label) {
marker.setTitle(label);
}
}
There is a google library created for this purpose, and it is called Geometry Libray.
A set of Navigation functions is included in this library and will help you very much with calculating distances, heading..etc.
You can find a clear example here:
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 4,
center: {lat: 34, lng: -40.605}
});
map.controls[google.maps.ControlPosition.TOP_CENTER].push(
document.getElementById('info'));
marker1 = new google.maps.Marker({
map: map,
draggable: true,
position: {lat: 40.714, lng: -74.006}
});
marker2 = new google.maps.Marker({
map: map,
draggable: true,
position: {lat: 48.857, lng: 2.352}
});
var bounds = new google.maps.LatLngBounds(
marker1.getPosition(), marker2.getPosition());
map.fitBounds(bounds);
google.maps.event.addListener(marker1, 'position_changed', update);
google.maps.event.addListener(marker2, 'position_changed', update);
poly = new google.maps.Polyline({
strokeColor: '#FF0000',
strokeOpacity: 1.0,
strokeWeight: 3,
map: map,
});
geodesicPoly = new google.maps.Polyline({
strokeColor: '#CC0099',
strokeOpacity: 1.0,
strokeWeight: 3,
geodesic: true,
map: map
});
update();
}
That polyline is a virtual line that connects the departure, and destination points.