Display simple marker on the map
This tutorial shows how to add a default Marker to the map.
-
Copy the following code, paste it into your favorite text editor, and save it as a
.html
file. -
Replace
YOUR_MAPTILER_API_KEY_HERE
with your actual MapTiler API key. -
The next it’s up to you. You can start the map in a different place by modifying the
starting position
andstarting zoom
, and you can change the look of the map to any of our styles, or yours, by updating thestyle
. See what’s available here. -
Install the npm package.
-
Include the CSS file.
If you have a bundler that can handle CSS, you can
import
the CSS or include it with a<link>
in the head of the document via the CDN -
Include the following code in your JavaScript file (Example: app.js).
-
Create a new marker using the .marker function. Set Lng/Lat of the marker using .setLngLat() function , and finally added it to the current map using .addTo() function.
const marker = new maptilersdk.Marker() .setLngLat([12.550343, 55.665957]) .addTo(map);
View complete source code on GitHub