Home/ Questions/Q 8696565
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-13T01:18:11+00:00

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

  • 0

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>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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
    });
}
    • 0