JSFiddle - React, Tailwind, and code Playground
by Mehmet Alp
HTML
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Simple Polygon</title>
<style>
html, body, #map-canvas {
height: 100%;
margin: 0px;
padding: 0px
}
</style>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script>
// This example creates a simple polygon representing the Bermuda Triangle.
function initialize() {
var mapOptions = {
zoom: 16,
center: new google.maps.LatLng(37.57021609,36.93978848),
mapTypeId: google.maps.MapTypeId.TERRAIN
};
var bermudaTriangle;
var map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
// Define the LatLng coordinates for the polygon's path.
var triangleCoords = [
new google.maps.LatLng(37.57021609,36.93978848),
new google.maps.LatLng(37.57022405,36.93978779),
new google.maps.LatLng(37.57020815,36.93978739),
new google.maps.LatLng(37.57023179,36.93978534),
new google.maps.LatLng(37.57023907,36.93978122),
new google.maps.LatLng(37.57024565,36.93977555),
new google.maps.LatLng(37.57025133,36.93976850),
new google.maps.LatLng(37.57025593,36.93976031),
new google.maps.LatLng(37.57025932,36.93975121),
new google.maps.LatLng(37.56983688,36.93969421),
new google.maps.LatLng(37.56983127,36.93969233),
new google.maps.LatLng(37.56982591,36.93968955),
new google.maps.LatLng(37.56982087,36.93968593),
new google.maps.LatLng(37.56981624,36.93968153),
new google.maps.LatLng(37.56981211,36.93967641),
new google.maps.LatLng(37.56980853,36.93967067),
new google.maps.LatLng(37.56980557,36.93966440),
new google.maps.LatLng(37.56980327,36.93965770),
new google.maps.LatLng(37.57031162,36.93957027),
new google.maps.LatLng(37.57047529,36.93908115),
new google.maps.LatLng(37.56962660,36.93903489),
new google.maps.LatLng(37.56962523,36.93902910),
new google.maps.LatLng(37.56962436,36.93902314),
new...