CODEWITHSUNDEEP
javascriptapigoogle-maps
user1749428
user1749428

Reputation: 123

Setting a marker at users current position with Google Maps API?

I want to set a marker at the users current position in the following script.

Can anyone supply me with the right code, that actually works with this script?

I have tried some from the Google documentation, without any luck.

THANKS 

    <html>
    <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
    <script type="text/javascript">

    var showPosition = function (position) {
    var userLatLng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
    // Do whatever you want with userLatLng.
    }

    navigator.geolocation.getCurrentPosition(showPosition); 

    var directionDisplay;
    var map;


function initialize() {
    directionsDisplay = new google.maps.DirectionsRenderer();
    var copenhagen = new google.maps.LatLng(55.6771, 12.5704);
    var myOptions = {
        zoom:12,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        center: copenhagen
    }

    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
    directionsDisplay.setMap(map);
    }


    var directionsService = new google.maps.DirectionsService();



    function calcRoute() {
    var start = document.getElementById("start").value;
    var end = document.getElementById("end").value;
    var distanceInput = document.getElementById("distance");

    var request = {
        origin:start,
        destination:end,
        travelMode: google.maps.DirectionsTravelMode.DRIVING
    };

    directionsService.route(request, function(response, status) {
        if (status == google.maps.DirectionsStatus.OK) {
            directionsDisplay.setDirections(response);
            distanceInput.value = response.routes[0].legs[0].distance.value / 1000;
        }
    });
    }


    </script>

    <title>Distance Calculator</title>

    <style type="text/css">

            body {
                font-family:Helvetica, Arial;
            }
            #map_canvas {
                height: 50%;
            }
    </style>
    </head>
    <body>

    <body onload="initialize()">
    <p>Enter your location and desired destination to calculate the distance</p>
        <div>
            <p>
                <label for="start">Start: </label>
                <input type="text" name="start" id="start" /><br />

                <label for="end">End:</label>
                <input type="text" name="end" id="end" /><br />

                <input type="submit" value="Calculate Route" onclick="calcRoute()" />
            </p>
            <p>
                <label for="distance">Distance (km): </label>
                <input type="text" name="distance" id="distance" readonly="true" />
            </p>
        </div>
        <div id="map_canvas"></div>
    </body>
</html>

Upvotes: 1

Views: 9826

Answers (2)

Tom G
Tom G

Reputation: 3650

You can get the user's location(approximate) from their IP address. Check out these resources:

http://www.geoplugin.net/php.gp

http://isithackday.com/hacks/geo/yql-geo-library/

http://www.maxmind.com/app/geolitecity (Downloadable database)

Once you get the latitude and longitude from one of the above sites,

var location = new google.maps.LatLng(40.779502, -73.967857);
marker = new google.maps.Marker({
        position: location,
        map: map
    });

Upvotes: 1

JasonWyatt
JasonWyatt

Reputation: 5303

You can use the geolocation capability in HTML5 like you had attempted to, but you need to make sure that you don't ask for the geolocation before the map is initialized. So, move your call to navigator.geolocation.getCurrentPosition(showPosition); to the end of your initialize() function.

Also, you'll need to create a new marker for the user's position, and assign the map to that marker:

var showPosition = function (position) {
    var userLatLng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
    // Do whatever you want with userLatLng.
    var marker = new google.maps.Marker({
        position: userLatLng,
        title: 'Your Location',
        map: map
    });
}

Upvotes: 1

Related Questions