Question

I want Step by Step navigation by using GPS with google Maps and how to achieve that one.

Any help really appreciated

Thank you

Was it helpful?

Solution

you need a google API Services and they provide full Route path when you give Startpoint and Destination point and call the api with the following

http://maps.google.com/maps/api/directions/json?sensor=true&origin=23.027439,72.523089&destination=23.029108,72.507570

here my startingpoint is origin=23.027439,72.523089 and destintaion is destination=23.029108,72.507570

so now google will provide following data

{
   "routes" : [
      {
         "bounds" : {
            "northeast" : {
               "lat" : 23.0296906,
               "lng" : 72.5234184
            },
            "southwest" : {
               "lat" : 23.026354,
               "lng" : 72.50715599999999
            }
         },
         "copyrights" : "Map data ©2014 Google",
         "legs" : [
            {
               "distance" : {
                  "text" : "2.2 km",
                  "value" : 2249
               },
               "duration" : {
                  "text" : "5 mins",
                  "value" : 325
               },
               "end_address" : "Sarkhej - Gandhinagar Highway, Satellite, Ahmedabad, Gujarat 380054, India",
               "end_location" : {
                  "lat" : 23.0290924,
                  "lng" : 72.5076297
               },
               "start_address" : "38, Indus Park, Satellite, Ahmedabad, Gujarat 380015, India",
               "start_location" : {
                  "lat" : 23.027439,
                  "lng" : 72.5230894
               },
               "steps" : [
                  {
                     "distance" : {
                        "text" : "68 m",
                        "value" : 68
                     },
                     "duration" : {
                        "text" : "1 min",
                        "value" : 24
                     },
                     "end_location" : {
                        "lat" : 23.0269233,
                        "lng" : 72.5227287
                     },
                     "html_instructions" : "Head \u003cb\u003esouthwest\u003c/b\u003e toward \u003cb\u003eSatellite Rd\u003c/b\u003e",
                     "polyline" : {
                        "points" : "oppkCitsyLXPJFh@\\VN"
                     },
                     "start_location" : {
                        "lat" : 23.027439,
                        "lng" : 72.5230894
                     },
                     "travel_mode" : "DRIVING"
                  },
                  {
                     "distance" : {
                        "text" : "85 m",
                        "value" : 85
                     },
                     "duration" : {
                        "text" : "1 min",
                        "value" : 30
                     },
                     "end_location" : {
                        "lat" : 23.0265039,
                        "lng" : 72.5234184
                     },
                     "html_instructions" : "Turn \u003cb\u003eleft\u003c/b\u003e onto \u003cb\u003eSatellite Rd\u003c/b\u003e\u003cdiv style=\"font-size:0.9em\"\u003ePass by Hanuman Mandir (on the left)\u003c/div\u003e",
                     "maneuver" : "turn-left",
                     "polyline" : {
                        "points" : "gmpkCarsyLVa@`@u@Pc@FM"
                     },
                     "start_location" : {
                        "lat" : 23.0269233,
                        "lng" : 72.5227287
                     },
                     "travel_mode" : "DRIVING"
                  },

you have to understand the documentation for using google direction services for that here is the link https://developers.google.com/maps/documentation/javascript/directions.

here is a simple logic you can use after that.

what you have to do is to store this steps dictionaryArray in array and then try to fetch it one by one. Check didUpdateToLocation method for current Lat Long and if your current location is near by the vlaue of step Dcitionay's endLocation point and if its near by then you can alert the message of html_instructions Value that which direction user has to go next and increase your index for steps array dictionary and same do it for the last index of steps.

if need any help feel free to ask.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top