code Snippetlanguage CDNpackage_2 NPM
content_copy Copyopen_in_new Open
maptilersdk.config.apiKey = 'YOUR_MAPTILER_KEY' ; const map = new maptilersdk. Map ({ container: 'map' , style: maptilersdk.MapStyle. STREETS , center: [ 2.3522 , 48.8566 ], zoom: 13 }); const places = [ { coords: [ 2.2945 , 48.8584 ], name: 'Eiffel Tower' }, { coords: [ 2.3500 , 48.8530 ], name: 'Notre-Dame' }, { coords: [ 2.3376 , 48.8606 ], name: 'Louvre Museum' } ]; places. forEach ( p => { new maptilersdk. Marker ({ color: '#9C27B0' }) . setLngLat (p.coords) . setPopup ( new maptilersdk. Popup ({ offset: 25 }). setHTML ( `<b>${ p . name }</b>` )) . addTo (map); }); content_copy Copyopen_in_new Open
<! DOCTYPE html > < html > < head > < meta charset = "utf-8" /> < meta name = "viewport" content = "width=device-width, initial-scale=1.0" /> < link rel = "stylesheet" href = "https://cdn.maptiler.com/maptiler-sdk-js/v4.1.0/maptiler-sdk.css" /> < script src = "https://cdn.maptiler.com/maptiler-sdk-js/v4.1.0/maptiler-sdk.umd.min.js" ></ script > < style > body { margin : 0 ; padding : 0 ; } #map { width : 100 % ; height : 100 vh ; } </ style > </ head > < body > < div id = "map" ></ div > < script > maptilersdk.config.apiKey = 'YOUR_MAPTILER_KEY' ; const map = new maptilersdk. Map ({ container: 'map' , style: maptilersdk.MapStyle. STREETS , center: [ 2.3522 , 48.8566 ], zoom: 13 }); const places = [ { coords: [ 2.2945 , 48.8584 ], name: 'Eiffel Tower' }, { coords: [ 2.3500 , 48.8530 ], name: 'Notre-Dame' }, { coords: [ 2.3376 , 48.8606 ], name: 'Louvre Museum' } ]; places. forEach ( p => { new maptilersdk. Marker ({ color: '#9C27B0' }) . setLngLat (p.coords) . setPopup ( new maptilersdk. Popup ({ offset: 25 }). setHTML ( `<b>${ p . name }</b>` )) . addTo (map); }); </ script > </ body > </ html > content_copy Copyopen_in_new Open
import * as maptilersdk from '@maptiler/sdk' ; import '@maptiler/sdk/dist/maptiler-sdk.css' ; maptilersdk.config.apiKey = 'YOUR_MAPTILER_KEY' ; const map = new maptilersdk. Map ({ container: 'map' , style: maptilersdk.MapStyle. STREETS , center: [ 2.3522 , 48.8566 ], zoom: 13 }); const places = [ { coords: [ 2.2945 , 48.8584 ], name: 'Eiffel Tower' }, { coords: [ 2.3500 , 48.8530 ], name: 'Notre-Dame' }, { coords: [ 2.3376 , 48.8606 ], name: 'Louvre Museum' } ]; places. forEach ( p => { new maptilersdk. Marker ({ color: '#9C27B0' }) . setLngLat (p.coords) . setPopup ( new maptilersdk. Popup ({ offset: 25 }). setHTML ( `<b>${ p . name }</b>` )) . addTo (map); }); maptilersdk.config.apiKey = 'YOUR_MAPTILER_KEY';
const map = new maptilersdk.Map({
container: 'map',
style: maptilersdk.MapStyle.STREETS,
center: [2.3522, 48.8566],
zoom: 13
});
const places = [
{ coords: [2.2945, 48.8584], name: 'Eiffel Tower' },
{ coords: [2.3500, 48.8530], name: 'Notre-Dame' },
{ coords: [2.3376, 48.8606], name: 'Louvre Museum' }
];
places.forEach(p => {
new maptilersdk.Marker({ color: '#9C27B0' })
.setLngLat(p.coords)
.setPopup(new maptilersdk.Popup({ offset: 25 }).setHTML(`<b>${p.name}</b>`))
.addTo(map);
}); <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="https://cdn.maptiler.com/maptiler-sdk-js/v4.1.0/maptiler-sdk.css" />
<script src="https://cdn.maptiler.com/maptiler-sdk-js/v4.1.0/maptiler-sdk.umd.min.js"></script>
<style>
body { margin: 0; padding: 0; }
#map { width: 100%; height: 100vh; }
</style>
</head>
<body>
<div id="map"></div>
<script>
maptilersdk.config.apiKey = 'YOUR_MAPTILER_KEY';
const map = new maptilersdk.Map({
container: 'map',
style: maptilersdk.MapStyle.STREETS,
center: [2.3522, 48.8566],
zoom: 13
});
const places = [
{ coords: [2.2945, 48.8584], name: 'Eiffel Tower' },
{ coords: [2.3500, 48.8530], name: 'Notre-Dame' },
{ coords: [2.3376, 48.8606], name: 'Louvre Museum' }
];
places.forEach(p => {
new maptilersdk.Marker({ color: '#9C27B0' })
.setLngLat(p.coords)
.setPopup(new maptilersdk.Popup({ offset: 25 }).setHTML(`<b>${p.name}</b>`))
.addTo(map);
});
</script>
</body>
</html> import * as maptilersdk from '@maptiler/sdk';
import '@maptiler/sdk/dist/maptiler-sdk.css';
maptilersdk.config.apiKey = 'YOUR_MAPTILER_KEY';
const map = new maptilersdk.Map({
container: 'map',
style: maptilersdk.MapStyle.STREETS,
center: [2.3522, 48.8566],
zoom: 13
});
const places = [
{ coords: [2.2945, 48.8584], name: 'Eiffel Tower' },
{ coords: [2.3500, 48.8530], name: 'Notre-Dame' },
{ coords: [2.3376, 48.8606], name: 'Louvre Museum' }
];
places.forEach(p => {
new maptilersdk.Marker({ color: '#9C27B0' })
.setLngLat(p.coords)
.setPopup(new maptilersdk.Popup({ offset: 25 }).setHTML(`<b>${p.name}</b>`))
.addTo(map);
});
