admin管理员组文章数量:1426950
Hi, yes I have battled with the Google Documentation, and no, I was not asking anybody to write an application for me FoC! I do quite a lot of SQL forum answering myself on MSDN, and get how the forums work, just probably asked the question quite badly. I appreciate you pointing this out, as hopefully it will lead to more chance of the question being answered. As mentioned, I was really just hoping that somebody could post some working samples of the things I was discussing with, that I could then tinker with. The code that I have so far is below, but is in a bit of a state. Passing in the parameters to the Javascript is not working and I can't figure out how to even start making it accept user interactions with the map as inputs. The sample my code is based on came from a forum thread as I found this much more helpful than the official Google documentation!
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Calculate Distance</title>
<script type="text/javascript"
src=""></script>
</head>
<body style="font-family: Arial; font-size: 13px; color: red;">
<form runat="server">
<div id="map" style="width: 400px; height: 300px;"></div>
<script type="text/javascript">
var startlocation = document.getElementById('Start').textcontent;
var endlocation = document.getElementById('End').textContent;
var directionsService = new google.maps.DirectionsService();
var directionsDisplay = new google.maps.DirectionsRenderer();
var myOptions =
{ zoom:7, mapTypeId: google.maps.MapTypeId.ROADMAP }
var map = new google.maps.Map(document.getElementById("map"), myOptions);
directionsDisplay.setMap(map);
var request =
{
origin: startlocation,
destination: endlocation,
travelMode: google.maps.DirectionsTravelMode.DRIVING
};
directionsService.route(request, function(response, status) {
if (status == google.maps.DirectionsStatus.OK) {
// Display the distance:
document.getElementById('Distance').innerHTML +=
response.routes[0].legs[0].distance.value / 1609.344 + " miles";
directionsDisplay.setDirections(response);
}
});
</script>
<asp:Label ID="Distance" runat="server" Text="Distance: "></asp:Label>
<asp:TextBox ID="Start" runat="server" Text="hedge end"></asp:TextBox>
<asp:TextBox ID="End" runat="server" Text="fareham"></asp:TextBox>
<asp:Button ID="CalcDistance" runat="server" Text="Button" />
</form>
</body>
</html>
I am new to javascript and pretty new to ASP.NET and I have been fiddling with this for days and can't get anywhere.
I want to integrate Google Maps into an ASP.NET page, so that the user can choose to either click 2 points on the map, or instead choose to insert one or both of the addresses into text boxes.
Once the two locations have either been entered or plotted on the map, I then need to return the shortest driving distance in miles to an ASP.NET control.
If somebody could help me out by posting a working sample of this or something similar, I would be really greatful.
Many thanks in advance for your help.
Pete
Hi, yes I have battled with the Google Documentation, and no, I was not asking anybody to write an application for me FoC! I do quite a lot of SQL forum answering myself on MSDN, and get how the forums work, just probably asked the question quite badly. I appreciate you pointing this out, as hopefully it will lead to more chance of the question being answered. As mentioned, I was really just hoping that somebody could post some working samples of the things I was discussing with, that I could then tinker with. The code that I have so far is below, but is in a bit of a state. Passing in the parameters to the Javascript is not working and I can't figure out how to even start making it accept user interactions with the map as inputs. The sample my code is based on came from a forum thread as I found this much more helpful than the official Google documentation!
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Calculate Distance</title>
<script type="text/javascript"
src="http://maps.google./maps/api/js?sensor=false"></script>
</head>
<body style="font-family: Arial; font-size: 13px; color: red;">
<form runat="server">
<div id="map" style="width: 400px; height: 300px;"></div>
<script type="text/javascript">
var startlocation = document.getElementById('Start').textcontent;
var endlocation = document.getElementById('End').textContent;
var directionsService = new google.maps.DirectionsService();
var directionsDisplay = new google.maps.DirectionsRenderer();
var myOptions =
{ zoom:7, mapTypeId: google.maps.MapTypeId.ROADMAP }
var map = new google.maps.Map(document.getElementById("map"), myOptions);
directionsDisplay.setMap(map);
var request =
{
origin: startlocation,
destination: endlocation,
travelMode: google.maps.DirectionsTravelMode.DRIVING
};
directionsService.route(request, function(response, status) {
if (status == google.maps.DirectionsStatus.OK) {
// Display the distance:
document.getElementById('Distance').innerHTML +=
response.routes[0].legs[0].distance.value / 1609.344 + " miles";
directionsDisplay.setDirections(response);
}
});
</script>
<asp:Label ID="Distance" runat="server" Text="Distance: "></asp:Label>
<asp:TextBox ID="Start" runat="server" Text="hedge end"></asp:TextBox>
<asp:TextBox ID="End" runat="server" Text="fareham"></asp:TextBox>
<asp:Button ID="CalcDistance" runat="server" Text="Button" />
</form>
</body>
</html>
I am new to javascript and pretty new to ASP.NET and I have been fiddling with this for days and can't get anywhere.
I want to integrate Google Maps into an ASP.NET page, so that the user can choose to either click 2 points on the map, or instead choose to insert one or both of the addresses into text boxes.
Once the two locations have either been entered or plotted on the map, I then need to return the shortest driving distance in miles to an ASP.NET control.
If somebody could help me out by posting a working sample of this or something similar, I would be really greatful.
Many thanks in advance for your help.
Pete
Share Improve this question edited Sep 23, 2012 at 15:58 Pete Carter asked Sep 22, 2012 at 17:24 Pete CarterPete Carter 2,7313 gold badges25 silver badges35 bronze badges 2- 2 Have you looked at the Google Maps API documentation? This should help you build the basic map. Show us what you have tried so far and where you are struggling, and you will get help. Nobody here will build you the entire application from scratch. – Manuel Leuenberger Commented Sep 22, 2012 at 20:09
- +1 I didn't want to frustrate you, nor did I want to sound harsh in my ment. The original question was just too generic, without any code or concrete scenario. It is way better now and definitely deserves an answer. – Manuel Leuenberger Commented Sep 23, 2012 at 21:50
1 Answer
Reset to default 1Start with this tutorial.
Documentation is here.
How to calculate distance is here.
EDIT:
This is distance calculation example with Google Maps API v3 and ASP.NET.
Client code:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Calculate Distance</title>
<script type="text/javascript" src="http://maps.google./maps/api/js?sensor=false&v=3&libraries=geometry"></script>
<style type="text/css">
#map{width:800px;height:500px}
</style>
</head>
<body style="font-family: Arial; font-size: 13px; color: red;">
<form id="Form1" runat="server">
<div id="map"></div>
<input runat="server" type="hidden" id="DistanceValue" name="DistanceValue" />
<script type="text/javascript">
var latlng = new google.maps.LatLng(54.40708, 18.667485);
var latlng2 = new google.maps.LatLng(54.40708, 18.667485);
var myOptions =
{
zoom:4,
center:latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map= new google.maps.Map(document.getElementById('map'),myOptions);
var marker = new google.maps.Marker({
position: latlng,
title: "Westerplatte - first battle of WW2 in Europe",
clickable: true,
map: map
});
var marker2 = new google.maps.Marker({
position: latlng2,
title: "Westerplatte - first battle of WW2 in Europe",
clickable: true,
map: map
});
google.maps.event.addListener(map, "click", function (event) {
latlng2 = new google.maps.LatLng(event.latLng.lat(), event.latLng.lng());
marker2.setMap(null);
marker2 = new google.maps.Marker({
position: latlng2,
title: "selected by user",
clickable: true,
map: map
});
var hidden = document.getElementById("DistanceValue");
hidden.value = google.maps.geometry.spherical.puteDistanceBetween(latlng, latlng2) / 1000;
});
</script>
<asp:Button ID="Button1" runat="server" Text="Send distance" onclick="Button1_Click" />
<asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
</form>
</body>
</html>
Server code:
protected void Button1_Click(object sender, EventArgs e)
{
if (Request.Form["DistanceValue"] != null)
{
string myHiddenFiledValue = Request.Form["DistanceValue"].ToString();
Label1.Text = myHiddenFiledValue.Split(',','.')[0] + " [km]";
}
}
本文标签： javascriptIntegrating Google Maps with ASPNET websiteStack Overflow
版权声明：本文标题：javascript - Integrating Google Maps with ASP.NET website - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1745392978a2656684.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论