How to add a marker on the map

Focus mode

How to add a marker on the map - Amazon Location Service

Add a fixed marker Add a draggable marker Changing marker color Add multiple markers

With Amazon Location, you can add both fixed and draggable markers, and you can also customize the color of the markers based on your data and preferences.

Add a fixed marker

Fixed marker code example

Add a draggable marker

index.html



    <!DOCTYPE html>
    <html lang="en">
        <head>
            <title>Add draggable marker on a map</title>
            <meta property="og:description" content="Initialize a map in an HTML element with MapLibre GL JS." />
            <meta charset='utf-8'>
            <meta name="viewport" content="width=device-width, initial-scale=1">
            <link rel='stylesheet' href='https://unpkg.com/maplibre-gl@4.x/dist/maplibre-gl.css' />
            <link rel='stylesheet' href='style.css' />
            <script src='https://unpkg.com/maplibre-gl@4.x/dist/maplibre-gl.js'></script>
        </head>
        <body>
            <!-- Map container -->
            <div id="map"></div>
            <script>
                const apiKey = "<API_KEY>";
                const mapStyle = "Standard";  // e.g., Standard, Monochrome, Hybrid, Satellite  
                const awsRegion = "eu-central-1"; // e.g., us-east-2, us-east-1, us-west-2, etc.
                const styleUrl = `https://maps.geo.${awsRegion}.amazonaws.com/v2/styles/${mapStyle}/descriptor?key=${apiKey}`;

                const map = new maplibregl.Map({
                    container: 'map', // container id
                    style: styleUrl, // style URL
                    center: [0, 0], // starting position [lng, lat]
                    zoom: 1, // starting zoom
                });

                const marker = new maplibregl.Marker({ draggable: true }) // Create draggable marker
                    .setLngLat([85.1376, 25.5941]) // Set coordinates [long, lat] for marker (e.g., Patna, BR, IN)
                    .addTo(map); // Add marker to the map
            </script>
        </body>
    </html>

style.css



    body { margin: 0; padding: 0; }
    html, body, #map { height: 100%; }

Draggable marker code example

index.html



    <!DOCTYPE html>
    <html lang="en">
        <head>
            <title>Add draggable marker on a map</title>
            <meta property="og:description" content="Initialize a map in an HTML element with MapLibre GL JS." />
            <meta charset='utf-8'>
            <meta name="viewport" content="width=device-width, initial-scale=1">
            <link rel='stylesheet' href='https://unpkg.com/maplibre-gl@4.x/dist/maplibre-gl.css' />
            <link rel='stylesheet' href='style.css' />
            <script src='https://unpkg.com/maplibre-gl@4.x/dist/maplibre-gl.js'></script>
        </head>
        <body>
            <!-- Map container -->
            <div id="map"></div>
            <script>
                const apiKey = "<API_KEY>";
                const mapStyle = "Standard";  // e.g., Standard, Monochrome, Hybrid, Satellite  
                const awsRegion = "eu-central-1"; // e.g., us-east-2, us-east-1, us-west-2, etc.
                const styleUrl = `https://maps.geo.${awsRegion}.amazonaws.com/v2/styles/${mapStyle}/descriptor?key=${apiKey}`;

                const map = new maplibregl.Map({
                    container: 'map', // container id
                    style: styleUrl, // style URL
                    center: [0, 0], // starting position [lng, lat]
                    zoom: 1, // starting zoom
                });

                const marker = new maplibregl.Marker({ draggable: true }) // Create draggable marker
                    .setLngLat([85.1376, 25.5941]) // Set coordinates [long, lat] for marker (e.g., Patna, BR, IN)
                    .addTo(map); // Add marker to the map
            </script>
        </body>
    </html>

style.css



    body { margin: 0; padding: 0; }
    html, body, #map { height: 100%; }

Changing marker color

index.html



    <!DOCTYPE html>
    <html lang="en">
        <head>
            <title>Adding colorful marker on a map</title>
            <meta property="og:description" content="Initialize a map in an HTML element with MapLibre GL JS." />
            <meta charset='utf-8'>
            <meta name="viewport" content="width=device-width, initial-scale=1">
            <link rel='stylesheet' href='https://unpkg.com/maplibre-gl@4.x/dist/maplibre-gl.css' />
            <link rel='stylesheet' href='style.css' />
            <script src='https://unpkg.com/maplibre-gl@4.x/dist/maplibre-gl.js'></script>
        </head>
        <body>
            <!-- Map container -->
            <div id="map"></div>
            <script>
                const apiKey = "<API_KEY>";
                const mapStyle = "Monochrome";  // e.g., Standard, Monochrome, Hybrid, Satellite  
                const awsRegion = "eu-central-1"; // e.g., us-east-2, us-east-1, us-west-2, etc.
                const styleUrl = `https://maps.geo.${awsRegion}.amazonaws.com/v2/styles/${mapStyle}/descriptor?key=${apiKey}`;

                const map = new maplibregl.Map({
                    container: 'map', // container id
                    style: styleUrl, // style URL
                    center: [0, 0], // starting position [lng, lat]
                    zoom: 1, // starting zoom
                });

                const marker = new maplibregl.Marker({ color: "black" }) // Create colored marker
                    .setLngLat([85.1376, 25.5941]) // Set coordinates [long, lat] for marker (e.g., Patna, BR, IN)
                    .addTo(map); // Add marker to the map
            </script>
        </body>
    </html>

