> For the complete documentation index, see [llms.txt](https://docs.mapbox.com/help/ja/llms.txt)
# Switch from Google Maps JavaScript API to Mapbox GL JS
Are you using the **Google Maps JavaScript API** and want to switch to **Mapbox GL JS**? This tutorial walks you through the core mapping concepts side by side, showing you the Google Maps approach alongside the equivalent Mapbox GL JS implementation at each step.
In this tutorial, you will:
- Import Mapbox GL JS in place of the Google Maps JavaScript API
- Initialize a map using `mapboxgl.Map`
- Add a marker and popup
- Load GeoJSON data as a source and render it with layers
- Add hover interactivity using `addInteraction()`
- Customize the basemap colors using `config.basemap`
- Add a location search box using Mapbox Search JS
## Prerequisites
This guide assumes familiarity with front-end web development (HTML, CSS, and JavaScript). Experience with the Google Maps JavaScript API is helpful but not required.
To complete this tutorial, you will need:
- **A Mapbox access token**: Find yours on the [Access token page](https://console.mapbox.com/account/access-tokens/) of your Mapbox account.
- **A code editor**: A program like [Visual Studio Code](https://code.visualstudio.com/).
## Import Mapbox GL JS
Your Google Maps implementation loads the Google Maps JavaScript API via a `
+
+
```
A full `index.html` boilerplate would look like this:
```html
Switch to Mapbox
```
The `
` container serves the same purpose as the container element you pass to `google.maps.Map` — it's where the map will be rendered, and should be styled to give the map a size on the page.
With Mapbox GL JS imported and a map container in place, you're ready to initialize a map.
## Initialize a map
Both APIs initialize a map by passing a container element and configuration options, but differ in coordinate ordering, authentication, and how the map style is specified.
### Google Maps JavaScript API
With the Google Maps JavaScript API, you initialize a map by passing a container element and an options object to `google.maps.Map`:
```js
const map = new google.maps.Map(document.getElementById('map'), {
center: { lat: 40.73713, lng: -73.99365 },
zoom: 11,
mapId: 'YOUR_MAP_ID'
});
```
### Mapbox GL JS
Add the following code inside your `
```
Then initialize the search box and add it to the map. Because the Search JS script is loaded with `defer`, wrap the initialization in a `window.addEventListener('load', ...)` callback to make sure the library is ready:
```js
window.addEventListener('load', () => {
const searchBox = new MapboxSearchBox();
searchBox.accessToken = 'YOUR_MAPBOX_ACCESS_TOKEN';
searchBox.options = {
types: 'address,poi',
proximity: [-73.99365, 40.73713]
};
searchBox.marker = true;
searchBox.mapboxgl = mapboxgl;
map.addControl(searchBox);
});
```
- `searchBox.options` sets the result types to return and biases results toward a location using `proximity`.
- `searchBox.marker = true` places a marker automatically at the selected result.
- `searchBox.mapboxgl = mapboxgl` connects the search box to the map library so the map flies to the selected result.
- `map.addControl(searchBox)` adds the search box to the top-right corner of the map.
Save and refresh. Search for any address or point of interest in New York City — the map will fly to the result with a marker pinned at that location.
## Final product
You've built a complete web map using Mapbox GL JS and learned the equivalent of every Google Maps feature covered in this tutorial — from map initialization and markers to GeoJSON data, hover interactivity, programmatic basemap customization, and location search.
```html
Demo: Switch from Google Maps to Mapbox GL JS
```
## Next steps
**Congratulations!** You have made the switch from Google Maps to Mapbox GL JS.
### What we covered
- Initializing a [Mapbox GL JS](https://docs.mapbox.com/mapbox-gl-js/) map
- Adding a [Marker](https://docs.mapbox.com/mapbox-gl-js/api/markers/#marker) and [Popup](https://docs.mapbox.com/mapbox-gl-js/api/markers/#popup)
- Loading GeoJSON data using sources and layers
- Adding hover interactivity with [`addInteraction()`](https://docs.mapbox.com/mapbox-gl-js/api/map/#map#addinteraction)
- Customizing the [Mapbox Standard](https://docs.mapbox.com/map-styles/standard/guides/) basemap with `config.basemap`
- Adding a location search box with [Mapbox Search JS](https://docs.mapbox.com/mapbox-search-js/guides/)
Continue building with these tutorials and guides:
> **Related content (tutorial): [Create a custom style](https://docs.mapbox.com/help/ja/tutorials/create-a-custom-style/)**
>
> Design a fully custom map style in Mapbox Studio and use it in your web application.
> **Related content (tutorial): [Configure the basemap in Mapbox GL JS](https://docs.mapbox.com/help/ja/tutorials/configure-basemap-mapbox-gl-js/)**
>
> Go deeper with lighting presets, color themes, and individual component colors for the Mapbox Standard style.
> **Related content (guide): [Mapbox Search JS](https://docs.mapbox.com/mapbox-search-js/guides/)**
>
> Learn more about adding search, autocomplete, and address autofill to your web application.
> **Related content (example): [Mapbox GL JS examples](https://docs.mapbox.com/mapbox-gl-js/example/)**
>
> Browse hundreds of Mapbox GL JS examples with code snippets you can copy and paste.