Google maps API - Center map on client's current location

I've looked at the various other times this question has been asked but I can't quite put a finger on where I'm going wrong, here's my code:

<html>
<head>
    <title> Map </title>
    <style>
        html, body, #map-canvas {
        margin: 0;
        padding: 0;
        height: 500px;
        width: 800px;}
    </style>
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
    <script>
        var map;
        function initialize()
        {
            var myLatlng1 = new google.maps.LatLng(53.65914, 0.072050);

            var mapOptions = 
            {
                zoom: 10,
                center: myLatlng1,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            var map = new google.maps.Map(document.getElementById('map-canvas'),
            mapOptions);


            <?php
                $sql = mysql_query("SELECT * FROM data ORDER BY ID DESC");
                while($row =mysql_fetch_array($sql))
                {
                    $desc = $row['DESCRIPTION'];
                    $location = $row['LOCATION'];
                    $counter += 1; 
                ?>

            var marker = new google.maps.Marker({
                position: new google.maps.LatLng(<?php echo $location; ?>),
                map: map,
                title: '<?php echo $desc; ?>',
                icon: '/image/cam.png'
            });

           navigator.geolocation.getCurrentPosition(showPosition);  
        }

        var showPosition = function (position) 
           {
               map.setCenter(new google.maps.LatLng(position.coords.latitude, position.coords.longitude), 16);

           }

        google.maps.event.addDomListener(window, 'load', initialize);

    </script>
</head>

It originally sets the center to myLatlng1, and the code at the bottom to set it to the user's current location doesn't do anything, any ideas?

Thanks in advance.

Praveen

Try using the below code to get the user's current location (GEOLOCATION):

 if (navigator.geolocation) {
     navigator.geolocation.getCurrentPosition(function (position) {
         initialLocation = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
         map.setCenter(initialLocation);
     });
 }

For showing an example, I've removed your php code. Check this JSFiddle

Hope you understand.

To provide a useful map whether user allowed or denied the browser's "Allow location detection?" prompt (modify the default location to suit):

<script>
  function initMap() {

  gMap = new google.maps.Map(document.getElementById('map'));

  navigator.geolocation.getCurrentPosition(function(position) {
    // Center on user's current location if geolocation prompt allowed
    var initialLocation = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
    gMap.setCenter(initialLocation);
    gMap.setZoom(13);
  }, function(positionError) {
    // User denied geolocation prompt - default to Chicago
    gMap.setCenter(new google.maps.LatLng(39.8097343, -98.5556199));
    gMap.setZoom(5);
  });
}
</script>

来源：https://stackoverflow.com/questions/17382128/google-maps-api-center-map-on-clients-current-location

标签

javascript

google-maps

geolocation