JSFiddle - React, Tailwind, and code Playground

by Noel Calonia

HTML

<script src="https://maps.googleapis.com/maps/api/js?sensor=false&amp;amp;language=en"></script>
<div id="map-canvas" style="width:500px;height:500px;"></div>

JavaScript

function initialize() {
    var mapOptions = {
        zoom: 1,
        center: new google.maps.LatLng(7.292316, 125.679508),
				zoom: 15,
        mapTypeId: google.maps.MapTypeId.TERRAIN
    };


    var map = new google.maps.Map(document.getElementById('map-canvas'),
    mapOptions);

    var worldCoords = [
    new google.maps.LatLng(-85.1054596961173, -180),
    new google.maps.LatLng(85.1054596961173, -180),
    new google.maps.LatLng(85.1054596961173, 180),
    new google.maps.LatLng(-85.1054596961173, 180),
    new google.maps.LatLng(-85.1054596961173, 0)];

    //var EuropeCoords = [
    //new google.maps.LatLng(29.68224948021748, -23.676965750000022),
    //new google.maps.LatLng(29.68224948021748, 44.87772174999998),
    //new google.maps.LatLng(71.82725578445813, 44.87772174999998),
    //new google.maps.LatLng(71.82725578445813, -23.676965750000022)];
    
    var EuropeCoords = [
		{lat: 7.292778, lng: 125.678237},
		{lat: 7.292177, lng: 125.677985},
		{lat: 7.291156, lng: 125.680874},
		{lat: 7.292510, lng: 125.681394},
		{lat: 7.292778, lng: 125.678237}];


    // Construct the polygon.
    poly = new google.maps.Polygon({
        paths: [worldCoords, EuropeCoords],
        strokeColor: '#000000',
        strokeOpacity: 0.8,
        strokeWeight: 2,
        fillColor: '#000000',
        fillOpacity: 0.32
    });

    poly.setMap(map);
}
initialize();