Examples
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> </head> <body> <div style="height: 500px; width: 500px"> <div id="app"></div> </div> <button class = "btnPolygon" onclick="Polygon()">Polygon </button> <button class = "btnRemovePolygon" onclick="removePolygon()">removePolygon </button> <script src="https://maps.fatos.biz/dist/fatosmap-gl.js"> </script> <script> let LatLng ={lat: 13.753815, lng: 100.501833} let mapInstance = new fatosmap.maps.Map( document.getElementById("app"), { zoom: 11, center: LatLng, service_id: 1, key: 'Please enter your key' } ) let bermudaTriangle; function Polygon(){ let triangleCoords = [ {lat: 25.774, lng: -80.190}, {lat: 18.466, lng: -66.118}, {lat: 32.321, lng: -64.757}, {lat: 25.774, lng: -80.190} ]; bermudaTriangle = new fatosmap.maps.Polygon({ paths: triangleCoords, //Must fillColor: 'yellow', // Optional, Default '#000000'(black) fillOpacity: 0.35 // Optional, Default 1.0, between 0.0 and 1.0 }); bermudaTriangle.setMap(mapInstance); mapInstance.setZoom(3); mapInstance.setCenter({lat: 28.161367, lng: -68.282032}); }; function removePolygon(){ bermudaTriangle.setMap(null); }; </script> <style> </style> </body> </html>