0

So I have been trying to make an async map of the current area appear in the browser, but I ran into some problems. One of them is totally absurd. document.getElementById return undefined or null. Secondly navigator.geolocation.getCurrentLocation() does not place any value in my variable. The weird thing is that it works in the console of the browser but it never displays the map. This is my code:

var mapDiv = document.getElementById("map");
var p = document.getElementById("msg");
var coordsObj;

var promise = new Promise((resolve, reject) => {
    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(location => {
            coordsObj = {
                latitude: location.coords.latitude,
                longitude: location.coords.longitude
            };
        });
        resolve(coordsObj);
    }
    else {
        reject("Please update your browser to support location.");
    }
});

promise.then(value => {
    showPosition(value);
},
    value => {
        p.innerHTML = value;
    });

function showPosition(position) {
    var latLonString = position.latitude + "," + position.longitude;

    var imgHref = "https://maps.googleapis.com/maps/api/staticmap?center="
        + latLonString + "&zoom=14&size=400x300&sensor=false&key=AIzaSyDCIONKZUw8jsxtdS_ISoZe6tGZOtEwdWY";
    mapDiv.innerHTML = "<img src='" + imgHref + "'>";
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDCIONKZUw8jsxtdS_ISoZe6tGZOtEwdWY&callback=initMap"
     type="text/javascript"></script>
    <script src="./task 1.js"></script>
</head>
<body>
    <p id="msg"></p>
    <div id="map"></div>
</body>
</html>

Edited: 

var promise = new Promise((resolve, reject) => {
    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(location => {
            coordsObj = {
                latitude: location.coords.latitude,
                longitude: location.coords.longitude
            };
            resolve(coordsObj);
        }, reject("Please update your browser to support location."));    
    }
});
Ivelin Dinev
  • 51
  • 2
  • 8
  • The call to `resolve(coordsObj);` should be **inside** the `getCurrentPosition` callback, not after the `getCurrentPosition` call. You're also never settling your promise if geolocation fails -- pass `reject` as the second argument to `getCurrentPosition`. – T.J. Crowder Apr 14 '17 at 09:31
  • I edited my post with the new code, if I set the second parameter to the getCurrentPosition with reject, it always fails. But not it says my mapDiv is undefined. I get cannot set innerHTML of null? – Ivelin Dinev Apr 14 '17 at 10:04
  • Okay so I fixed that, now my last problem is that when I delete the reject part of the edited code, everything works great but if I put it back on the promises fails. – Ivelin Dinev Apr 14 '17 at 10:19
  • You're **calling** reject and passing its *result* into `getCurrentPosition`. I said pass in `reject`, not the result of calling it. Literally: `}, reject);` Also, you don't want to remove your `else` that calls `reject` when geolocation isn't supported. – T.J. Crowder Apr 14 '17 at 10:35
  • So I can pass reject multiple times? One more thing if I pass reject only to the `getGurrentPossition`, where do I define what it does? – Ivelin Dinev Apr 14 '17 at 10:46
  • My point is to make my reject execute something like: `function mapError(error) { switch (error.code) { case error.PERMISSION_DENIED: p.innerHTML = "Grant permission to get the location!"; break; case error.POSITION_UNAVAILABLE: p.innerHTML = "Unavaillable!"; break; case error.TIMEOUT: p.innerHTML = "The code took too much time to process!"; break; } }` – Ivelin Dinev Apr 14 '17 at 10:50
  • You can pass around the `reject` function as much as you like; you can even call it more than once if you want, but only the first call will do anything. This should get you started: https://pastebin.com/Y3WPQ6s8 – T.J. Crowder Apr 14 '17 at 11:26
  • As for "getElementById - WHEN is it called? Is the page with the element generated yet, or is it called immediately, as loads, and before renders and the element "map" is created? Usually these things need to be deferred until DOM tree is ready. – SF. Apr 14 '17 at 12:08

0 Answers0