Custom Marker

You can choose from the built-in icons for the marker, or use your own icon via a URL to the image. Checkout the Marker API to learn more.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>NBMap Basic Example</title>
<link href="https://maps-gl.nextbillion.io/maps/api/css" rel="stylesheet" />
<!-- Or use the legacy version: -->
<!-- <link href="https://maps.nextbillion.io/maps/api/css" rel="stylesheet"> -->
<style>
* {
margin: 0;
padding: 0;
}
#map {
width: 100vw;
height: 100vh;
}
.marker {
background-size: cover;
height: 42px;
width: 42px;
}
</style>
</head>
<body>
<div id="map"></div>
<script src="https://maps-gl.nextbillion.io/maps/api/js"></script>
<!-- Or use the legacy version: -->
<!-- <script src="https://maps.nextbillion.io/maps/api/js"></script> -->
<script>
;(function () {
var loc = { lat: 28.6139, lng: 77.209 }
nextbillion.apiKey = '123456'
var map = new nextbillion.maps.Map(document.getElementById('map'), {
zoom: 11,
center: loc,
})
var marker = new nextbillion.maps.Marker({
position: loc,
map: map,
icon: 'https://upload.wikimedia.org/wikipedia/commons/0/06/Gfi-set01-info-blue.png',
})
})()
</script>
</body>
</html>