Présentation
Découvrez comment créer une légende sur une carte Google grâce à ce didacticiel. Les légendes décrivent généralement les symboles et les marqueurs sur une carte. Vous pouvez les créer à l'aide de la fonctionnalité de positionnement des commandes personnalisées.
La carte ci-dessous contient une légende qui fournit des informations sur trois marqueurs personnalisés différents sur la carte.
La section ci-dessous affiche l'intégralité du code nécessaire pour créer la carte et la légende dans ce didacticiel.
var map;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
zoom: 16,
center: new google.maps.LatLng(-33.91722, 151.23064),
mapTypeId: 'roadmap'
});
var iconBase = 'https://maps.google.com/mapfiles/kml/shapes/';
var icons = {
parking: {
name: 'Parking',
icon: iconBase + 'parking_lot_maps.png'
},
library: {
name: 'Library',
icon: iconBase + 'library_maps.png'
},
info: {
name: 'Info',
icon: iconBase + 'info-i_maps.png'
}
};
function addMarker(feature) {
var marker = new google.maps.Marker({
position: feature.position,
icon: icons[feature.type].icon,
map: map
});
}
var features = [
{
position: new google.maps.LatLng(-33.91721, 151.22630),
type: 'info'
}, {
position: new google.maps.LatLng(-33.91539, 151.22820),
type: 'info'
}, {
position: new google.maps.LatLng(-33.91747, 151.22912),
type: 'info'
}, {
position: new google.maps.LatLng(-33.91910, 151.22907),
type: 'info'
}, {
position: new google.maps.LatLng(-33.91725, 151.23011),
type: 'info'
}, {
position: new google.maps.LatLng(-33.91872, 151.23089),
type: 'info'
}, {
position: new google.maps.LatLng(-33.91784, 151.23094),
type: 'info'
}, {
position: new google.maps.LatLng(-33.91682, 151.23149),
type: 'info'
}, {
position: new google.maps.LatLng(-33.91790, 151.23463),
type: 'info'
}, {
position: new google.maps.LatLng(-33.91666, 151.23468),
type: 'info'
}, {
position: new google.maps.LatLng(-33.916988, 151.233640),
type: 'info'
}, {
position: new google.maps.LatLng(-33.91662347903106, 151.22879464019775),
type: 'parking'
}, {
position: new google.maps.LatLng(-33.916365282092855, 151.22937399734496),
type: 'parking'
}, {
position: new google.maps.LatLng(-33.91665018901448, 151.2282474695587),
type: 'parking'
}, {
position: new google.maps.LatLng(-33.919543720969806, 151.23112279762267),
type: 'parking'
}, {
position: new google.maps.LatLng(-33.91608037421864, 151.23288232673644),
type: 'parking'
}, {
position: new google.maps.LatLng(-33.91851096391805, 151.2344058214569),
type: 'parking'
}, {
position: new google.maps.LatLng(-33.91818154739766, 151.2346203981781),
type: 'parking'
}, {
position: new google.maps.LatLng(-33.91727341958453, 151.23348314155578),
type: 'library'
}
];
for (var i = 0, feature; feature = features[i]; i++) {
addMarker(feature);
}
var legend = document.getElementById('legend');
for (var key in icons) {
var type = icons[key];
var name = type.name;
var icon = type.icon;
var div = document.createElement('div');
div.innerHTML = '<img src="' + icon + '"> ' + name;
legend.appendChild(div);
}
map.controls[google.maps.ControlPosition.RIGHT_BOTTOM].push(legend);
}
<div id="map"></div> <div id="legend"><h3>Legend</h3></div>
html, body {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
}
#map {
height: 400px;
width: 100%;
}
#legend {
font-family: Arial, sans-serif;
background: #fff;
padding: 10px;
margin: 10px;
border: 3px solid #000;
}
#legend h3 {
margin-top: 0;
}
#legend img {
vertical-align: middle;
}
<!-- Replace the value of the key parameter with your own API key. --> <script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap"> </script>
Essayez par vous-même
Placez la souris en haut à droite du bloc de code pour le copier ou l'ouvrir dans JSFiddle.
<!DOCTYPE html>
<html>
<head>
<title>Custom Legend</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<style>
html, body {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
}
#map {
height: 400px;
width: 100%;
}
#legend {
font-family: Arial, sans-serif;
background: #fff;
padding: 10px;
margin: 10px;
border: 3px solid #000;
}
#legend h3 {
margin-top: 0;
}
#legend img {
vertical-align: middle;
}
</style>
</head>
<body>
<div id="map"></div>
<div id="legend"><h3>Legend</h3></div>
<script>
var map;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
zoom: 16,
center: new google.maps.LatLng(-33.91722, 151.23064),
mapTypeId: 'roadmap'
});
var iconBase = 'https://maps.google.com/mapfiles/kml/shapes/';
var icons = {
parking: {
name: 'Parking',
icon: iconBase + 'parking_lot_maps.png'
},
library: {
name: 'Library',
icon: iconBase + 'library_maps.png'
},
info: {
name: 'Info',
icon: iconBase + 'info-i_maps.png'
}
};
function addMarker(feature) {
var marker = new google.maps.Marker({
position: feature.position,
icon: icons[feature.type].icon,
map: map
});
}
var features = [
{
position: new google.maps.LatLng(-33.91721, 151.22630),
type: 'info'
}, {
position: new google.maps.LatLng(-33.91539, 151.22820),
type: 'info'
}, {
position: new google.maps.LatLng(-33.91747, 151.22912),
type: 'info'
}, {
position: new google.maps.LatLng(-33.91910, 151.22907),
type: 'info'
}, {
position: new google.maps.LatLng(-33.91725, 151.23011),
type: 'info'
}, {
position: new google.maps.LatLng(-33.91872, 151.23089),
type: 'info'
}, {
position: new google.maps.LatLng(-33.91784, 151.23094),
type: 'info'
}, {
position: new google.maps.LatLng(-33.91682, 151.23149),
type: 'info'
}, {
position: new google.maps.LatLng(-33.91790, 151.23463),
type: 'info'
}, {
position: new google.maps.LatLng(-33.91666, 151.23468),
type: 'info'
}, {
position: new google.maps.LatLng(-33.916988, 151.233640),
type: 'info'
}, {
position: new google.maps.LatLng(-33.91662347903106, 151.22879464019775),
type: 'parking'
}, {
position: new google.maps.LatLng(-33.916365282092855, 151.22937399734496),
type: 'parking'
}, {
position: new google.maps.LatLng(-33.91665018901448, 151.2282474695587),
type: 'parking'
}, {
position: new google.maps.LatLng(-33.919543720969806, 151.23112279762267),
type: 'parking'
}, {
position: new google.maps.LatLng(-33.91608037421864, 151.23288232673644),
type: 'parking'
}, {
position: new google.maps.LatLng(-33.91851096391805, 151.2344058214569),
type: 'parking'
}, {
position: new google.maps.LatLng(-33.91818154739766, 151.2346203981781),
type: 'parking'
}, {
position: new google.maps.LatLng(-33.91727341958453, 151.23348314155578),
type: 'library'
}
];
for (var i = 0, feature; feature = features[i]; i++) {
addMarker(feature);
}
var legend = document.getElementById('legend');
for (var key in icons) {
var type = icons[key];
var name = type.name;
var icon = type.icon;
var div = document.createElement('div');
div.innerHTML = '<img src="' + icon + '"> ' + name;
legend.appendChild(div);
}
map.controls[google.maps.ControlPosition.RIGHT_BOTTOM].push(legend);
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
</script>
</body>
</html>
Les sections ci-dessous décrivent les principales étapes de la création d'une légende.
Créer le conteneur de la légende
Le tableau ci-dessous présente le code qui personnalise la légende.
| Code et description | |
|---|---|
|
Crée un élément div pour accueillir le contenu.Ajoute un en-tête de niveau trois (3) au div. |
|
Place le div en bas à droite de
la carte en ajoutant une position de commande. En savoir plus sur d'autres options de position de commande. |
|
Attribue un style à la commande de légende à l'aide de CSS. |
Ajouter le contenu de la légende
Utilisez la définition des styles de marqueur existante pour remplir la légende.
var legend = document.getElementById('legend');
for (var style in styles) {
var name = style.name;
var icon = style.icon;
var div = document.createElement('div');
div.innerHTML = '<img src="' + icon + '"> ' + name;
legend.appendChild(div);
}
Besoin d'aide ? Consultez notre