CODEWITHSUNDEEP
javascriptjqueryhtmlgoogle-mapsgeolocation
XT_Nova
XT_Nova

Reputation: 1170

How can i apply geolocation coordinates to get directions to a specific place from googlemaps?

Happy easter everyone!

I am trying to learn some more about geolocation within html5. I am using geoPosition.js from estebanav @ github. (Followed phpacademy's tutorial on this)

I am so far able to get a potential user's coordinates (which i am alerting out) using this code:

<!DOCTYPE html>
<html>
    <head>
        <meta charset=utf-8>
        <title>Test</title>
    </head>
    <body>

        <a href="#" id="get_location">Get location</a>
        <div id="map">
            <iframe id="google_map" width="450" height="500" 
                    framehold="0" scrolling="no" marginheight="0" marginwidth="0"
                    src="https://maps.google.se?output=embed"></iframe>
        </div>


        <script src="js/geoPosition.js"></script>
        <script>

        document.getElementById('get_location').onclick = function() {
            var success = function(pos) {
                var lat     = pos.coords.latitude,
                    long    = pos.coords.longitude,
                    coords  = lat + ',' + long;

                alert(coords);
            }

            var error = function() {
                alert('Geolocation not supported...');
            }

            if (geoPosition.init()) {
                geoPosition.getCurrentPosition(success, error);
            }

            return false;
        }
        </script>
    </body>
</html>

I would really much, learn now how to take these coordinates and use them as a starting point for directions.

For example: Lets say my generated coordinates, the variable coords, is the position (58.408221,15.564322) and i have a goal-point, for example a variable goal_point, with it's coordinates of (58.418954, 15.600543), how can i now use these coordinates to display the directions on my map, like google maps would?

Any help or valueble links regarding this would be appreciated! /Bill

Upvotes: 0

Views: 431

Answers (1)

keune
keune

Reputation: 5795

First of all, you'll need to start using Google Maps api instead of an iframe.

Start here to learn how to display a basic map with Maps Api v3.

After implementing a basic map, you can use Google Directions Service to display a route between two points. The documentation is here.

Upvotes: 2

Related Questions