0

I am using the below code to Plot a Route

function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 3,
center: {lat: 0, lng: -180},
mapTypeId: google.maps.MapTypeId.TERRAIN
});

var 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}
];
 var flightPath = new google.maps.Polyline({
path: flightPlanCoordinates,
geodesic: true,
strokeColor: '#FF0000',
strokeOpacity: 1.0,
strokeWeight: 2
});

flightPath.setMap(map);
}

Sample RouteCurrent Route

Using Polylines gives only Straight Lines is there any other method to Plot the Route as in the Sample Route Image. I have tried regarding but didn't got any such method

Sandeep Oberoi
  • 45
  • 1
  • 9
  • 1
    https://developers.google.com/maps/documentation/javascript/directions – geocodezip Jun 16 '16 at 20:53
  • 1
    related question: [Plot a map path / waypoints using the Google Maps API and play the route](http://stackoverflow.com/questions/36846983/plot-a-map-path-waypoints-using-the-google-maps-api-and-play-the-route) – geocodezip Jun 16 '16 at 21:00

1 Answers1

1

Take a look here:
http://www.geocodezip.com/v3_polyline_example_arc.html
and here:
http://www.geocodezip.com/v3_polyline_example_rhumb.html

To do this you probably want to abstract the path over a sinusoid of some kind to make it more curvy and visually attractive. Check out the question below, there are a lot of in-depth answers.

Curved line between two near points in google maps

Community
  • 1
  • 1
Ted
  • 126
  • 1
  • 10