attozk/gist:e01e6ba24b0113ded54fe978f244d31c

## gistfile1.txt
<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <title>ElasticSearch GeoPolygon Drawing Utility</title>
    <style>
        html, body {
            height  : 100%;
            margin  : 0;
            padding : 0;
        }

        #map {
            height : 600px;
        }

        table {
            width: 80%;
        }
        table tr td {
            vertical-align: top;
        }
        table tr td:nth-child(1) {
            width: 10%;
        }
        table tr td:nth-child(2) {
            width: 90%;
        }
        textarea { width: 100%; }
        input { width: 30%; }
    </style>
    <script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>
</head>
<body>

    <table>
        <tr>
            <td>Shape</td>
            <td>
                <textarea id="shape">[-80.190, 25.774], [ -66.118, 18.466], [-64.757, 32.321],[-80.190, 25.774]</textarea>
                <p>Enter shape in format: e.g. [lng, lat], [lng, lat]<br/>
                   1. [-80.190, 25.774], [ -66.118, 18.466], [-64.757, 32.321],[-80.190, 25.774] <br/>
                   2.

                   [
                          3.0393063856686,
                          50.518243082097
                        ],
                        [
                          3.0144060457509,
                          50.532322358986
                        ],
                        [
                          3.0078311327497,
                          50.541666481466
                        ],
                        [
                          3.0058882294197,
                          50.548460990096
                        ],
                        [
                          2.9817246359913,
                          50.562084285196
                        ],
                        [
                          2.9853451932994,
                          50.564481142822
                        ],
                        [
                          3.0129333563982,
                          50.555425320071
                        ],
                        [
                          3.021391541532,
                          50.567208612243
                        ],
                        [
                          3.0284631168484,
                          50.562665753062
                        ],
                        [
                          3.0398846640865,
                          50.572903234764
                        ],
                        [
                          3.0425617260693,
                          50.572067662788
                        ],
                        [
                          3.0408398743791,
                          50.56902568296
                        ],
                        [
                          3.0549224732193,
                          50.560018139208
                        ],
                        [
                          3.0689087809327,
                          50.556385146954
                        ],
                        [
                          3.063100553549,
                          50.531050541802
                        ],
                        [
                          3.049340094405,
                          50.528462829181
                        ],
                        [
                          3.0393063856686,
                          50.518243082097
                        ]
                </p>
            </td>
        </tr>
        <tr>
            <td>Point</td>
            <td>
                <input type="text" id="point" value="24.886, -70.268"></textarea>
                <p>format: lat, lng e.g. 24.886, -70.268</p>
            </td>
        </tr>
        <tr><td colspan="2"><button onclick="draw();">Draw</button></td></tr>
    </table>

    <div id="map"></div>
    <script>
        function draw()
        {
            center = $('#point').val();
            center = center.replace(/\s|\]/g, '');
            centerCoords = center.split(',');
            centerLag = parseFloat(centerCoords[0]);
            centerLng = parseFloat(centerCoords[1]);

            var map = new google.maps.Map(document.getElementById('map'), {
                zoom: 5,
                center: {lat: centerLag, lng: centerLng},
                mapTypeId: 'terrain'
            });

            //  [ {lat: 25.774, lng: -80.190}, {lat: 18.466, lng: -66.118}, {lat: 32.321, lng: -64.757}, {lat: 25.774, lng: -80.190} ]
            paths = [];
            shape = $('#shape').val();
            shapeCoords = shape.split('[');

            $.each(shapeCoords, function (i, v)
            {
                v = v.replace(/\s|\]/g, '');
                cord = v.split(',');
                lng = parseFloat(cord[0]);
                lat = parseFloat(cord[1]);

                if (lat && lng) {
                    o = {lat: lat, lng: lng};
                    paths.push(o);
                }
            });

            var polygon = new google.maps.Polygon({
                paths: paths,
                strokeColor: '#FF0000',
                strokeOpacity: 0.8,
                strokeWeight: 2,
                fillColor: '#FF0000',
                fillOpacity: 0.35
            });
            polygon.setMap(map);

            var marker = new google.maps.Marker({
                position: new google.maps.LatLng(centerLag, centerLng),
                map: map,
                title: 'Hello World!'
            });
            marker.setMap(map);
        }
    </script>
    <script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyA3dm89q9hPfnlXHEIgzfHwV-WykMlA3Fk"></script>
