Skip to content

Instantly share code, notes, and snippets.

@javymarmol

javymarmol/drawing_polygone.blade.php

Created November 22, 2018 01:13
Show Gist options
  • Save javymarmol/28f33a8a4fc4bcbbd96ce245a3594531 to your computer and use it in GitHub Desktop.
Save javymarmol/28f33a8a4fc4bcbbd96ce245a3594531 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment