

Les traductions sont fournies par des outils de traduction automatique. En cas de conflit entre le contenu d'une traduction et celui de la version originale en anglais, la version anglaise prévaudra.

# Comment ajouter un marqueur sur la carte
<a name="how-to-add-marker-on-map"></a>

Avec Amazon Location, vous pouvez ajouter des marqueurs fixes et déplaçables, et vous pouvez également personnaliser la couleur des marqueurs en fonction de vos données et de vos préférences.

## Ajouter un marqueur fixe
<a name="add-marker"></a>

### Exemple de code de marqueur fixe
<a name="web-code-example-fixed-marker"></a>

------
#### [ index.html ]

```
<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Add 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@5.x/dist/maplibre-gl.css' />
        <link rel='stylesheet' href='style.css' />
        <script src='https://unpkg.com/maplibre-gl@5.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() // Create fixed 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%; }
```

------

## Ajouter un marqueur déplaçable
<a name="add-draggable-marker"></a>

### Exemple de code de marqueur déplaçable
<a name="web-code-example-draggable-marker"></a>

------
#### [ 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@5.x/dist/maplibre-gl.css' />
        <link rel='stylesheet' href='style.css' />
        <script src='https://unpkg.com/maplibre-gl@5.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%; }
```

------

## Modification de la couleur du marqueur
<a name="change-marker-color"></a>

### Exemple de code de marqueur coloré
<a name="web-code-example-change-marker-color"></a>

------
#### [ 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@5.x/dist/maplibre-gl.css' />
        <link rel='stylesheet' href='style.css' />
        <script src='https://unpkg.com/maplibre-gl@5.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%; }
```

------

## Ajouter plusieurs marqueurs
<a name="add-multiple-markers"></a>

### Exemple de code à marqueurs multiples
<a name="web-code-example-multiple-markers"></a>

------
#### [ 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@5.x/dist/maplibre-gl.css' />
        <link rel='stylesheet' href='style.css' />
        <script src='https://unpkg.com/maplibre-gl@5.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%; }
```

------