データベース内のGoogleマップから座標とデータを保存する

Question

私は、Googleマップ描画ツールを使用して領域を選択すると情報ウィンドウがポップアップし、名前と説明を書き込んで保存することができるマッププロジェクトを作成していますとその座標。私はPOSTフォームを使用しています。この瞬間に私のDBに名前と説明を保存することができますが、座標を保存する方法は見つけられません。私はすでに成功してPOSTでそれを渡すか、私のJSにいくつかのPHPを入れてみました。手伝ってくれる？私に何かヒントを教えてください？いくつかのコード例？前もって感謝します！！！

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

コードスニペット は、ここで矩形描画ツールのための私のjsのコードです：

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