我正在使用嵌入式谷歌地图（v3）创建一个asp.net应用程序...当我按下提交按钮时，我遇到问题，地图消失了，而不是显示我添加的点和它们之间的路径。输入新地址时标记显示正常，它似乎是导致我麻烦的提交按钮。也许是因为它导致了地图背后没有生存？任何想法都将非常感谢!!!
这是我目前的代码：
<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="NewCallForm.ascx.cs" Inherits="RamRideOps.Controls.NewCallForm" %>
<table class="style1" id="NewCallTable">
<tr>
<td class="style23" align="right">
Thank you for calling RamRide! Can I have your <span class="style3"><strong>
first name</strong></span>
please?</td>
<td class="style24" colspan="2">
<asp:TextBox ID="name" runat="server" CausesValidation="True"
MaxLength="25" style="margin-bottom: 0px"
ontextchanged="newCall_name_TextChanged"></asp:TextBox>
</td>
<td class="style25">
<asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server"
ControlToValidate="name" CssClass="ErrorMessage" ErrorMessage="* Enter the patron's first name."
Font-Bold="False" Display="Dynamic" ValidationGroup="NewCallFormSubmit">*</asp:RequiredFieldValidator>
<asp:RegularExpressionValidator ID="RegularExpressionValidator1" runat="server"
CssClass="ErrorMessage" Display="Dynamic"
ErrorMessage="* Names may only contain letters."
ControlToValidate="name" SetFocusOnError="True"
ValidationExpression="[a-z|A-Z]{2,25}" ValidationGroup="NewCallFormSubmit">*</asp:RegularExpressionValidator>
</td>
<td class="style30">
</td>
<td class="style25">
</td>
</tr>
<tr>
<td class="style4" align="right">
What is the <span class="style3"><strong>phone number</strong></span> our driver
can reach you at?</td>
<td class="style8" colspan="2">
<asp:TextBox ID="phone" runat="server" CausesValidation="True"
MaxLength="14" ontextchanged="newCall_phone_TextChanged" Height="22px"></asp:TextBox>
</td>
<td class="style5">
<asp:RequiredFieldValidator ID="RequiredFieldValidator2" runat="server"
ControlToValidate="phone" CssClass="ErrorMessage" ErrorMessage="* Enter the call-back number."
Font-Bold="False" Display="Dynamic" ValidationGroup="NewCallFormSubmit">*</asp:RequiredFieldValidator>
<asp:RegularExpressionValidator ID="RegularExpressionValidator2" runat="server"
CssClass="ErrorMessage" Display="Dynamic"
ErrorMessage="* Invalid phone number." ControlToValidate="phone"
SetFocusOnError="True"
ValidationExpression="(\d{10})|((\(\d{3}\) ?)|(\d{3}-))?\d{3}-\d{4}"
ValidationGroup="NewCallFormSubmit">*</asp:RegularExpressionValidator>
</td>
<td class="style31">
</td>
<td class="style5">
</td>
</tr>
<tr>
<td class="style17" align="right">
<span class="style3"><strong>How many</strong></span> people need a ride?</td>
<td class="style18" colspan="2">
<asp:TextBox ID="numPatrons" runat="server" CausesValidation="True"
ontextchanged="newCall_numPatrons_TextChanged"></asp:TextBox>
</td>
<td class="style19" style="font-style: italic">
<asp:RequiredFieldValidator ID="RequiredFieldValidator3" runat="server"
ControlToValidate="numPatrons" CssClass="ErrorMessage" ErrorMessage="* Enter the number of patrons."
Font-Bold="False" Display="Dynamic" ValidationGroup="NewCallFormSubmit">*</asp:RequiredFieldValidator>
<asp:RegularExpressionValidator ID="RegularExpressionValidator3" runat="server"
CssClass="ErrorMessage" Display="Dynamic"
ErrorMessage="* Invalid number of patrons." ControlToValidate="numPatrons"
SetFocusOnError="True"
ValidationExpression="(\d{1}[0-9]{1,2})|([1-9{1}])"
ValidationGroup="NewCallFormSubmit">*</asp:RegularExpressionValidator>
<asp:RangeValidator ID="RangeValidator1" runat="server"
ControlToValidate="numPatrons" CssClass="ErrorMessage" Display="Dynamic"
ErrorMessage="Number of patrons must be 1-255" MaximumValue="255"
MinimumValue="1" SetFocusOnError="True"
ValidationGroup="NewCallFormSubmit" Type="Integer">*</asp:RangeValidator>
</td>
<td class="style49">
We can send multiple vehicles for large groups.</td>
<td class="style19">
</td>
</tr>
<tr>
<td class="style11" align="right">
Where is the <span class="style3"><strong>pick-up location</strong></span>?</td>
<td class="style12" colspan="2">
<asp:TextBox ID="pickup" runat="server" CausesValidation="True"
MaxLength="80" Rows="2" TextMode="MultiLine"
onchange="showPickup()"></asp:TextBox>
</td>
<td class="style13">
<asp:RequiredFieldValidator ID="RequiredFieldValidator4" runat="server"
ControlToValidate="pickup" CssClass="ErrorMessage" ErrorMessage="* Enter the pick-up location."
Font-Bold="False" Display="Dynamic" ValidationGroup="NewCallFormSubmit">*</asp:RequiredFieldValidator>
<asp:CustomValidator ID="CustomValidator1" runat="server"
ClientValidationFunction="ValidateAddress" ControlToValidate="pickup"
CssClass="ErrorMessage" Display="Dynamic"
ErrorMessage="* Invalid pick-up address."
onservervalidate="puAddressValidator_ServerValidate" SetFocusOnError="True"
ValidationGroup="NewCallFormSubmit">*</asp:CustomValidator>
</td>
<td class="style48">
No dorm pick-ups!</td>
<td class="style13">
</td>
</tr>
<tr>
<td class="style14" align="right">
Where is the <span class="style3"><strong>drop-off location?</strong></span></td>
<td class="style15" colspan="2">
<asp:TextBox ID="dropoff" runat="server" CausesValidation="True"
MaxLength="200" Rows="2" TextMode="MultiLine"
onchange="showDropoff()"></asp:TextBox>
</td>
<td class="style16">
<asp:RequiredFieldValidator ID="RequiredFieldValidator5" runat="server"
ControlToValidate="dropoff" CssClass="ErrorMessage" ErrorMessage="* Enter the drop-off location."
Font-Bold="False" Display="Dynamic" ValidationGroup="NewCallFormSubmit">*</asp:RequiredFieldValidator>
<asp:CustomValidator ID="CustomValidator2" runat="server"
ClientValidationFunction="ValidateAddress" ControlToValidate="dropoff"
CssClass="ErrorMessage" Display="Dynamic"
ErrorMessage="* Invalid drop-off address."
onservervalidate="doAddressValidator_ServerValidate" SetFocusOnError="True"
ValidationGroup="NewCallFormSubmit">*</asp:CustomValidator>
</td>
<td class="style47">
<em>No Old-Town, bar, or party drop-offs!</em></td>
<td class="style16">
</td>
</tr>
<tr>
<td class="style2" align="right">
<asp:Image ID="checkMark" runat="server" ImageUrl="~/img/checkmark.png"
Height="20px" Visible="False" />
</td>
<td class="style44">
<asp:Button ID="submitButton" runat="server" Text="Submit" ValidationGroup="NewCallFormSubmit"
OnClientClick="calcRoute()" onclick="submitButton_Click" />
</td>
<td class="style41">
</td>
<td class="style55">
</td>
<td>
</td>
</tr>
<tr>
<td class="style4" align="right">
Thank you, there are
<asp:TextBox ID="ridesAhead" runat="server" BorderStyle="Dotted"
Font-Bold="False" MaxLength="3" ReadOnly="True" Width="28px"
Font-Underline="False" ontextchanged="TextBox1_TextChanged"
style="text-align: center"></asp:TextBox>
rides ahead of you...</td>
<td class="style8" colspan="2">
</td>
<td style="font-style: italic" class="style5">
</td>
<td class="style46">
We cannot give estimated wait times.</td>
<td class="style5">
</td>
</tr>
<tr>
<td class="style4" align="right">
The driver will call you at
<asp:TextBox ID="phoneDisplay" runat="server" BorderStyle="Dotted" Font-Bold="False"
MaxLength="1" ReadOnly="True" Width="85px" Font-Underline="False"
ontextchanged="phoneDisplay_TextChanged" style="text-align: center"></asp:TextBox>
when they arrive.</td>
<td class="style8" colspan="2">
</td>
<td class="style5">
</td>
<td class="style46">
Please verify the call-back number.</td>
<td class="style5">
</td>
</tr>
<tr>
<td class="style20" align="right">
</td>
<td class="style21" colspan="2">
<asp:Button ID="resetButton" runat="server" Text="New Call"
onclick="resetButton_Click" CausesValidation="False" />
</td>
<td class="style22">
</td>
<td class="style35">
</td>
<td class="style22">
</td>
</tr>
<tr>
<td class="style2" align="right">
</td>
<td colspan="4">
<asp:ValidationSummary ID="ValidationSummary1" runat="server"
CssClass="ErrorMessage" DisplayMode="List"
ValidationGroup="NewCallFormSubmit" />
</td>
<td>
</td>
</tr>
</table>
<table id="NewCallSubTable">
<tr>
<td align="left" valign="top">
<h1>
Pick-Up and Drop-Off Locations
</h1>
<!-- Map Layout -->
<div id="map_canvas" style="width: 500px; height: 500px;"></div>
</td>
<td valign="top" align="left">
<h1>
Current Bar/Party-House Black-List
</h1>
<uc:BlackListForm ID="BlackListForm1" runat="server"></uc:BlackListForm>
</td>
</tr>
</table>
<!-- Dynamic p/u & d/o location validator-->
<script type="text/javascript">
function ValidateAddress(source, args) {
var dropoff = document.getElementById('<%= dropoff.ClientID %>');
var pickup = document.getElementById('<%= pickup.ClientID %>');
if (dropoff.value.length > 80 || pickup.value.length > 80) {
args.IsValid = false;
source.errormessage = "* Address must be 80 chars or less.";
}
else {
args.IsValid = true;
}
}
</script>
<!--MAP SCRIPT-->
<script type="text/javascript" src="http://maps.google.com/maps/api/js?key=<%= Google_API_key%>&sensor=false&v=3.7"></script>
<!--INTELLISENSE HELPER-->
<script src="/Scripts/google-maps-3-vs-1-0.js" type="text/javascript"></script>
<!--MARKER_MANAGER SCRIPT-->
<script src="http://gmaps-utility-library.googlecode.com/svn/trunk/markermanager/release/src/markermanager.js" type="text/javascript"></script>
<!--GEOCODER/DIRECTIONS_DISPLAY SCRIPT-->
<script type="text/javascript">
var infoWindow, geocoder, directionsDisplay, map, transf_address;
var default_zoom = parseInt('<%= default_zoom %>');
var default_point = new google.maps.LatLng(40.575475, -105.084604);
var directionsService = new google.maps.DirectionsService();
var startLL, endLL;
var markers = [];
//Functions
function initialize_map() {
var mapOptions = {
zoom: default_zoom,
center: default_point,
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControl: true,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
},
navigationControl: true,
navigationControlOptions: {
style: google.maps.NavigationControlStyle.SMALL
}
};
geocoder = new google.maps.Geocoder();
directionsDisplay = new google.maps.DirectionsRenderer();
map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
directionsDisplay.setMap(map);
}
function interpretKnownAddress(initAdd) {
if (initAdd.indexOf("old town") != -1) {
return "100 N College Ave, Fort Collins, CO 80524-2444";
}
else if (initAdd.indexOf("csu") != -1) {
return "Colorado State University"
}
else {
return initAdd + ", Fort Collins, Colorado";
}
}
function showPickup() {
var pickup_address = document.getElementById('<%=pickup.ClientID%>').value;
if (pickup_address != '' && pickup_address != null) {
transf_address = interpretKnownAddress(pickup_address);
get_latlong(transf_address, "start");
}
}
function showDropoff() {
var dropoff_address = document.getElementById('<%=dropoff.ClientID%>').value;
if (dropoff_address != '' && dropoff_address != null) {
transf_address = interpretKnownAddress(dropoff_address);
get_latlong(transf_address, "end");
}
}
function get_latlong(srcAddress, markerType) {
if (geocoder && markerType && srcAddress != '') {
var geocoderRequest = {
address: srcAddress
};
geocoder.geocode(geocoderRequest, function (results, status) {
if (status == google.maps.GeocoderStatus.OK) {
map.setCenter(results[0].geometry.location);
if (markerType == "start") {
var greenA = new google.maps.MarkerImage('/img/MapMarkers/green_MarkerA.png');
marker = new google.maps.Marker({
icon: greenA,
map: map,
shape: {
type: 'poly',
coord: [4, 4, 29, 4, 29, 29, 22, 29, 17, 35, 16, 35, 10, 29, 4, 29, 4, 4]
}
});
markers.push(marker);
startLL = results[0].geometry.location;
}
else if (markerType == "end") {
var redB = new google.maps.MarkerImage('/img/MapMarkers/red_MarkerB.png');
marker = new google.maps.Marker({
map: map,
icon: redB,
shape: {
type: 'poly',
coord: [4, 4, 29, 4, 29, 29, 22, 29, 17, 35, 16, 35, 10, 29, 4, 29, 4, 4]
}
});
markers.push(marker);
endLL = results[0].geometry.location;
}
else {
marker = new google.maps.Marker({
map: map,
icon: 'icon.png',
shape: {
type: 'poly',
coord: [4, 4, 29, 4, 29, 29, 22, 29, 17, 35, 16, 35, 10, 29, 4, 29, 4, 4]
}
});
markers.push(marker);
}
marker.setPosition(results[0].geometry.location)
infoWindow = new google.maps.InfoWindow();
var infoContent = '<strong>' + results[0].formatted_address + '<strong>';
infoWindow.setContent(infoContent);
infoWindow.open(map, marker);
}
});
} //if
else {
alert("Location: " + srcAddress + "could not be found! Please verify this location.");
} //else
} //end get_latlong
function calcRoute() {
var request = {
origin: startLL,
destination: endLL,
provideRouteAlternatives: false,
travelMode: google.maps.TravelMode.DRIVING
};
directionsService.route(request, function (result, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(result);
}
else {
alert('Route could not be displayed!')
}
});
var center = new google.maps.LatLng((startLL.lat() + endLL.lat()) / 2, (startLL.lng() + endLL.lng()) / 2);
map.setCenter(center);
} //end calcRoute
// Removes the overlays from the map, but keeps them in the array
function clearMarkers() {
if (markers) {
for (i in markers) {
markers[i].setMap(null);
}
}
}
// Shows any overlays currently in the array
function showMarkers() {
if (markers) {
for (i in markers) {
markers[i].setMap(map);
}
}
}
// Deletes all markers in the array by removing references to them
function deleteMarkers() {
if (markersy) {
for (i in markers) {
markers[i].setMap(null);
}
markers.length = 0;
}
}
//initialization listener
google.maps.event.addDomListener(window, 'load', initialize_map);
</script>
<!--End Google Scripts-->