---
title: "Display simple marker on the map | JavaScript maps SDK"
description: "Learn how to add a default marker to your map."
---
# 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.
## NPM module setup
1. Install the npm package.
```bash
npm install --save @maptiler/sdk
```
2. Include the CSS file.
If you have a bundler that can handle CSS, you can `import` the CSS
```js
import "@maptiler/sdk/dist/maptiler-sdk.css";
```
or include it with a `` in the head of the document via the CDN
```html
```
3. Include the following code in your JavaScript file (Example: app.js).
```js
import * as maptilersdk from '@maptiler/sdk';
maptilersdk.config.apiKey = 'YOUR_MAPTILER_API_KEY_HERE';
const map = new maptilersdk.Map({
container: 'map', // container's id or the HTML element to render the map
style: maptilersdk.MapStyle.STREETS,
center: [12.550343, 55.665957], // starting position [lng, lat]
zoom: 9, // starting zoom
});
```
4. Replace `YOUR_MAPTILER_API_KEY_HERE` with [your own API key](https://cloud.maptiler.com/account/keys/). Make sure to [secure the key](https://docs.maptiler.com/guides/credentials/api-key/#secure-key) before you publish it.
5. 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 the `starting zoom`) to match your users’ needs. Additionally, you can change the map’s look (by updating the `source URL`); choose from a range of visually appealing map styles from our extensive [MapTiler standard maps](https://cloud.maptiler.com/maps/), or create your own to truly differentiate your application.
6. Create a new marker using the `.Marker()` constructor. Set the coordinates of the marker using `.setLngLat()` and add it to the map using `.addTo()`.
```js
const marker = new maptilersdk.Marker()
.setLngLat([12.550343, 55.665957])
.addTo(map);
```
## Basic JavaScript setup
1. Copy the following code, paste it into your favorite text editor, and save it as a `.html` file.
```html
Display a marker
```
2. Replace `YOUR_MAPTILER_API_KEY_HERE` with [your own API key](https://cloud.maptiler.com/account/keys/). Make sure to [secure the key](https://docs.maptiler.com/guides/credentials/api-key/#secure-key) before you publish it.
3. 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 the `starting zoom`) to match your users’ needs. Additionally, you can change the map’s look (by updating the `source URL`); choose from a range of visually appealing map styles from our extensive [MapTiler standard maps](https://cloud.maptiler.com/maps/), or create your own to truly differentiate your application.
4. Create a new marker using the `.Marker()` constructor. Set the coordinates of the marker using `.setLngLat()` and add it to the map using `.addTo()`.
```js
const marker = new maptilersdk.Marker()
.setLngLat([12.550343, 55.665957])
.addTo(map);
```
### Complete source code
```html
Display a marker
```
## Related examples
### [GeoJSON point layer](https://docs.maptiler.com/sdk-js/examples/geojson-point/)
Tutorials
Add a GeoJSON point overlay to your map application.
### [Add an icon to the map](https://docs.maptiler.com/sdk-js/examples/add-image/)
Examples
Add icons from external URLs to symbol map layers.
### [Attach a popup to a marker instance](https://docs.maptiler.com/sdk-js/examples/set-popup/)
Examples
Attach and display a popup to a map marker.
### [Add custom icon (PNG) to a point layer](https://docs.maptiler.com/sdk-js/examples/custom-points-icon-png/)
Examples
Display a point layer using custom PNG icons.