Question

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.

This is my Javascript right now:

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

This is my 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>

Answer 1

If i understood your question right all you need to do to put the values you want to access in a hiddenfield, and then access them from you code behind.