Add a default marker to a web map
This example adds two markers to a web map using the default Marker
method in Mapbox GL JS.
marker1
is centered at the coordinates 12.554729, 55.70651
near Copenhagen. It uses the default marker color.
marker2
uses options to define the color
and rotation
parameters for the new Marker
object.
<!DOCTYPE html><html><head><meta charset="utf-8"><title>Add a default marker to a web map</title><meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no"><link href="https://api.mapbox.com/mapbox-gl-js/v2.14.1/mapbox-gl.css" rel="stylesheet"><script src="https://api.mapbox.com/mapbox-gl-js/v2.14.1/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> // TO MAKE THE MAP APPEAR YOU MUST // ADD YOUR ACCESS TOKEN FROM // https://account.mapbox.com mapboxgl.accessToken = 'YOUR_MAPBOX_ACCESS_TOKEN';const map = new mapboxgl.Map({container: 'map',// Choose from Mapbox's core styles, or make your own style with Mapbox Studiostyle: 'mapbox://styles/mapbox/streets-v12',center: [12.550343, 55.665957],zoom: 8}); // Create a default Marker and add it to the map.const marker1 = new mapboxgl.Marker().setLngLat([12.554729, 55.70651]).addTo(map); // Create a default Marker, colored black, rotated 45 degrees.const marker2 = new mapboxgl.Marker({ color: 'black', rotation: 45 }).setLngLat([12.65147, 55.608166]).addTo(map);</script> </body></html>