JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=places,drawing,geometry"></script>
<div id="map-canvas">
</div>
CSS
#map-canvas{
height:400px;
margin:0;
padding:0;
width:100%;
}
JavaScript
$(function(){
mapOptions = new Object();
mapOptions.zoom=19;
mapOptions.center = new google.maps.LatLng(33.575802425924934, 73.14534723758698);
mapOptions.mapTypeId=google.maps.MapTypeId.HYBRID;
var map = new google.maps.Map(document.getElementById('map-canvas'),mapOptions);
google.maps.event.addListener(map, 'click', function(event) {
console.log(event.latLng);
});
var polypoints = "(33.575802425924934, 73.14534723758698),(33.575523088532094, 73.14514607191086),(33.57521916842187, 73.14516484737396),(33.575026983094006, 73.14519703388214),(33.575040391386565, 73.14552694559097),(33.575290679132316, 73.14581662416458),(33.57557448668024, 73.14587026834488),(33.57559906839246, 73.14569056034088),(33.57580466062044, 73.14542233943939):(33.57627171070981, 73.14412951469421),(33.575270566751, 73.14402222633362),(33.575413588027466, 73.14471960067749),(33.576504117468154, 73.14465522766113):";
var totalBoundary = 1;
var isGetPoly = false;
var getClubId = 0;
for(var x = 0; x<totalBoundary; x++) {
var polyPoints = polypoints;
var polygonals=polyPoints.split(":");
for(var j = 0;j < polygonals.length;j++) {
var points=polygonals[j].split("),");
var latlng = [];
var latlng1 = [];
var leng=points.length-1;
if(points.length>0) {
for(var k = 0;k < points.length;k++) {
var latslngs=points[k].replace("(","");
var latslng=latslngs.replace(")","");
var ltslng=latslng.split(",");
var latPoint = ltslng[0];
var lngPoint = ltslng[1];
latlng.push(new google.maps.LatLng(latPoint,lngPoint));
latPoint = parseFloat(latPoint)+0.0001;
lngPoint = parseFloat(lngPoint)+0.0001;
latlng1.push(new google.maps.LatLng(latPoint,lngPoint));
}
...