CODEWITHSUNDEEP
javascriptreactjsgoogle-mapsgoogle-maps-api-3google-maps-static-api
mokiliii Lo
mokiliii Lo

Reputation: 637

Google Static Maps, draw custom route direction

I have a React app that makes an API call to the Google Static Maps service, to get a map.

I'm wondering if it's possible to draw a custom direction line between two geolocations. Currently, I'm drawing that line but it looks... ugly:

enter image description here

What I would like is a curved line, with a plane icon, just like this:

enter image description here

Is it possible?

Upvotes: 1

Views: 2185

Answers (1)

xomena
xomena

Reputation: 32198

Google Static Maps API allows to draw geodesic lines

geodesic: (optional) indicates that the requested path should be interpreted as a geodesic line that follows the curvature of the earth. When false, the path is rendered as a straight line in screen space. Defaults to false.

https://developers.google.com/maps/documentation/static-maps/intro#Paths

Add this option to your path parameter. Additionally you can add a custom plane icon that overlaps the geodesic path.

For example,

https://maps.googleapis.com/maps/api/staticmap?size=600x400&path=weight%3A5%7Ccolor%3A0x111111%7Cgeodesic%3Atrue%7CAmsterdam%7CTashkent&markers=icon%3Ahttps%3A%2F%2Fcdn0.iconfinder.com%2Fdata%2Ficons%2Fshopping-and-e-commerce-2%2F400%2FCargo_plane_icon-64.png%7C47.557774%2C43.044347&key=YOUR_API_KEY

Run the following code snippet to see it in action

<img src="https://maps.googleapis.com/maps/api/staticmap?size=600x400&path=weight%3A5%7Ccolor%3A0x111111%7Cgeodesic%3Atrue%7CAmsterdam%7CTashkent&markers=icon%3Ahttps%3A%2F%2Fcdn0.iconfinder.com%2Fdata%2Ficons%2Fshopping-and-e-commerce-2%2F400%2FCargo_plane_icon-64.png%7C47.557774%2C43.044347&key=AIzaSyDztlrk_3CnzGHo7CFvLFqE_2bUKEq1JEU&signature=Y-EtK76SDUyAao0uuGniNx3LhWs="
  title="sample geodesic path" />

I hope this helps!

Upvotes: 4

Related Questions