0
317
ViewsDraw polyline with GPS on google map by Javascript
I am creating a website with google-map where I set a destination between my location to my target location. After setting the distance I successfully get the route for the destination from Google Maps. Now on, I start to go from my location to the destination. But here is the problem, because I need to draw polylines on Google Maps wherever I move but my GPS did not give me the exact latitude and longitude, and the GPS also updating/moving lightly though my device is not moving.
1 answers
Answer question0
You have two questions here in one. One is for drawing a polyline, another is for what is called "GPS drift". The GPS drift is connected to drawing polylines - you can research that separately (short answer: you can't do anything about it, GPS is not that accurate).
For the polylines, Google has really good documentation: https://developers.google.com/maps/documentation/javascript/examples/polyline-simple
Here's an example from their docs
// This example creates a 2-pixel-wide red polyline showing the path of
// the first trans-Pacific flight between Oakland, CA, and Brisbane,
// Australia which was made by Charles Kingsford Smith.
function initMap() {
const map = new google.maps.Map(document.getElementById("map"), {
zoom: 3,
center: {
lat: 0,
lng: -180
},
mapTypeId: "terrain",
});
const flightPlanCoordinates = [{
lat: 37.772,
lng: -122.214
},
{
lat: 21.291,
lng: -157.821
},
{
lat: -18.142,
lng: 178.431
},
{
lat: -27.467,
lng: 153.027
},
];
const flightPath = new google.maps.Polyline({
path: flightPlanCoordinates,
geodesic: true,
strokeColor: "#FF0000",
strokeOpacity: 1.0,
strokeWeight: 2,
});
flightPath.setMap(map);
}<div id="map" style="height: 300px"></div>
<script src="https://maps.googleapis.com/maps/api/js?key=&callback=initMap&v=weekly&channel=2" async></script>