Skip to main content

Switch from Google Maps to Mapbox

13 mins remaining
13 mins remaining
Switch from Google Maps to Mapbox
Intermediate
codeJavaScript
Prerequisite
Familiarity with front-end development concepts.

Are you using Google Maps and want to switch to Mapbox? You’ve come to the right place! This tutorial shows you how to use the Mapbox GL JS JavaScript library to create a web map, add a marker to the map, and attach a popup to the marker using methods like those that the Google Maps JavaScript API uses.

Getting started​

This guide assumes that you are already familiar with the Google Maps JavaScript API V3 and with front-end web development concepts including HTML, CSS, and JavaScript.

To complete this tutorial, you will need:

  • A Mapbox access token. Your Mapbox access tokens are on the Access Token page of your Developer Console.
  • Mapbox GL JS. Mapbox GL JS is a JavaScript API for building web maps.
  • A text editor. Use the text editor of your choice for writing HTML, CSS, and JavaScript.

Create a webpage​

  1. Open your text editor and create a new file called index.html.
  2. Paste the following code into the file to set up the framework for a webpage with a map.
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Switch to Mapbox</title>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    {/* Import Mapbox GL JS */}
    <script src="https://api.tiles.mapbox.com/mapbox-gl-js/v3.3.0/mapbox-gl.js"></script>
    <link
      href="https://api.tiles.mapbox.com/mapbox-gl-js/v3.3.0/mapbox-gl.css"
      rel="stylesheet"
    />

    <style>
      body {
        margin: 0;
        padding: 0;
      }

      #map {
        position: absolute;
        top: 0;
        bottom: 0;
        width: 100%;
      }
    </style>
  </head>

  <body>
    {/* Create a container for the map. */}
    <div id="map"></div>

    <script>
      // Add your Mapbox access token.
      mapboxgl.accessToken = 'YOUR_MAPBOX_ACCESS_TOKEN ';

      // Code from the next step will go here.
    </script>
  </body>
</html>

This code imports the Mapbox GL JS JavaScript library and CSS file so your map can use Mapbox GL JS functionality and styles. It also creates a <div> element with an id of 'map' that will be the map's container.

Set your access token​

  1. Find mapboxgl.accessToken in the code and set its value to your own Mapbox access token, as described in Getting started. Using your access token associates your new map with your Mapbox account.

  2. Save your HTML file.

Initialize a web map​

In this step, you will initialize a map on your webpage.

Google​

With the Google Maps JavaScript API, you initialize a new map like this:

const map = new google.maps.Map(document.getElementById('map'), {
  mapTypeId: 'roadmap',
  center: { lat: 64.1436456, lng: -21.9270884 },
  zoom: 13
});

Mapbox GL JS​

With Mapbox GL JS, you can initialize a map in a similar way.

  1. Add the following code to your index.html file inside the <script> tags, after mapboxgl.accessToken:
const map = new mapboxgl.Map({
  container: 'map', // HTML container ID
  style: 'mapbox://styles/mapbox/streets-v12', // style URL
  center: [-21.9270884, 64.1436456], // starting position [lng, lat]
  zoom: 13 // starting zoom
});

The code above creates and initializes a new map:

  • The container option specifies an HTML element to contain the map.
  • The style option uses the style URL for Mapbox Streets to set the style property for the map. You can use a custom style created with Mapbox Studio, or you can change your map's style dynamically in the browser at runtime, depending on your needs.
  • The center and zoom properties specify the map's starting position and zoom level.
  1. Save your HTML file and open it in a web browser to see your rendered map.

Add a marker​

Now you're ready to add a single marker to your map.

Google​

With the Google Maps JavaScript API, you can add a marker to a map as shown below:

const map = new google.maps.Map(document.getElementById('map'), {
  mapTypeId: 'roadmap',
  center: { lat: 64.1436456, lng: -21.9270884 },
  zoom: 13
});

const marker = new google.maps.Marker({
  position: { lat: 64.1436456, lng: -21.9270884 },
  title: 'Reykjavik Roasters - Coffee Shop',
  map: map
});

Mapbox GL JS​

  1. Add the following code to the bottom of your JavaScript, before the closing <script> tag:
const marker = new mapboxgl.Marker()
  .setLngLat([-21.9270884, 64.1436456])
  .addTo(map);

This code uses the default Marker method to create a new marker:

  • It uses the setLngLat() method to specify coordinates for where the marker will appear.
  • It uses the addTo() method to add the marker to the map.
Learn more about marker methods

There are many different ways to add markers to a Mapbox GL JS map. For example, you can also attach markers to a set of points by loading a GeoJSON source or a vector tileset source. See our Add markers getting started guide for more information on adding markers to a map.

  1. Save your changes and refresh the page in your browser to see a blue marker on your map.

Add interactivity​

Now you will add a popup that displays information about a location when a user clicks on a marker.

Google​

In the Google Maps JavaScript API, an interactive popup is called an InfoWindow and you add one like this:

const map = new google.maps.Map(document.getElementById('map'), {
  mapTypeId: 'roadmap',
  center: { lat: 64.14356426, lng: -21.92661562 },
  zoom: 13
});

const marker = new google.maps.Marker({
  position: { lat: 64.14356426, lng: -21.92661562 },
  map: map
});

const infowindow = new google.maps.InfoWindow({
  content: `<h3>Reykjavik Roasters</h3><p>A good coffee shop</p>`
});

marker.addListener('click', () => {
  infowindow.open(map, marker);
});

Mapbox GL JS​

In Mapbox GL JS, you can attach a Popup directly to the marker and it will automatically appear when the marker is clicked. You do not need to add an event listener.

  1. Add the following code to your JavaScript, replacing your existing marker declaration with this new one.
const popup = new mapboxgl.Popup().setHTML(
  `<h3>Reykjavik Roasters</h3><p>A good coffee shop</p>`
);

const marker = new mapboxgl.Marker()
  .setLngLat([-21.92661562, 64.14356426])
  .setPopup(popup)
  .addTo(map);
  • This code creates a new Popup object populates it with some HTML content about a coffee shop.
  • Then it adds .setPopup() to the marker declaration to attach the popup to the marker.
  1. Save your changes and refresh the page in your browser. When you click on the blue marker, you will see the popup populated with the content that you added using setHTML().

Final product​

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Demo: Switch from Google Maps to Mapbox</title>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <script src="https://api.tiles.mapbox.com/mapbox-gl-js/v3.3.0/mapbox-gl.js"></script>
    <link
      href="https://api.tiles.mapbox.com/mapbox-gl-js/v3.3.0/mapbox-gl.css"
      rel="stylesheet"
    />
    <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 = '{{MAPBOX_ACCESS_TOKEN}}';

      const map = new mapboxgl.Map({
        container: 'map', // HTML container id
        style: 'mapbox://styles/mapbox/streets-v12', // style URL
        center: [-21.92661562, 64.14356426], // starting position as [lng, lat]
        zoom: 13
      });

      const popup = new mapboxgl.Popup().setHTML(
        `<h3>Reykjavik Roasters</h3><p>A good coffee shop</p>`
      );

      const marker = new mapboxgl.Marker()
        .setLngLat([-21.92661562, 64.14356426])
        .setPopup(popup)
        .addTo(map);
    </script>
  </body>
</html>

Next steps​

Congratulations! You have used Mapbox GL JS to make a web map with a marker and a popup!

What we covered​

Now that you have switched from Google Maps to Mapbox and made your first map with Mapbox GL JS, explore our other Mapbox GL JS tutorials for more ways to build on your map:

Learn more by checking out the Mapbox GL JS documentation and examples!

Was this tutorial helpful?