JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<!-- Le conteneur de notre carte -->
<div id="carte"></div>
<!-- Le script qui va créer notre carte -->
<!-- cf. onglets "script" -->
CSS
#carte {
height: 400px;
width: 500px;
}
JavaScript
function initialiser() {
// Objet representant une coordonnée
var latlng = new google.maps.LatLng(48.21109, 1.7191036);
/*
Objet contenant des propriétés avec des identificateurs
prédéfinis dans Google Maps permettant de définir des
options d'affichage de notre carte
*/
var options = {
center: latlng,
zoom: 5,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
/*
Constructeur de la carte qui prend en paramêtre le conteneur HTML
dans lequel la carte doit s'afficher et les options
*/
var carte = new google.maps.Map(document.getElementById("carte"), options);
/*************** Nouveau code ***************/
//sommets du polygone
var tourdefrancePolygone = [
new google.maps.LatLng(48.858859 , 2.3470599), // Paris
new google.maps.LatLng(45.7579555 , 4.8351209), // Lyon
new google.maps.LatLng(47.238222 , -1.5609655), // Nantes
new google.maps.LatLng(48.1159156 , -1.6884545), // Rennes
new google.maps.LatLng(50.6310675 , 3.0471604) // Lille
];
lePolygone = new google.maps.Polygon({
paths: tourdefrancePolygone, // sommets du polygone
strokeColor: "#d35400", // couleur des bords du polygone
strokeOpacity: 0.8, // opacité des bords du polygone
strokeWeight: 2, // épaisseur des bords du polygone
fillColor: "#f39c12", // couleur de remplissage du polygone
fillOpacity: 0.35 // opacité de remplissage du polygone
});
//lier le polygone à la carte
//ceci permet au polygone d'être affiché sur la carte
lePolygone.setMap(carte);
/********************************************/
}
// On lance l'initialisation de notre carte
initialiser();