Saving coordinates and data from Google maps in a database

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>