Question: 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.

Answer: 
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*/

```
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](http://jsbin.com/movetov/1/edit?js,output) with this functionality.