• Optimization
  • Navigation
  • Tracking
  • Maps
  • Places

Marker

Add markers to the map.

Demo

Plain HTML

You can find the live Demo on CodeSandbox here.

1<!DOCTYPE html>
2<html lang="en">
3 <head>
4 <meta name="viewport" content="initial-scale=1.0" />
5 <meta charset="UTF-8" />
6 <title>Basic Map</title>
7 <link
8 href="https://maps-gl.nextbillion.io/maps/v2/api/css"
9 rel="stylesheet"
10 />
11 <style>
12 * {
13 margin: 0;
14 padding: 0;
15 }
16 #map {
17 width: 100vw;
18 height: 100vh;

React

You can find the live Demo on CodeSandbox here.

1import React, { useEffect } from 'react'
2import '@nbai/nbmap-gl/dist/nextbillion.css'
3import nextbillion, { NBMap, Marker, Popup } from '@nbai/nbmap-gl'
4
5function addSimpleMarker(nbmap) {
6 const popup = new Popup({ offset: 25, closeButton: false }).setText(
7 'Simple Marker'
8 )
9 const marker = new Marker()
10 .setLngLat({ lat: 34.08572, lng: -118.124569 })
11 .setPopup(popup)
12 .addTo(nbmap.map)
13 marker.togglePopup()
14}
15
16function addDraggableMarker(nbmap) {
17 const popup = new Popup({ offset: 25, closeButton: false }).setText(
18 'Draggable Marker'


Have Questions ?