I am trying to implement an interface like below with jQuery/JS and Laravel PHP framework. Could anyone help me to figure out the following questions I have?
How to make the markers draggable and on marker release get the
lat/lon?
How can I show the real path between point 1 & 2 (like the blue line. when I change the marker a new line will be drawn based on the shortest distance)?
If there are multiple markers connecting to each others like below, how can I get the optimise route?
For markers are connecting to each others.
This is the optimise route to visit all 4 markers (shortest path to visit)
Is there an open source project similar to this? (like jQuery calendar)
If you know any resources/plugins related to achieving something like this please comment below.
Draggable markers on Google Map - search for "Make a marker draggable":
https://developers.google.com/maps/documentation/javascript/markers
Planning route from point A to point B based on road map. You can use Directions API:
https://developers.google.com/maps/documentation/directions/intro
Related
I'm currently trying to create an app to help route users while they're inside an enclosed location like a mall or a school. I've built up a framework to generate maps of these locations and exported them as images. I was planning on using these images as the map to display on the frontend to somehow draw routes on the images to guide the user. I just can't think of a simple way to do this.
I've seen react-native-maps but that just seems to use the standard Google maps view and doesn't let me use a custom map to draw routes on. Is there any way to accomplish this?
Depending on what level of detail you want, you might be able to do this with an overlay or custom map tiles.
You can overlay your map over google maps using the overlay layer on react-native-maps. If this amount of detail is not enough, you could try creating a tile server to get images or use vector tiles with MapBox maps(which also has some nice react-native bindings).
As for drawing routes, it should be straightforward by using a poly line layer. You'll have to calculate the paths beforehand and draw them using a poly line.
I am having trouble finding a way to add a marker to google maps in my Ionic 2 application. I basically want to add a marker to google maps which is set to the center of the map by default when a user opens the application like Uber. Also if a user chooses to drag the map and look around, it sets the coordinates to the users current position just like Uber. I have tried researching on this but I didn't find any tutorial or documentation on how to to do it. I am using ionic 2 for my application with Angular2. Any help would be appreciated. Thanks a lot!
I have a list of lat,lon coordinates as result of tracking a bus. I'm showing the route using PolyLine to create a line to connect "the dots" but because of the accuracy these dots aren't exactly by the street, and when you zoom in it is more obvious.
What can I do to show the route by the street?
This is what I have right now (There are 2 lines because the bus did 2 turns. It won't show like this in the final product)
And this is what I need.
Thanks for your help.
I would suggest reducing the polylines to the minimum number of waypoints required to make the DirectionsServide create the same route.
example from this similar question
example using coordinates rather than addresses
Search for 'snap polyline to road using google maps api v3' for similar discussions.
There doesn't appear to be a straightforward API service to do this and you would need to reduce your route to significant changes in direction rather than every wiggle.
You might add a star to the issue in the 'Google Maps API bug reports and feature requests' database
http://code.google.com/p/gmaps-api-issues/issues/detail?id=3824
and possibly add a new issue since your problem is somewhat different
Is it possible to draw routes with google maps or any other map api? Like when you're looking for direction from point a to point b on google map with Get Directions button.
I'd like to draw a line that follows certain road but without the directions I don't need those. And if I can draw multiple lines between multiple points on the map that would be awesome.
Has anyone had experience with this before?
You can either use the Directions API or, if you really prefer to ignore the directions Google generates, you can use the maps API drawing functions to draw your own lines on the map.
You can also employ "drawing library"
https://developers.google.com/maps/documentation/javascript/drawing
But,this experimental tool cant specify colors nor line-thick via GUI.
My enhanced example is at:
http://members.jcom.home.ne.jp/tcltk-d/ge-navi.html
(select "Drawing" view to draw)
How can I highlight/cover a region or multiple regions with different colors (for example 3 US states), using google maps polygon arrays?
I found a tuto on google code about how to draw a polygon but it's not giving detailed information.
Thank you for your help.
This documentation on Google is about as straight forward as you can get.
http://code.google.com/apis/maps/documentation/javascript/overlays.html
View the source of this page. Copy and paste the code into your own page and start from there.
http://code.google.com/apis/maps/documentation/javascript/examples/polygon-simple.html
In the example above you simply need to make more than one instance of bermudaTriangle and name it something else and add it to the map.