<html>
<head>
<title> Простой многоугольник </title>
<script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
<!-- jsFiddle вставит css и js -->
</head>
<body>
<div id="map"> </div>
<!-- Асинхронный скрипт выполняется немедленно и должен быть после любых элементов DOM, используемых в обратном вызове . -->
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBIwzALxUPNbatRBj3Xi1Uhp0fFzwWNBkE&callback=initMap&libraries=&v=weekly" async></script>
</body>
</html>
/* Always set the map height explicitly to define the size of the div
* element that contains the map. */
#map {
height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
// This example creates a simple polygon representing the Bermuda Triangle.
function initMap() {
const map = new google.maps.Map(document.getElementById("map"), {
zoom: 5,
center: { lat: 48.4500000, lng: 34.9833300 },
mapTypeId: "terrain",
});
// Define the LatLng coordinates for the polygon's path.
const triangleCoords = [
{ lat: 48.4817989, lng: 35.0229549 },
{ lat: 48.4699699, lng: 35.0521374 },
{ lat: 48.4587542, lng: 35.0412369 },
{ lat: 48.4621203, lng: 35.0189209 },
{ lat: 48.4717833, lng: 35.0242424 },
{ lat: 48.4817989, lng: 35.0227833 },
];
// Construct the polygon.
const bermudaTriangle = new google.maps.Polygon({
paths: triangleCoords,
strokeColor: "#FF0000",
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: "#FF0000",
fillOpacity: 0.35,
});
bermudaTriangle.setMap(map);
}
