Сохранение координат и данных с карт Google в базе данных

Question

Я делаю проект карты, где, когда я выбираю область (с инструментами рисования карт Google), появляется информационное окно, и я могу написать имя и описание, а затем сохранить их и его координаты. Я использую форму POST, и к этому моменту я могу сохранить в своей БД имя и описание, но я не могу найти способ сохранить координаты. Я уже пробовал без каких-либо успехов передать его через POST или добавить PHP в свой JS. Не могли бы вы помочь? Дайте мне какой-нибудь намек? Пример кода примера? Заранее спасибо!!! Вот мой JS код инструмента прямоугольник рисования:

google.maps.event.addListener(drawingManager, 'rectanglecomplete', function(rectangle) { 

    var ne = rectangle.getBounds().getNorthEast(); 
    var sw = rectangle.getBounds().getSouthWest(); 
    var nelat = ne.lat(); 
    var nelng = ne.lng(); 
    var swlat = sw.lat(); 
    var swlng = sw.lng(); 
    var coordsrec = ';' + nelat.toFixed(6) + ';' + nelng.toFixed(6)+ ';' + swlat.toFixed(6) + ';' + swlng.toFixed(6); 
    //console.log(coordsrec); 

    contentsr = '<form action="SaveData.php" method="POST"><b>Region Name : </b><br/><input type="text" size="20" name="region_name"/><input type="hidden" name="region_type" value="2"><br/><b>Description : </b><br/><textarea name="region_desc" cols="20" rows="3"></textarea><br/><center><br/><input type="submit" value="Save Region" name="save_region"></center></form>'; 

    var boundsr = new google.maps.LatLng(ne.lat(), ne.lng()); 

    infoWindow.setContent(contentsr); 
    infoWindow.setPosition(boundsr); 
    drawingManager.setDrawingMode(null); 
    infoWindow.open(map); 
}); 

Answer 1

Добавить координаты вы создаете (coordsrec) в поле в виде:

var coordsrec = nelat.toFixed(6) + ';' + nelng.toFixed(6)+ ';' + swlat.toFixed(6) + ';' + swlng.toFixed(6); 

contentsr = '<form action="SaveData.php" method="POST"><b>Region Name : </b><br/> 
      <input type="text" size="20" name="region_name"/> 
      <input type="hidden" name="region_type" value="2"><br/> 
      <b>Description : </b><br/><textarea name="region_desc" cols="20" rows="3"></textarea><br/> 
      Coordinates:<br/><input name="coords" type="text" size="40" value="'+coordsrec+'"/><br/> 
      <center><br/><input type="submit" value="Save Region" name="save_region"></center> 
      </form>'; 

proof of concept fiddle

фрагмент кода:

// This example requires the Drawing library. Include the libraries=drawing 
 
// parameter when you first load the API. For example: 
 
// <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=drawing"> 
 
function initMap() { 
 
    var map = new google.maps.Map(document.getElementById('map'), { 
 
    center: { 
 
     lat: -34.397, 
 
     lng: 150.644 
 
    }, 
 
    zoom: 8 
 
    }); 
 
    var infoWindow = new google.maps.InfoWindow(); 
 
    var drawingManager = new google.maps.drawing.DrawingManager({ 
 
    drawingMode: google.maps.drawing.OverlayType.RECTANGLE, 
 
    drawingControl: true, 
 
    drawingControlOptions: { 
 
     position: google.maps.ControlPosition.TOP_CENTER, 
 
     drawingModes: [google.maps.drawing.OverlayType.RECTANGLE] 
 
    } 
 
    }); 
 
    drawingManager.setMap(map); 
 
    google.maps.event.addListener(drawingManager, 'rectanglecomplete', function(rectangle) { 
 

 
    var ne = rectangle.getBounds().getNorthEast(); 
 
    var sw = rectangle.getBounds().getSouthWest(); 
 
    var nelat = ne.lat(); 
 
    var nelng = ne.lng(); 
 
    var swlat = sw.lat(); 
 
    var swlng = sw.lng(); 
 
    var coordsrec = nelat.toFixed(6) + ';' + nelng.toFixed(6) + ';' + swlat.toFixed(6) + ';' + swlng.toFixed(6); 
 
    //console.log(coordsrec); 
 

 
    contentsr = '<form action="SaveData.php" method="POST"><b>Region Name : </b><br/><input type="text" size="20" name="region_name"/><input type="hidden" name="region_type" value="2"><br/><b>Description : </b><br/><textarea name="region_desc" cols="20" rows="3"></textarea><br/>Coordinates:<br/><input name="coords" type="text" size="40" value="' + coordsrec + '"/><br/><center><br/><input type="submit" value="Save Region" name="save_region"></center></form>'; 
 

 
    var boundsr = new google.maps.LatLng(ne.lat(), ne.lng()); 
 

 
    infoWindow.setContent(contentsr); 
 
    infoWindow.setPosition(boundsr); 
 
    drawingManager.setDrawingMode(null); 
 
    infoWindow.open(map); 
 
    }); 
 
}

html, 
 
body { 
 
    height: 100%; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
#map { 
 
    height: 100%; 
 
}

<div id="map"></div> 
 
<!-- Replace the value of the key parameter with your own API key. --> 
 
<script src="https://maps.googleapis.com/maps/api/js?libraries=drawing&callback=initMap" async defer></script>