javymarmol/drawing_polygone.blade.php

## drawing_polygone.blade.php
<!DOCTYPE html>
<head>
        <script
                src="https://code.jquery.com/jquery-3.2.1.min.js"
                integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
                crossorigin="anonymous"></script>
        <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCicFZLn6DdO4QBY0USNvoGSyPeFA3C_Bg&libraries=drawing"></script>

</head>
<body>
{{--<input id="pac-input" class="controls" type="text"
       placeholder="Enter a location">--}}
<form method="post" action="/carriers/update" accept-charset="utf-8" id="map_form">
    {{ csrf_field() }}
    <input hidden id="id" name="id" value={{ $id }}>
    <input type="text" name="coordinates" id="coordinates" value={{ $zone }} style="width:400px " />
    <input type="submit" name="save" value="Save!" id="save"  />
</form>
<div id="map_canvas" style="width:500px; height:450px;"></div>

<script>

    var map; // Global declaration of the map
    var iw = new google.maps.InfoWindow(); // Global declaration of the infowindow
    var lat_longs = new Array();

    var polygonArray = [];
    var markers = new Array();
    var drawingManager;


    //Inicializacion del maps
    function initialize() {

        //definicion de los parametros iniciales del mapa
        var myLatlng = new google.maps.LatLng(4.703722389760104, -74.06707763671875);

        var myOptions = {
            zoom:11,
            center: myLatlng,
            mapTypeId: google.maps.MapTypeId.ROADMAP}


        map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);


        //FUNCIONALIDAD GEOLOCALIZACION
        //Ubicacion del mapa or la geolocalizacion
        if (navigator.geolocation) {
            navigator.geolocation.getCurrentPosition(function(position) {
                var pos = {
                    lat: position.coords.latitude,
                    lng: position.coords.longitude
                };
                console.log(myLatlng);
                map.setCenter(pos);
                map.setZoom(14);
            });

        }

        //FUNCIONALIDAD DIBUJO DE POLIGONOS
        //definicion del elemento de dibujo de poligonos y sus propiedades
        drawingManager = new google.maps.drawing.DrawingManager({
            drawingMode: google.maps.drawing.OverlayType.POLYGON,
            drawingControl: true,
            drawingControlOptions: {
                position: google.maps.ControlPosition.TOP_CENTER,
                drawingModes: [google.maps.drawing.OverlayType.POLYGON],
            },
            polygonOptions: {
                editable: true,
                strokeColor: '#FF0000',
                strokeOpacity: 0.8,
                strokeWeight: 2,
                fillColor: '#FF0000',
                fillOpacity: 0.35,
                draggable: true,
                geodesic: true
            }
        });

        //captura de coordenadas en el textbox y validacion para dibujar polygonos al cargar la pagina
        let points = JSON.parse($('#coordinates').val()).map( item =>{
            return { lat: item.lat , lng : item.long };
        });

        var redCoords = points;
        console.log(redCoords);

        // Construct a draggable red triangle with geodesic set to true.
        if(redCoords != ""){new google.maps.Polygon({
            map: map,
            paths: redCoords,
            strokeColor: '#FF0000',
            strokeOpacity: 0.8,
            strokeWeight: 2,
            fillColor: '#FF0000',
            fillOpacity: 0.35,
            draggable: true,
            geodesic: true
        });
        }

        drawingManager.setMap(map);

        //eventos de dibujo y modificacion
        google.maps.event.addListener(drawingManager, 'polygoncomplete', function (polygon) {
            //$('#coordinates').val(polygon.getPath().getArray());
            lat_longs = polygon.getPath().getArray();
            //var lat_longs_json = JSON.parse(lat_longs);
            console.log("coordenadas polygoncomplete: "+ polygon.getPath().getArray());

            //console.log("coordenadas lat_longs JSON: "+ lat_longs_json);
            var zone = {
                points: []
            };

            for (var i = 0; i < lat_longs.length; i++) {
                console.log(lat_longs[i]);
                zone.points.push({
                    "lat"  : lat_longs[i].lat(),
                    "long" : lat_longs[i].lng()
                });

            }
            console.log("coordenadas json: "+ JSON.stringify(zone));

            $('#coordinates').val(JSON.stringify(zone));

        });

        google.maps.event.addListener(drawingManager, "overlaycomplete", function(event) {
            var newShape = event.overlay;
            newShape.type = event.type;
        });

        google.maps.event.addListener(drawingManager, "overlaycomplete", function(event){
            overlayClickListener(event.overlay);
        });
    }
    function overlayClickListener(overlay) {
        google.maps.event.addListener(overlay, "mouseup", function(event){
            $('#coordinates').val(overlay.getPath().getArray());
            console.log("coordenadas onclicklistener:" + $('#coordinates').val());

            console.log("coordenadas paths:" + overlay.getPaths());
        });


/*        //FUNCIONALIDAD BUSQUEDA POR LUGARES

        var input = /!** @type {!HTMLInputElement} *!/(
            document.getElementById('pac-input'));
        var autocomplete = new google.maps.places.Autocomplete(input);
        autocomplete.setTypes(['address']);
        autocomplete.bindTo('bounds', map);

        autocomplete.addListener('place_changed', function() {
            var place = autocomplete.getPlace();
            if (!place.geometry) {
                // User entered the name of a Place that was not suggested and
                // pressed the Enter key, or the Place Details request failed.
                window.alert("No details available for input: '" + place.name + "'");
                return;
            }

            // If the place has a geometry, then present it on a map.
            if (place.geometry.viewport) {
                map.fitBounds(place.geometry.viewport);
            } else {
                map.setCenter(place.geometry.location);
                map.setZoom(17);  // Why 17? Because it looks good.
            }


            var address = '';
            if (place.address_components) {
                address = [
                    (place.address_components[0] && place.address_components[0].short_name || ''),
                    (place.address_components[1] && place.address_components[1].short_name || ''),
                    (place.address_components[2] && place.address_components[2].short_name || '')
                ].join(' ');
            }

            alert('<div><strong>' + place.name + '</strong><br>' + address);
        });*/

    }


    //se inicializa el mapa
    initialize();


    //Funcionalidad de guardado
    $(function(){
        $('#save').click(function(){
            //iterate polygon vertices?
            alert("coordenadas: "+ $('#coordinates').val().toString());
        });
    });
