title: Inserting data in Database from Google Maps using asp.NET C#
body: <p>Im currently developing a project using Google Maps. The whole function that im stucked in is going to let the user create a track on google maps. The user will be able to select the start and finish position on the track using 2 different markers, each of those markers got an radius which also is editable by the user. The thing is, i don't know how to Insert the positions using Javascript + C#. I need to be able to use those variables in the code behind but i don't know how.</p>
  
  <p><strong>This is my Javascript right now:</strong></p>
  
  <pre><code>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);
  </code></pre>
  
  <p><strong>This is my ASPX/HTML Code:</strong></p>
  
  <pre><code>&lt;%@ Page Title="" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true"           CodeBehind="Tracks.aspx.cs" Inherits="DriverCompetition.WebForm11" %&gt;
   &lt;asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server"&gt;
  &lt;script type="text/javascript"
  src="http://maps.googleapis.com/maps/api/js?key=ABQIAAAAwdJ7hmSqsGQ-2CZS7tmTDxQz-          J5LV6rASCxLYU1xMqKNc_nHIxSyxLuMNTR9V0zkLOGf4DPsy1V7KA&amp;sensor=true"&gt;
   &lt;/script&gt;
   &lt;script type='text/javascript' src='../Scripts/maps.js'&gt;&lt;/script&gt;
   &lt;/asp:Content&gt;
   &lt;asp:Content ID="Content2" ContentPlaceHolderID="BorderText" runat="server"&gt;
  &lt;p&gt;
   &amp;nbsp;Tracks&lt;/p&gt;
   &lt;/asp:Content&gt;
  
   &lt;asp:Content ID="Content3" ContentPlaceHolderID="ContentViewPlaceHolder" runat="server"&gt;
  
   &lt;div id="Menu"&gt;
   Menu here
   &lt;/div&gt;
  
   &lt;/asp:Content&gt;
   &lt;asp:Content ID="Content4" ContentPlaceHolderID="HeaderHolder" runat="server"&gt;
   &lt;body onload="init()"&gt;
   &lt;div id="Map"&gt;&lt;/div&gt;
   &lt;/body&gt;
   &lt;/asp:Content&gt;
  </code></pre>