Google Maps Clone Using Mapbox
Tags: javascript, webdev, googlemaps, programming
Published: 2022-04-23 18:26:16

It is a mapping and location cloud platform for developers 

It has the best customization feature and at the same time very easy to Integrate to your project

So going with either of the choice will be your first step toward integrating map in your project
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/86ivoo9liq4d3fsr38ux.png)
 
In this tutorial I have added mapbox CDN to the HTML file

When you will go to the next step you will be given a code asking you to add it to your body of HTML file as soon as you add this following code to the body of your code map will be integrated to your project

```
<div id='map' style='width: 400px; height: 300px;'></div>
<script>
  mapboxgl.accessToken = 'PRIVATE_KEY';
  var map = new mapboxgl.Map({
    container: 'map',
    style: 'mapbox://styles/mapbox/streets-v11'
  });
</script>
```
Access Token is the private key generated for the user as soon as you register your account in the mapbox

When you will go live you will be able to see the following output
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1xjvswmnzkh4ja2duulr.png)

 ### Let’s make a simple project using mapbox

In order to make Google map clone we will have to manipulate the basic code firstly will obtain the user location and for that purpose will be using `navigator.geolocation` it return a geolocation object that gives web content  access to the location. 

moving further to get the current location  of the user will be using `navigator.geolocation.getCurrentPosition`

```
navigator.geolocation.getCurrentPosition(success, error, [options])
```
getCurrentPosition takes three argument first is success  it takes position as an argument and if everything goes well it return the location , error is used to return the default location and in options we can add more parameters to make amendments in the location.

Now our `app.js` will look like this

```
mapboxgl.accessToken = 'PRIVATE_KEY';

  navigator.geolocation.getCurrentPosition(succeslocation,errorlocation,{
    enableHighAccuracy:true
})

function succeslocation(position){
    console.log(position)
    
}
function errorlocation(){

}
function setupmap(){
var map = new mapboxgl.Map({
    container: 'map',
    style: 'mapbox://styles/mapbox/streets-v11',
    zoom:15
})
}

```
In console will get the position object from which we can uproot the value of longitude and latitude of the user’s location

In order to pass the value of longitude and latitude will have to add  another key-value pair of center in the map object of mapbox .

```
 mapboxgl.accessToken = 'PRIVATE_KEY';

  navigator.geolocation.getCurrentPosition(succeslocation,errorlocation,{
    enableHighAccuracy:true
})

function succeslocation(position){
    console.log(position)
    setupmap([position.coords.longitude,position.coords.latitude])
}
function errorlocation(){
setupmap([77.20,28.708])
}
function setupmap(center){
var map = new mapboxgl.Map({
    container: 'map',
    style: 'mapbox://styles/mapbox/streets-v11',
    center:center,
    zoom:15
})
}
```
> **One thing to notice is that mapbox take longitude argument first instead of latitude**
> 

we can also observe that default value of longitude and latitude is provided in error function , with this as soon as you load your map you will be on your current location.  

Moving further mapbox provides many feature so in case if you want to add  navigation control you can just use `addControl` function with `NavigationControl` , below down the syntax and output for the same is shown 

```jsx
map.addControl(new mapboxgl.NavigationControl());
```
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cf8bf5j0j53ofkw5ks0m.png)

Last but not the least will be adding  direction control on the map in order to achieve that will have to use `addcontrol` with `MapboxDirection`  below down the syntax and output for the same is shown 

```
map.addControl(
    new MapboxDirections({
    accessToken: mapboxgl.accessToken
    }),
    'top-left'
    );

}
```
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/s6phny8a5apkj2feypff.png)