enable location access, google maps, embed google map in html, how to add map in html, load maps in browser, How to enable location access in desktop

How to enable location access in desktop

Mostly we do come across applications that require us to turn location on so that they can work as they are programmed. For example, taxi booking applications or delivery applications cannot work when the location is not enabled. They require the enable location feature so that they can collect your coordinates which they will use to calculate the distance to cover when they want to locate you.

Rarely while using your desktop computer you may load a website link and the enable location popup is displayed in your browser. The enable location access is available in the desktop version. Therefore, in this article, I will show you how to enable location access on the map using a desktop so that you can collect the longitude and latitude of a user so that if your application requires to identify the user’s location, the process can be complete without much hustle.

To begin,

  • We need to load the map by defining the div where our map will load.
<div id="mapid" style="width: 100%; height: 600px; margin-top: 2%"></div>
  • In the head section, we will include the stylesheet and script that supports map loading in a webpage

<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ==" crossorigin=""/>

    <script src="https://unpkg.com/[email protected]/dist/leaflet.js" integrity="sha512-gZwIG9x3wUXg2hdXF6+rVkLF/0Vi9U8D2Ntg4Ga5I5BZpVkVxlJWbSQtXPSiUTtC0TjtGOmxa1AJPuV0CPthew==" crossorigin=""></script>

  • We check whether our browser supports geolocation, if it does not we display an error message to the user stating that he cannot use maps in his browser. Add the script below at the bottom of your page.

<script>

getLocation()

function getLocation() {

  if (navigator.geolocation) {

 navigator.geolocation.getCurrentPosition(showPosition);

     } else {

alert("maps not supported in your browser")

  }

}

</script>

  • Next, we will load the map with a default cursor location pointing to your current location. This is made possible from the above script where after checking the accessibility of geolocation we collected the current location and this is what we will use in this step. Below the above script add this script of loading the map with the default cursor pointing in your current location.

<script>

function showPosition(position) {

    var longitude=position.coords.longitude

    var latitude=position.coords.latitude

 var mymap = L.map('mapid').setView([latitude, longitude], 13);

    L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {

        maxZoom: 18,

        attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, ' +

            '<a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +

            'Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',

        id: 'mapbox/streets-v11',

        tileSize: 512,

        zoomOffset: -1

    }).addTo(mymap);

   L.marker([latitude, longitude]).addTo(mymap);

}

</script>

  • So far, if you save your file and load your file in the browser, you will notice a popup asking you to allow your website to know your location. Click allow

How to enable location access in desktop

  • Once you click allow, your map will be loaded with a cursor pointing at your current location

How to enable location access in desktop

  • Next, we will now get the coordinates of a location we choose by clicking on the map.
  • You will need to define an input where your coordinates will be hold after you select a location from the map.

<input type="text" class="form-control" id="coordinates" name="">

  • Next we will define the click activity after in the map by adding this script inside the show position function from our previous script.

var popup = L.popup();

    function onMapClick(e) {

        popup

            .setLatLng(e.latlng)

            .setContent("You clicked the map at " + e.latlng.toString())

            .openOn(mymap);

            $("#coordinates").val(e.latlng.toString())

    }

 

    mymap.on('click', onMapClick);

 

The full code which will load the map and allow location access will be as below

<html>

    <head>

        <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ==" crossorigin=""/>

    <script src="https://unpkg.com/[email protected]/dist/leaflet.js" integrity="sha512-gZwIG9x3wUXg2hdXF6+rVkLF/0Vi9U8D2Ntg4Ga5I5BZpVkVxlJWbSQtXPSiUTtC0TjtGOmxa1AJPuV0CPthew==" crossorigin=""></script>

    </head>

    <body>

        <p>Map</p>

        <div id="mapid" style="width: 60%; height: 400px; margin-top: 2%"></div>

        <br>

        <input type="text" class="form-control" id="coordinates" name="">

        <script>

getLocation()

function getLocation() {

  if (navigator.geolocation) {

    navigator.geolocation.getCurrentPosition(showPosition);

  } else {

  }

}

   

function showPosition(position) {

    var longitude=position.coords.longitude

    var latitude=position.coords.latitude

 var mymap = L.map('mapid').setView([latitude, longitude], 13);

L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {

        maxZoom: 18,

        attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, ' +

            '<a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +

            'Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',

        id: 'mapbox/streets-v11',

        tileSize: 512,

        zoomOffset: -1

    }).addTo(mymap);

 

    L.marker([latitude, longitude]).addTo(mymap);

var popup = L.popup();

 

    function onMapClick(e) {

        popup

            .setLatLng(e.latlng)

            .setContent("You clicked the map at " + e.latlng.toString())

            .openOn(mymap);

            $("#coordinates").val(e.latlng.toString())

    }

 

    mymap.on('click', onMapClick);

}

</script>

    </body>

</html>