> For the complete documentation index, see [llms.txt](https://docs.mapbox.com/help/ja/llms.txt) # Add custom markers in Mapbox GL JS Mapbox GL JS includes a default blue pin [`Marker`](https://docs.mapbox.com/help/ja/glossary/marker/), but because each marker is an HTML element, you can fully customize its appearance using CSS. This means you can use any image, icon, or styled element as a marker on your map. In this tutorial, you will build an interactive web map with custom image markers and clickable popups that display information about each location. Your final map will look like this: ## Prerequisites To follow along with this guide you'll need: - **Familiarity with front-end development**: Beginner experience with HTML, CSS and JavaScript. - **Mapbox account**: [Sign up](https://account.mapbox.com/auth/signup/) for free or [log in](https://console.mapbox.com/) if you already have an account. - **A Code editor**: A program like [Visual Studio Code](https://code.visualstudio.com/). We also recommend you view the related **video tutorial** for additional guidance. > **Related content (video): [How to add markers to a map with Mapbox GL JS](null)** > > Follow along with this tutorial to learn how to initialize a web map, add GeoJSON, and add an HTML marker for each point. > **Note: Accessing Sample Code** > > If you wish to copy the code sample in its entirety instead of following along with the tutorial, view the [full code snippet here](https://docs.mapbox.com/help/ja/tutorials/custom-markers-gl-js/?step=8). ## Create an HTML file and initialize your map Start by creating a basic HTML page with a full-screen Mapbox GL JS map. 1. Create a file named `index.html` and open it in your code editor. 2. Copy and paste the code below into your file. 3. Replace `YOUR_MAPBOX_ACCESS_TOKEN` with your public access token. If you are logged into your Mapbox account, your token is automatically added to the code snippet. 4. Open `index.html` in a browser. You should see a light-themed map of the United States. ```html Add custom markers in Mapbox GL JS
``` > **Note: Mapbox GL JS Map options** > > The [`Map`](https://docs.mapbox.com/mapbox-gl-js/api/map/) constructor accepts several options: > > - `container`: the `id` of the `
` element where the map renders. Here it's `'map'`. > - `style`: a [style URL](https://docs.mapbox.com/api/maps/styles/). This tutorial uses the Mapbox Light style. > - `center`: the starting position as `[longitude, latitude]`. > - `zoom`: the initial zoom level. ## Define marker locations with GeoJSON Next, define where your markers will appear by creating a [GeoJSON](https://docs.mapbox.com/help/ja/glossary/geojson/) object. GeoJSON is a standard format for encoding geographic data. Each feature has a `geometry` (the location) and `properties` (data you want to associate with that location, such as a name or description). > **Note: GeoJSON is not required** > > GeoJSON is not required for creating markers — a marker only needs a longitude/latitude pair. GeoJSON is used in this tutorial because it's a commonly used standard format that works well in JavaScript code and is compatible with other Mapbox products. You could also loop over a plain array of coordinates or objects from any data source. Copy and paste the highlighted `geojson` variable below the `Map` initialization, inside the `` tag: ```js // add markers to map for (const feature of geojson.features) { // make a marker for each feature and add to the map new mapboxgl.Marker().setLngLat(feature.geometry.coordinates).addTo(map); } ``` Save and refresh your browser. You should see two blue pin markers: ![Map of the United States showing two default blue pin markers, one on the east coast near Washington, D.C. and one on the west coast near San Francisco.](https://docs.mapbox.com/help/ja/assets/ideal-img/custom-markers-gl-js-default-markers.e4e90eb.480.png) ## Customize the markers with HTML and CSS The `Marker` constructor accepts an optional HTML element as its first argument. When you pass in a custom element, it replaces the default blue pin entirely. This is the key to custom markers: you create an HTML element, style it with CSS, and the marker displays your element on the map instead of the default SVG. ### Update the JavaScript Replace the `for` loop from the previous step with the highlighted code below. Instead of using the default marker, this creates a `
` element with a CSS class of `marker` and passes it to the `Marker` constructor: ```js // add markers to map for (const feature of geojson.features) { // highlight-start // create an HTML element for each feature const el = document.createElement('div'); el.className = 'marker'; // pass the element to the Marker constructor to replace the default new mapboxgl.Marker(el).setLngLat(feature.geometry.coordinates).addTo(map); // highlight-end } ``` If you save and refresh now, the markers won't be visible yet because the `
` elements have no size or appearance. You need CSS to make them visible. ### Add CSS for the markers Add the following CSS inside your `
``` ## Next steps Now that you've created a project using Mapbox GL JS, we recommend checking out our other tutorials to extend your web app: - [Add data to a style](https://docs.mapbox.com/help/ja/tutorials/add-data-to-mapbox-style/) using Mapbox Studio and Mapbox GL JS. - [Build a store locator](https://docs.mapbox.com/help/ja/tutorials/building-a-store-locator/) using Mapbox GL JS. - [Show changes over time](https://docs.mapbox.com/help/ja/tutorials/show-changes-over-time/) with Mapbox GL JS. - [Analyze data with Turf.js](https://docs.mapbox.com/help/ja/tutorials/analysis-with-turf/) and Mapbox GL JS. Explore our [Mapbox GL JS examples](https://docs.mapbox.com/mapbox-gl-js/examples/) for more ideas on how to extend your project and code to get you started.