在Google数据库中保存Google地图的坐标和数据

Question

I am making a map project where when I choose an area (with google maps drawing tools) an info window pops up and I can write a Name and a Description and then save these and its coordinates. I am using a POST form and to this moment I am able to save in my DB the Name and Description but I cant find a way to save the coordinates. I have already tried with no success to pass it through POST or put some PHP in my JS. Here is my js code for the rectangle drawing tool:

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);
});

I tried sending the coordinates as a hidden field but I can't make it work.

I tried it like this:

<input type="hidden" name="coords" id="coords" value="coordsrec">

but it saves it as the word "coordsrec" in the DB.

I also tried:

<input type="hidden" name="coords" id="coords" value="<?php echo $coordsrec; ?>"> 

or added the line:

document.getElementById("coords").value = coordsrec; . 

Answer 1

Add the coordinates you create (coordsrec) into a field in the form:

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

code snippet:

 // 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>