</script>
</body>
</html>
	<!DOCTYPE html>
	<head>
	<script
	src="https://code.jquery.com/jquery-3.2.1.min.js"
	integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
	crossorigin="anonymous"></script>
	<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCicFZLn6DdO4QBY0USNvoGSyPeFA3C_Bg&libraries=drawing"></script>

	</head>
	<body>
	{{--<input id="pac-input" class="controls" type="text"
	placeholder="Enter a location">--}}
	<form method="post" action="/carriers/update" accept-charset="utf-8" id="map_form">
	{{ csrf_field() }}
	<input hidden id="id" name="id" value={{ $id }}>
	<input type="text" name="coordinates" id="coordinates" value={{ $zone }} style="width:400px " />
	<input type="submit" name="save" value="Save!" id="save" />
	</form>
	<div id="map_canvas" style="width:500px; height:450px;"></div>

	<script>

	var map; // Global declaration of the map
	var iw = new google.maps.InfoWindow(); // Global declaration of the infowindow
	var lat_longs = new Array();

	var polygonArray = [];
	var markers = new Array();
	var drawingManager;



	//Inicializacion del maps
	function initialize() {

	//definicion de los parametros iniciales del mapa
	var myLatlng = new google.maps.LatLng(4.703722389760104, -74.06707763671875);

	var myOptions = {
	zoom:11,
	center: myLatlng,
	mapTypeId: google.maps.MapTypeId.ROADMAP}


	map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);



	//FUNCIONALIDAD GEOLOCALIZACION
	//Ubicacion del mapa or la geolocalizacion
	if (navigator.geolocation) {
	navigator.geolocation.getCurrentPosition(function(position) {
	var pos = {
	lat: position.coords.latitude,
	lng: position.coords.longitude
	};
	console.log(myLatlng);
	map.setCenter(pos);
	map.setZoom(14);
	});

	}

	//FUNCIONALIDAD DIBUJO DE POLIGONOS
	//definicion del elemento de dibujo de poligonos y sus propiedades
	drawingManager = new google.maps.drawing.DrawingManager({
	drawingMode: google.maps.drawing.OverlayType.POLYGON,
	drawingControl: true,
	drawingControlOptions: {
	position: google.maps.ControlPosition.TOP_CENTER,
	drawingModes: [google.maps.drawing.OverlayType.POLYGON],
	},
	polygonOptions: {
	editable: true,
	strokeColor: '#FF0000',
	strokeOpacity: 0.8,
	strokeWeight: 2,
	fillColor: '#FF0000',
	fillOpacity: 0.35,
	draggable: true,
	geodesic: true
	}
	});

	//captura de coordenadas en el textbox y validacion para dibujar polygonos al cargar la pagina
	let points = JSON.parse($('#coordinates').val()).map( item =>{
	return { lat: item.lat , lng : item.long };
	});

	var redCoords = points;
	console.log(redCoords);

	// Construct a draggable red triangle with geodesic set to true.
	if(redCoords != ""){new google.maps.Polygon({
	map: map,
	paths: redCoords,
	strokeColor: '#FF0000',
	strokeOpacity: 0.8,
	strokeWeight: 2,
	fillColor: '#FF0000',
	fillOpacity: 0.35,
	draggable: true,
	geodesic: true
	});
	}

	drawingManager.setMap(map);

	//eventos de dibujo y modificacion
	google.maps.event.addListener(drawingManager, 'polygoncomplete', function (polygon) {
	//$('#coordinates').val(polygon.getPath().getArray());
	lat_longs = polygon.getPath().getArray();
	//var lat_longs_json = JSON.parse(lat_longs);
	console.log("coordenadas polygoncomplete: "+ polygon.getPath().getArray());

	//console.log("coordenadas lat_longs JSON: "+ lat_longs_json);
	var zone = {
	points: []
	};

	for (var i = 0; i < lat_longs.length; i++) {
	console.log(lat_longs[i]);
	zone.points.push({
	"lat" : lat_longs[i].lat(),
	"long" : lat_longs[i].lng()
	});

	}
	console.log("coordenadas json: "+ JSON.stringify(zone));

	$('#coordinates').val(JSON.stringify(zone));

	});

	google.maps.event.addListener(drawingManager, "overlaycomplete", function(event) {
	var newShape = event.overlay;
	newShape.type = event.type;
	});

	google.maps.event.addListener(drawingManager, "overlaycomplete", function(event){
	overlayClickListener(event.overlay);
	});
	}
	function overlayClickListener(overlay) {
	google.maps.event.addListener(overlay, "mouseup", function(event){
	$('#coordinates').val(overlay.getPath().getArray());
	console.log("coordenadas onclicklistener:" + $('#coordinates').val());

	console.log("coordenadas paths:" + overlay.getPaths());
	});


	/* //FUNCIONALIDAD BUSQUEDA POR LUGARES

	var input = /!** @type {!HTMLInputElement} *!/(
	document.getElementById('pac-input'));
	var autocomplete = new google.maps.places.Autocomplete(input);
	autocomplete.setTypes(['address']);
	autocomplete.bindTo('bounds', map);

	autocomplete.addListener('place_changed', function() {
	var place = autocomplete.getPlace();
	if (!place.geometry) {
	// User entered the name of a Place that was not suggested and
	// pressed the Enter key, or the Place Details request failed.
	window.alert("No details available for input: '" + place.name + "'");
	return;
	}

	// If the place has a geometry, then present it on a map.
	if (place.geometry.viewport) {
	map.fitBounds(place.geometry.viewport);
	} else {
	map.setCenter(place.geometry.location);
	map.setZoom(17); // Why 17? Because it looks good.
	}


	var address = '';
	if (place.address_components) {
	address = [
	(place.address_components[0] && place.address_components[0].short_name \|\| ''),
	(place.address_components[1] && place.address_components[1].short_name \|\| ''),
	(place.address_components[2] && place.address_components[2].short_name \|\| '')
	].join(' ');
	}

	alert('<div><strong>' + place.name + '</strong><br>' + address);
	});*/

	}



	//se inicializa el mapa
	initialize();


	//Funcionalidad de guardado
	$(function(){
	$('#save').click(function(){
	//iterate polygon vertices?
	alert("coordenadas: "+ $('#coordinates').val().toString());
	});
	});
	</script>
	</body>
	</html>