</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
	<meta charset="utf-8">
	<title>ElasticSearch GeoPolygon Drawing Utility</title>
	<style>
	html, body {
	height : 100%;
	margin : 0;
	padding : 0;
	}

	#map {
	height : 600px;
	}

	table {
	width: 80%;
	}
	table tr td {
	vertical-align: top;
	}
	table tr td:nth-child(1) {
	width: 10%;
	}
	table tr td:nth-child(2) {
	width: 90%;
	}
	textarea { width: 100%; }
	input { width: 30%; }
	</style>
	<script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>
	</head>
	<body>

	<table>
	<tr>
	<td>Shape</td>
	<td>
	<textarea id="shape">[-80.190, 25.774], [ -66.118, 18.466], [-64.757, 32.321],[-80.190, 25.774]</textarea>
	<p>Enter shape in format: e.g. [lng, lat], [lng, lat]<br/>
	1. [-80.190, 25.774], [ -66.118, 18.466], [-64.757, 32.321],[-80.190, 25.774] <br/>
	2.

	[
	3.0393063856686,
	50.518243082097
	],
	[
	3.0144060457509,
	50.532322358986
	],
	[
	3.0078311327497,
	50.541666481466
	],
	[
	3.0058882294197,
	50.548460990096
	],
	[
	2.9817246359913,
	50.562084285196
	],
	[
	2.9853451932994,
	50.564481142822
	],
	[
	3.0129333563982,
	50.555425320071
	],
	[
	3.021391541532,
	50.567208612243
	],
	[
	3.0284631168484,
	50.562665753062
	],
	[
	3.0398846640865,
	50.572903234764
	],
	[
	3.0425617260693,
	50.572067662788
	],
	[
	3.0408398743791,
	50.56902568296
	],
	[
	3.0549224732193,
	50.560018139208
	],
	[
	3.0689087809327,
	50.556385146954
	],
	[
	3.063100553549,
	50.531050541802
	],
	[
	3.049340094405,
	50.528462829181
	],
	[
	3.0393063856686,
	50.518243082097
	]
	</p>
	</td>
	</tr>
	<tr>
	<td>Point</td>
	<td>
	<input type="text" id="point" value="24.886, -70.268"></textarea>
	<p>format: lat, lng e.g. 24.886, -70.268</p>
	</td>
	</tr>
	<tr><td colspan="2"><button onclick="draw();">Draw</button></td></tr>
	</table>

	<div id="map"></div>
	<script>
	function draw()
	{
	center = $('#point').val();
	center = center.replace(/\s\|\]/g, '');
	centerCoords = center.split(',');
	centerLag = parseFloat(centerCoords[0]);
	centerLng = parseFloat(centerCoords[1]);

	var map = new google.maps.Map(document.getElementById('map'), {
	zoom: 5,
	center: {lat: centerLag, lng: centerLng},
	mapTypeId: 'terrain'
	});

	// [ {lat: 25.774, lng: -80.190}, {lat: 18.466, lng: -66.118}, {lat: 32.321, lng: -64.757}, {lat: 25.774, lng: -80.190} ]
	paths = [];
	shape = $('#shape').val();
	shapeCoords = shape.split('[');

	$.each(shapeCoords, function (i, v)
	{
	v = v.replace(/\s\|\]/g, '');
	cord = v.split(',');
	lng = parseFloat(cord[0]);
	lat = parseFloat(cord[1]);

	if (lat && lng) {
	o = {lat: lat, lng: lng};
	paths.push(o);
	}
	});

	var polygon = new google.maps.Polygon({
	paths: paths,
	strokeColor: '#FF0000',
	strokeOpacity: 0.8,
	strokeWeight: 2,
	fillColor: '#FF0000',
	fillOpacity: 0.35
	});
	polygon.setMap(map);

	var marker = new google.maps.Marker({
	position: new google.maps.LatLng(centerLag, centerLng),
	map: map,
	title: 'Hello World!'
	});
	marker.setMap(map);
	}
	</script>
	<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyA3dm89q9hPfnlXHEIgzfHwV-WykMlA3Fk"></script>
	</body>
	</html>