Display simple marker on the map
This comprehensive step-by-step tutorial provides a detailed explanation of how to incorporate a default Marker onto a map. By following this tutorial you will be able to create a map with a pin.
-
Copy the following code, paste it into your favorite text editor, and save it as a
.html
file. -
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).
-
Replace
YOUR_MAPTILER_API_KEY_HERE
with your actual MapTiler API key. -
The next is up to you. You can center your map wherever you desire (modifying the
starting position
) and set an appropriate zoom level (modifying thestarting zoom
) to match your users’ needs. Additionally, you can change the map’s look (by updating thesource URL
); choose from a range of visually appealing map styles from our extensive MapTiler standard maps, or create your own to truly differentiate your application. -
Create a new marker using the .marker function. Set Lng/Lat of the marker using
.setLngLat()
function, and finally add it to the current map using.addTo()
function.const marker = new maptilersdk.Marker() .setLngLat([12.550343, 55.665957]) .addTo(map);