Einfügen von Daten in die Datenbank von Google Maps mit asp.NET C#

Question

Ich entwickle derzeit ein Projekt mit Google Maps. Die ganze Funktion, die im stucked in wird der Benutzer eine Spur auf Google Maps erstellen lassen. Der Benutzer wird in der Lage sein, die Start- und Zielposition auf der Strecke mit 2 verschiedenen Markern zu wählen, jeder dieser Marker hat einen Radius, der auch durch den Benutzer editierbar ist. Die Sache ist, ich weiß nicht, wie man die Positionen mit Javascript + C# einfügen. Ich muss in der Lage sein, diese Variablen in den Code dahinter zu verwenden, aber ich weiß nicht, wie.

Das ist im Moment mein Javascript:

function init() {
var mapDiv = document.getElementById('Map');
var map = new google.maps.Map(mapDiv, {
    center: new google.maps.LatLng(37.790234970864, -122.39031314844),
    zoom: 8,
    mapTypeId: google.maps.MapTypeId.ROADMAP
});

google.maps.event.addListener(map, 'click', function () {
    var distanceWidget = new DistanceWidget(map);
});

google.maps.event.addListener(distanceWidget, 'distance_changed', function () {
    displayInfo(distanceWidget);
});

google.maps.event.addListener(distanceWidget, 'position_changed', function () {
    displayInfo(distanceWidget);
});
}

function DistanceWidget(map) {
this.set('map', map);
this.set('position', map.getCenter());

var marker = new google.maps.Marker({
    draggable: true,
    title: 'Move the radius!'
});

// Bind the marker map property to the DistanceWidget map property
marker.bindTo('map', this);

// Bind the marker position property to the DistanceWidget position
// property
marker.bindTo('position', this);

// Create a new radius widget
var radiusWidget = new RadiusWidget();

// Bind the radiusWidget map to the DistanceWidget map
radiusWidget.bindTo('map', this);

// Bind the radiusWidget center to the DistanceWidget position
radiusWidget.bindTo('center', this, 'position');

// Bind to the radiusWidgets' distance property
this.bindTo('distance', radiusWidget);

// Bind to the radiusWidgets' bounds property
this.bindTo('bounds', radiusWidget);
}

function RadiusWidget() {
var circle = new google.maps.Circle({
    fillColor: 'Green',
    strokeColor: 'White',
    strokeWeight: 1
});

// Set the distance property value, default to 50km.
this.set('distance', 50);

// Bind the RadiusWidget bounds property to the circle bounds property.
this.bindTo('bounds', circle);

// Bind the circle center to the RadiusWidget center property
circle.bindTo('center', this);

// Bind the circle map to the RadiusWidget map
circle.bindTo('map', this);

// Bind the circle radius property to the RadiusWidget radius property
circle.bindTo('radius', this);

this.addSizer_();
}
RadiusWidget.prototype = new google.maps.MVCObject();

RadiusWidget.prototype.distance_changed = function () {
this.set('radius', this.get('distance') * 1000);
};

/**
* Add the sizer marker to the map.
*
* @private
*/
RadiusWidget.prototype.addSizer_ = function () {
var sizer = new google.maps.Marker({
    draggable: true,
    title: 'Scale me!'
});

sizer.bindTo('map', this);
sizer.bindTo('position', this, 'sizer_position');

var me = this;
google.maps.event.addListener(sizer, 'drag', function () {
    // Set the circle distance (radius)
    me.setDistance();
});
};

RadiusWidget.prototype.center_changed = function () {
var bounds = this.get('bounds');

// Bounds might not always be set so check that it exists first.
if (bounds) {
    var lng = bounds.getNorthEast().lng();

    // Put the sizer at center, right on the circle.
    var position = new google.maps.LatLng(this.get('center').lat(), lng);
    this.set('sizer_position', position);
 }
 };

 RadiusWidget.prototype.distanceBetweenPoints_ = function (p1, p2) {
 if (!p1 || !p2) {
    return 0;
 }

var R = 6371; // Radius of the Earth in km
var dLat = (p2.lat() - p1.lat()) * Math.PI / 180;
var dLon = (p2.lng() - p1.lng()) * Math.PI / 180;
var a = Math.sin(dLat / 2) * Math.sin(dLat / 2) +
Math.cos(p1.lat() * Math.PI / 180) * Math.cos(p2.lat() * Math.PI / 180) *
Math.sin(dLon / 2) * Math.sin(dLon / 2);
var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
var d = R * c;
return d;
};

RadiusWidget.prototype.setDistance = function () {
// As the sizer is being dragged, its position changes.  Because the
// RadiusWidget's sizer_position is bound to the sizer's position, it will
// change as well.
var pos = this.get('sizer_position');
var center = this.get('center');
var distance = this.distanceBetweenPoints_(center, pos);

// Set the distance property for any objects that are bound to it
this.set('distance', distance);
};

function displayInfo(widget) {
var info = document.getElementById('Menu');
info.innerHTML = 'Position: ' + widget.get('position') + ', distance: ' +
      widget.get('distance');
}

DistanceWidget.prototype = new google.maps.MVCObject();
google.maps.event.addDomListener(window, 'load', init);

Dies ist mein ASPX/HTML Code:

<%@ Page Title="" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true"           CodeBehind="Tracks.aspx.cs" Inherits="DriverCompetition.WebForm11" %>
 <asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
<script type="text/javascript"
src="http://maps.googleapis.com/maps/api/js?key=ABQIAAAAwdJ7hmSqsGQ-2CZS7tmTDxQz-          J5LV6rASCxLYU1xMqKNc_nHIxSyxLuMNTR9V0zkLOGf4DPsy1V7KA&sensor=true">
 </script>
 <script type='text/javascript' src='../Scripts/maps.js'></script>
 </asp:Content>
 <asp:Content ID="Content2" ContentPlaceHolderID="BorderText" runat="server">
<p>
 &nbsp;Tracks</p>
 </asp:Content>

 <asp:Content ID="Content3" ContentPlaceHolderID="ContentViewPlaceHolder" runat="server">

 <div id="Menu">
 Menu here
 </div>

 </asp:Content>
 <asp:Content ID="Content4" ContentPlaceHolderID="HeaderHolder" runat="server">
 <body onload="init()">
 <div id="Map"></div>
 </body>
 </asp:Content>