Drawing lines on a map between 2 points

ionic-v1
1

How would you draw a line between 2 points on a map?

Take this map as an example

Let’s say I want to draw a red line from the purple point to the red (coffee logo) point. How would you do that in Ionic?

2

I’m not sure why you chose Ionic to do this. Can you elaborate on why?

I think what you want to use is the Google Maps API and do something like this:
https://developers.google.com/maps/documentation/javascript/examples/polyline-simple

Which will allow you to specify coordinates on the map to draw lines to. You can also use Google Maps to specify the points you like you did in this image.

If you need to use this exact image for whatever reason, I would create a canvas element, overlay it on top of the image and then use the canvas lineTo method. But again, the Google Maps Api is probably what you are looking for.

Canvas lineTo method just in case:
http://www.html5canvastutorials.com/tutorials/html5-canvas-lines/

1 Like
3

The map (not the one in my first post, that’s just an example) is part of an app I’m making in Ionic that’s why. But thanks for suggesting the Google Maps API. I will look into that. :slight_smile:

4

Ok, then yep, I would go the route of the Google Maps API.

5

I’m looking for the same thing, I’m using ionic-native. From what i’ve seen so far, its not possible

6

Hey, sorry I’m just seeing this. What is not possible?

I found a better Google Maps plugin by the way.

I’m able to use native google maps for both Android and iOS. I’m currently using the 1.4 version, as I couldn’t get version 2 to work on iOS, but I believe its been fixed.

I have an app in production using Ionic V1 with this plugin. If you’d like to check it out to see how it functions, its called Possessions - Safe and Found, on both the app and play stores.