function geoFindMe() { var output = document.getElementById("out"); if (!navigator.geolocation){ output.innerHTML = "<p>Geolocation is not supported by your browser</p>"; return; } function success(position) { var latitude = position.coords.latitude; var longitude = position.coords.longitude; output.innerHTML = '<p>Latitude is ' + latitude + '° <br>Longitude is ' + longitude + '°</p>'; var img = new Image(); img.src = "https://maps.googleapis.com/maps/api/staticmap?center=" + latitude + "," + longitude + "&zoom=13&size=300x300&sensor=false"; output.appendChild(img); }; function error() { output.innerHTML = "Unable to retrieve your location"; }; output.innerHTML = "<p>Locating…</p>"; navigator.geolocation.getCurrentPosition(success, error); }
<!-- Learn about this code on MDN: https://developer.mozilla.org/en-US/docs/Web/API/Geolocation/Using_geolocation --> <p><button onclick="geoFindMe()">Show my location</button></p> <div id="out"></div>
body { padding: 20px; background-color:#4885ed } p { margin : 0; color: white; padding: 2% 2%; } img { width: 700px; height: 500px }