style.css



    body { margin: 0; padding: 0; }
    html, body, #map { height: 100%; }

Colorful marker code example

index.html



    <!DOCTYPE html>
    <html lang="en">
        <head>
            <title>Adding colorful marker on a map</title>
            <meta property="og:description" content="Initialize a map in an HTML element with MapLibre GL JS." />
            <meta charset='utf-8'>
            <meta name="viewport" content="width=device-width, initial-scale=1">
            <link rel='stylesheet' href='https://unpkg.com/maplibre-gl@4.x/dist/maplibre-gl.css' />
            <link rel='stylesheet' href='style.css' />
            <script src='https://unpkg.com/maplibre-gl@4.x/dist/maplibre-gl.js'></script>
        </head>
        <body>
            <!-- Map container -->
            <div id="map"></div>
            <script>
                const apiKey = "<API_KEY>";
                const mapStyle = "Monochrome";  // e.g., Standard, Monochrome, Hybrid, Satellite  
                const awsRegion = "eu-central-1"; // e.g., us-east-2, us-east-1, us-west-2, etc.
                const styleUrl = `https://maps.geo.${awsRegion}.amazonaws.com/v2/styles/${mapStyle}/descriptor?key=${apiKey}`;

                const map = new maplibregl.Map({
                    container: 'map', // container id
                    style: styleUrl, // style URL
                    center: [0, 0], // starting position [lng, lat]
                    zoom: 1, // starting zoom
                });

                const marker = new maplibregl.Marker({ color: "black" }) // Create colored marker
                    .setLngLat([85.1376, 25.5941]) // Set coordinates [long, lat] for marker (e.g., Patna, BR, IN)
                    .addTo(map); // Add marker to the map
            </script>
        </body>
    </html>

style.css



    body { margin: 0; padding: 0; }
    html, body, #map { height: 100%; }

Add multiple markers

index.html



    <!DOCTYPE html>
    <html lang="en">
        <head>
            <title>Adding multiple markers on a map</title>
            <meta property="og:description" content="Initialize a map in an HTML element with MapLibre GL JS." />
            <meta charset='utf-8'>
            <meta name="viewport" content="width=device-width, initial-scale=1">
            <link rel='stylesheet' href='https://unpkg.com/maplibre-gl@4.x/dist/maplibre-gl.css' />
            <link rel='stylesheet' href='style.css' />
            <script src='https://unpkg.com/maplibre-gl@4.x/dist/maplibre-gl.js'></script>
        </head>
        <body>
            <!-- Map container -->
            <div id="map"></div>
            <script>
                const apiKey = "<API_KEY>";
                const mapStyle = "Standard";  // e.g., Standard, Monochrome, Hybrid, Satellite  
                const awsRegion = "eu-central-1"; // e.g., us-east-2, us-east-1, us-west-2, etc.
                const colorScheme ="Dark"; // e.g., Dark, Light (default)
                const styleUrl = `https://maps.geo.${awsRegion}.amazonaws.com/v2/styles/${mapStyle}/descriptor?color-scheme=${colorScheme}&key=${apiKey}`;

                const map = new maplibregl.Map({
                    container: 'map', // container id
                    style: styleUrl, // style URL
                    center: [0, 0], // starting position [lng, lat]
                    zoom: 1, // starting zoom
                });

                const locations = [
                    { lng: 85.1376, lat: 25.5941, label: 'Patna', color: '#FF5722' }, 
                    { lng: 77.1025, lat: 28.7041, label: 'Delhi', color: '#2196F3' }, 
                    { lng: 77.5946, lat: 12.9716, label: 'Bangalore', color: '#FF9800' }, 
                    { lng: 78.4867, lat: 17.3850, label: 'Hyderabad', color: '#9C27B0' }, 
                    { lng: -87.6298, lat: 41.8781, label: 'Chicago', color: '#4CAF50' }, 
                    { lng: -122.3321, lat: 47.6062, label: 'Seattle', color: '#FFC107' }, 
                    { lng: 4.3517, lat: 50.8503, label: 'Brussels', color: '#3F51B5' },   
                    { lng: 2.3522, lat: 48.8566, label: 'Paris', color: '#E91E63' },   
                    { lng: -0.1276, lat: 51.5074, label: 'London', color: '#795548' },  
                    { lng: 28.0473, lat: -26.2041, label: 'Johannesburg', color: '#673AB7' },  
                    { lng: -123.1216, lat: 49.2827, label: 'Vancouver', color: '#FF5722' }, 
                    { lng: -104.9903, lat: 39.7392, label: 'Denver', color: '#FF9800' }, 
                    { lng: -97.7431, lat: 30.2672, label: 'Austin', color: '#3F51B5' }  
                ];

                // Loop through the locations array and add a marker for each one
                locations.forEach(location => {           
                    const marker = new maplibregl.Marker({ color: location.color, draggable: true }) // Create colored marker
                        .setLngLat([location.lng, location.lat]) // Set longitude and latitude
                        .addTo(map); // Add marker to the map
                }); 
            </script>
        </body>
    </html>

