CODEWITHSUNDEEP
javascriptphpgoogle-maps
Ryan D
Ryan D

Reputation: 751

How to get current position using html geo location with google maps api

I have this script to display markers on a google map, which works great but now I want to get current position to zoom in on map initially..

<body onload="initCoords()">

function initCoords() {
    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(showPosition, showError);
    }
}

function showPosition(position) {
    var lat = position.coords.latitude;
    var long =  position.coords.longitude;
} // this gets the current location loaded when body loads //

How do I pass the lat and long into the map?

    function initMap() {
    var map = new google.maps.Map(document.getElementById('map'), {
      center: new google.maps.LatLng(lat, long),
      zoom: 12
    });

</body>

It throws lat and long are not defined.

Upvotes: 2

Views: 5580

Answers (2)

Iavor
Iavor

Reputation: 2077

If you are loading the Google Maps JS API script asynchronously like so:

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"
    async defer></script>

then the body onload event will occur and call initCoords() before the maps API has fully been loaded. This means that any code inside that function that is trying to access the maps API will not work.

One option is to listen to the tilesloaded event of the map object and run the zoom-in function when that event is fired the first time (which happens when the visible tiles have finished loading).

var map;
function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
      center: {lat: 40, lng: 20},
      zoom: 3
  });
  google.maps.event.addListenerOnce(map, 'tilesloaded', function() {
    map.setZoom(8); // call initCoords()
  });
}

I use addListenerOnce so that the map zooms in only after the first time the map's tiles have finished loading.

Here is a JSBin with this functionality.

Upvotes: 0

Professor Abronsius
Professor Abronsius

Reputation: 33813

In the callback showPosition call the setPosition method of the map. As you have declared map within the initMap function perhaps declare the other functions also within the body of initMap

function initMap() {
    lat=56;
    long=-2;
    var map = new google.maps.Map(document.getElementById('map'), {
      center: new google.maps.LatLng(lat, long),
      zoom: 12
    });

    var initCoords=function() {
        if ( navigator.geolocation ) {
            navigator.geolocation.getCurrentPosition(showPosition, showError);
        }
    }
    var showError=function(e){
        alert(e)
    };

    var showPosition=function( position ) {
        var lat = position.coords.latitude;
        var long =  position.coords.longitude;
        var latlng=new google.maps.LatLng(lat,long);
        map.setPosition( latlng );

        /* add marker?? */
    }


    /* other code ?.... */

}/* close function*/

Or, declare use the callback function to initialise the map

var map,lat,long;

function initMap() {
    var initCoords=function() {
        if ( navigator.geolocation ) {
            navigator.geolocation.getCurrentPosition(showPosition, showError);
        }
    }
    var showError=function(e){
        alert(e)
    };

    var showPosition=function( position ) {
        var lat = position.coords.latitude;
        var long =  position.coords.longitude;
        var latlng=new google.maps.LatLng(lat,long);

        var map = new google.maps.Map( document.getElementById('map'), {
            center: latlng,
            zoom: 12
        });
    }


    /* other code ?.... */

}/* close function*/

Upvotes: 4

Related Questions