Adding location picker of mapbox in html

Viewed 372

I want to add a map in my html website where by default user current location will be shown on the map. But user can adjust its location on map.

Here is the code :-

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Locate the user</title>
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
<link href="https://api.mapbox.com/mapbox-gl-js/v2.2.0/mapbox-gl.css" rel="stylesheet">
<script src="https://api.mapbox.com/mapbox-gl-js/v2.2.0/mapbox-gl.js"></script>
<style>
body { margin: 0; padding: 0; }
#map { position: absolute; top: 0; bottom: 0; width: 100%; }
</style>
</head>
 <body>
<div id="map"></div>
<script>
    mapboxgl.accessToken = 'pk.eyJ1IjoicmVldDA3IiwiYSI6ImNrZnhwd2k4NTJxcjIyeXBhdmlhZXViMGkifQ.RpDVVS8IaoOn3srMpLmS8w';
var map = new mapboxgl.Map({
    container: 'map', // container id
    style: 'mapbox://styles/mapbox/streets-v11',
    center: [-96, 37.8], // starting position
    zoom: 3 // starting zoom
});

// Add geolocate control to the map.
map.addControl(
    new mapboxgl.GeolocateControl({
        positionOptions: {
            enableHighAccuracy: true
        },

        trackUserLocation: true
     })
  );
 </script>
 </body>
 </html>

I am getting my current location through it. But I am not finding how to adjust our location on this.

1 Answers

Here is a guide by Business Insider: I find it beneficial for embedding Google Maps into an HTML5 website.

https://www.businessinsider.com/how-to-embed-google-map

It tells you the easy way to do it, without adding script. You should be able to do all of the things that you are trying to do with the IFRAME tag for embedding the map.

Related