style.css



    body { margin: 0; padding: 0; }
    html, body, #map { height: 100%; }

Multiple markers code example

index.html



    <!DOCTYPE html>
    <html lang="en">
        <head>
            <title>Adding multiple markers on a map</title>
            <meta property="og:description" content="Initialize a map in an HTML element with MapLibre GL JS." />
            <meta charset='utf-8'>
            <meta name="viewport" content="width=device-width, initial-scale=1">
            <link rel='stylesheet' href='https://unpkg.com/maplibre-gl@4.x/dist/maplibre-gl.css' />
            <link rel='stylesheet' href='style.css' />
            <script src='https://unpkg.com/maplibre-gl@4.x/dist/maplibre-gl.js'></script>
        </head>
        <body>
            <!-- Map container -->
            <div id="map"></div>
            <script>
                const apiKey = "<API_KEY>";
                const mapStyle = "Standard";  // e.g., Standard, Monochrome, Hybrid, Satellite  
                const awsRegion = "eu-central-1"; // e.g., us-east-2, us-east-1, us-west-2, etc.
                const colorScheme ="Dark"; // e.g., Dark, Light (default)
                const styleUrl = `https://maps.geo.${awsRegion}.amazonaws.com/v2/styles/${mapStyle}/descriptor?color-scheme=${colorScheme}&key=${apiKey}`;

                const map = new maplibregl.Map({
                    container: 'map', // container id
                    style: styleUrl, // style URL
                    center: [0, 0], // starting position [lng, lat]
                    zoom: 1, // starting zoom
                });

                const locations = [
                    { lng: 85.1376, lat: 25.5941, label: 'Patna', color: '#FF5722' }, 
                    { lng: 77.1025, lat: 28.7041, label: 'Delhi', color: '#2196F3' }, 
                    { lng: 77.5946, lat: 12.9716, label: 'Bangalore', color: '#FF9800' }, 
                    { lng: 78.4867, lat: 17.3850, label: 'Hyderabad', color: '#9C27B0' }, 
                    { lng: -87.6298, lat: 41.8781, label: 'Chicago', color: '#4CAF50' }, 
                    { lng: -122.3321, lat: 47.6062, label: 'Seattle', color: '#FFC107' }, 
                    { lng: 4.3517, lat: 50.8503, label: 'Brussels', color: '#3F51B5' },   
                    { lng: 2.3522, lat: 48.8566, label: 'Paris', color: '#E91E63' },   
                    { lng: -0.1276, lat: 51.5074, label: 'London', color: '#795548' },  
                    { lng: 28.0473, lat: -26.2041, label: 'Johannesburg', color: '#673AB7' },  
                    { lng: -123.1216, lat: 49.2827, label: 'Vancouver', color: '#FF5722' }, 
                    { lng: -104.9903, lat: 39.7392, label: 'Denver', color: '#FF9800' }, 
                    { lng: -97.7431, lat: 30.2672, label: 'Austin', color: '#3F51B5' }  
                ];

                // Loop through the locations array and add a marker for each one
                locations.forEach(location => {           
                    const marker = new maplibregl.Marker({ color: location.color, draggable: true }) // Create colored marker
                        .setLngLat([location.lng, location.lat]) // Set longitude and latitude
                        .addTo(map); // Add marker to the map
                }); 
            </script>
        </body>
    </html>

style.css



    body { margin: 0; padding: 0; }
    html, body, #map { height: 100%; }

Warning Javascript is disabled or is unavailable in your browser.

To use the Amazon Web Services Documentation, Javascript must be enabled. Please refer to your browser's Help pages for instructions.

Document Conventions

Add control on the map

Add an icon on the map

Next topic:

Add an icon on the map

Previous topic:

Add control on the map

Select your cookie preferences

Customize cookie preferences

Essential

Performance

Functional

Advertising

Unable to save cookie preferences

How to add a marker on the map

Add a fixed marker

Fixed marker code example

Add a draggable marker

Draggable marker code example

Changing marker color

Colorful marker code example

Add multiple markers

Multiple markers code example

Next topic:

Previous topic:

Need help?

On this page

Did this page help you?