Mas o que me quebra a cabeça é a parte de servidor.
Gostaria de uma ajuda. Tenho um mapa onde desenho polígonos, assim que termina o desenho automaticamente abre um modal do bootstrap, que peguei de um exemplo, e nele são inseridos automaticamente as coordenadas desse poligono.
Queria poder salvar ele no servidor local e nao faço ideia como proceder... preciso que tenha uma id cada poligono desenhado. Alguem pode me ajudar?
segue o que fiz ate agora
<?php
require 'connection.php';
?>
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, width=device-width"/>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<!--Conexão com CSS do bootstrap-->
<link rel="stylesheet" href="google/bootstrap.css">
<!--Conexão com jquery do google-->
<!--Conexão com js do bootstrap-->
<style>
#map {
height: 100%;
}
html, body {
height: 100%;
margin: 0;
padding: 0;
}
p.vd {
background-color: green;
position: absolute;
top: 1px;
left: 10px;
}
p.vm {
background-color: red;
position: absolute;
top: 1px;
left: 10px;
}
</style>
<!--Conexão com API do google-->
<script src="https://maps.googleapis.com/maps/api/js?key=SUA_API_AKI&libraries=drawing&callback=initMap"
async defer></script>
</head>
<body>
<center><div id="info"></div></center>
<!--div que mostra o mapa-->
<div id="map"></div>
<!--div por cima do mapa onde mostra se está conectado com o servidor ou não-->
<div>
<?php
if (!$conn){
?>
<p class="vm">DESCONECTADO</p>
<?php
}
else{
?>
<p class="vd">CONECTADO</p>
<?php
}
?>
</div>
<!--JS do mapa com a ferramenta de desenho-->
<script>
var map;
var ferramenta;
var contador_poligono = 0;
var array_pol = [];
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
zoom: 18,
center: new google.maps.LatLng(-27.131034, -51.468336),
//configuração do botão de mapa e tipo
mapTypeControl: false,
//tipo do mapa
mapTypeId: 'roadmap',
//orientação do controle
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR,
position: google.maps.ControlPosition.TOP_Left
},
//configuração do botão de zoom
zoomControl: false,
zoomControlOptions: {position: google.maps.ControlPosition.LEFT_CENTER},
//configuração do botão de street view
scaleControl: false,
streetViewControl: false,
streetViewControlOptions: {position: google.maps.ControlPosition.LEFT_TOP},
//configuração do botão de tela cheia
fullscreenControl: false,
});
//codigo para a ferramenta de desenho
ferramenta = new google.maps.drawing.DrawingManager({
drawingControl: true,
drawingControlOptions: {
position: google.maps.ControlPosition.TOP_CENTER,
drawingModes: [
google.maps.drawing.OverlayType.POLYGON,
],
},
polygonOptions: {
fillColor: "red",
fillOpacity: 3,
strokeWeight: 2,
clickable: true,
draggable: false,
editable: false,
zIndex: 1,
},
});
ferramenta.setMap(map);
//eventos do desenho
google.maps.event.addListener(ferramenta, 'polygoncomplete', function(polygon){
//cada vez que termina um desenho adiciona +1
contador_poligono++;
//escreve no modal o contador
document.getElementById('identif').value = contador_poligono;
// faz loop do click capturando as coordenadas e adicionando na pagina
for ( var i = 0; i < polygon.getPath().getLength(); i++) {
xypol = polygon.getPath().getAt(i);
document.getElementById('coords1').innerHTML +=
"<div><b>Coordenada X "+ i +"</b><input class='form-control' value="+ xypol.lat() + "></div>"
document.getElementById('coords2').innerHTML +=
"<div><b>Coordenada Y "+ i +"</b> <input class='form-control' value="+ xypol.lng() + "></div>"
}
$('#add_place').modal('toggle');
ferramenta.setDrawingMode(null);
})
}
</script>
</body>
</html>
<!-- Modal add-->
<div class="modal fade" id="add_place" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Add Place</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<form method="POST" action="crud.php?action=create">
<div class="modal-body">
<div class="form-group row">
<div class="col-md-2">
<label>ID</label> <input id="identif" class="form-control" type="text" name="id"/>
</div>
<div class="col-md-12">
<label>Nome</label>
<input class="form-control" type="text" name="name"/>
</div>
<div class="col-md-12">
<label>Endereço</label>
<input class="form-control" type="text" name="adress"/>
</div>
</div>
<div class="form-group row">
<div id="coords1" class="col-md-6">
</div>
<div id="coords2" class="col-md-6">
</div>
</div>
<div class="form-group row">
<div class="col-md-6">
<label>Tipo</label>
<input class="form-control" type="text" name="type"/>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-primary">Save</button>
</div>
</form>
</div>
</div>
</div>
Navegar é preciso, viver... também. 
