Custom Marker

A newer version of Maps for web SDK is available

A newer version of the SDK is available and is recommended for all users. Learn about the latest version, V2.0, in the Maps for web v2.0 documentation

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.

1
<!DOCTYPE html>
2
<html lang="en">
3
  <head>
4
    <meta charset="UTF-8" />
5
    <title>NBMap Basic Example</title>
6
    <link href="https://maps-gl.nextbillion.io/maps/api/css" rel="stylesheet" />
7
    <!-- Or use the legacy version: -->
8
    <!-- <link href="https://maps.nextbillion.io/maps/api/css" rel="stylesheet"> -->
9
    <style>
10
      * {
11
        margin: 0;
12
        padding: 0;
13
      }
14
      #map {
15
        width: 100vw;
16
        height: 100vh;
17
      }
18
      .marker {
19
        background-size: cover;
20
        height: 42px;
21
        width: 42px;
22
      }
23
    </style>
24
  </head>
25
  <body>
26
    <div id="map"></div>
27
    <script src="https://maps-gl.nextbillion.io/maps/api/js"></script>
28
    <!-- Or use the legacy version: -->
29
    <!-- <script src="https://maps.nextbillion.io/maps/api/js"></script> -->
30
    <script>
31
      ;(function () {
32
        var loc = { lat: 28.6139, lng: 77.209 }
33
        nextbillion.apiKey = 'your-api-key'
34
        var map = new nextbillion.maps.Map(document.getElementById('map'), {
35
          zoom: 11,
36
          center: loc,
37
        })
38
        var marker = new nextbillion.maps.Marker({
39
          position: loc,
40
          map: map,
41
          icon: 'https://upload.wikimedia.org/wikipedia/commons/0/06/Gfi-set01-info-blue.png',
42
        })
43
      })()
44
    </script>
45
  </body>
46
</html>