<div><button onClick="savePoly()">save</button></div>
<style>
div#map {
	height: 80vh;
	}
img[src='img/spotlight-poi2.png']	{width: 27px!important; height: 43px!important}

</style>

<?php
$fn='../pages/poligon.data';
if(isset($_GET['savePolygon']))
if(isset($_POST['data'])){
	$data=$post['data'];
	file_put_contents($fn,$data);
	}
?>


<!--Google Maps Start-->
<div id="map" class="h-100" style="position: fixed!important; overflow: hidden; top: 0; width: 100%;"></div>
<!--Google Maps End-->


<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script>
var ctrlSelected = false;
window.onkeydown = function(e) {
	ctrlSelected = ((e.keyIdentifier == 'Control') || (e.ctrlKey == true));
	}
window.onkeyup = function(e) {
	ctrlSelected = false;
	}


var data=<?php 
	if(file_exists($fn))
	echo file_get_contents($fn);
	else echo '[]';
	?>;
var poly=false;
var markers={};
var markerscount=0;
function savePoly(){
	var pp=[];
	$.each(markers,function(i,e){
		pp.push({lat:e.position.lat(),lng:e.position.lng()});
		});
	pp=JSON.stringify(pp);
	event.preventDefault();
    var newForm = jQuery('<form>', {
        'action': '?Action=Poly&savePolygon=1',
        'method': 'post'
    }).append(jQuery('<input>', {
        'name': 'data',
        'value': pp,
        'type': 'hidden'
    }));
	$('body').append(newForm);
    newForm.submit();
	}
function createStartMarker(pos){
	const marker = new google.maps.Marker({
		position: pos,
		map: map,
		icon: new google.maps.MarkerImage(
			'img/spotlight-poi2.png', // URL
			new google.maps.Size( 27, 43), // (width,height)
			new google.maps.Point( 0, 0 ), // The origin point (x,y)
			new google.maps.Point( 13, 44 ) // The anchor point (x,y)
			),
		draggable: true,
		/*zIndex: 100,*/
		});
	google.maps.event.addListener(marker, 'dragend', function() {
		drawPoly(markers);
		})
	google.maps.event.addListener(marker, 'click', function(evt){
		if(ctrlSelected){
			num=this.num;
			this.setMap(null);
			delete (markers[num]);
			drawPoly(markers);
			}
		});
	marker.num='m'+(markerscount++);
	markers[marker.num]=marker;
	}
function drawPoly(markers){
	if(poly) poly.setMap(null);
	var path=[];
	$.each(markers,function(i,e){
		path.push(e.position);
		})
	poly = new google.maps.Polygon({ map: map, path: path, strokeColor: "#FF0000", strokeOpacity: 0.8, strokeWeight: 2, fillColor: "#FF0000", fillOpacity: 0.35 });
	}
var bounds;
var map;
function initMap() {
	const Georgia = { lat: 42.2688452, lng: 43.8634849 }; 
    map = new google.maps.Map(document.getElementById('map'), {
        mapTypeControl: true,
        center: Georgia,  
        zoom: 7,
        fullscreenControl: true,
    });

	map.addListener("click", (e) => {
		if(ctrlSelected){
			createStartMarker(e.latLng);
			drawPoly(markers);
			}
		});
	if(data.length>0){
		bounds = new google.maps.LatLngBounds(); 
		$.each(data,function(i,e){
			createStartMarker(e);
			bounds.extend(e);
			})
		drawPoly(markers);
		map.fitBounds(bounds);
		}
	}
</script>

<!--<script src="https://cdn.klokantech.com/maptilerlayer/v1/index.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBwMDgpU09Sbtra3nFcdTlgkiNuT-4cZwg&libraries=geometry&region=GE&language=ka&callback=initMap"></script>-->

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=geometry&region=GE&language=ka&callback=initMap"></script>