Googleマップ（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-->