-1
我試圖在單擊按鈕時在對話框中加載谷歌地圖。除標記外，一切正在加載。請幫我看看我的代碼有什麼問題。如何顯示標記。當我不使用對話框時，它的工作正常。當在對話框中加載地圖時，Google地圖標記不可見
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/jquery-ui.js" type="text/javascript"></script>
<script type="text/javascript">
var directionsDisplay;
var directionsService;
var map;
var stepDisplay;
var image ;
var geocoder;
var latitude;
$(function() {
$("#btnShow").click(function() {
$("#dialog").dialog({
modal: true,
title: "Google Map",
width: 600,
hright: 450,
buttons: {
Close: function() {
$(this).dialog('close');
}
},
open: function() {
var mapOptions = {
center: new google.maps.LatLng(19.0606917, 72.83624970000005),
zoom: 18,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
directionsService = new google.maps.DirectionsService();
geocoder = new google.maps.Geocoder();
directionsDisplay = new google.maps.DirectionsRenderer();
var map = new google.maps.Map($("#dvMap")[0], mapOptions);
directionsDisplay.setMap(map);
// Instantiate an info window to hold step text.
stepDisplay = new google.maps.InfoWindow();
//supress default markers and set route color
directionsDisplay.setOptions({ suppressMarkers: true,
polylineOptions: {
strokeWeight: 5,
strokeOpacity: 1,
strokeColor: 'green'
}
});
calcRoute();
}
});
});
});
var cList= [];
function showOnMap(){
cList = [];
var coordinates = [];
coordinates.push("ORG");
coordinates.push("18.9542149");
coordinates.push("72.81203529999993");
coordinates.push("hello");
coordinates.push("not");
cList.push(coordinates);
coordinates = [];
coordinates.push("DEST");
coordinates.push("19.2147067");
coordinates.push("72.91062020000004");
coordinates.push("hello");
coordinates.push("not");
cList.push(coordinates);
}
function calcRoute() {
var start;
var end;
var temp;
var waypts = [];
for(var i =0;i<cList.length;i++){
var coord = cList[i];
if(coord[0] == "ORG"){
start = coord[1] +", "+coord[2];
alert("start: "+start);
showSteps(coord[1] , coord[2], coord[3]);
}else if(coord[0]== "DEST"){
end = coord[1] +", "+coord[2];
alert("end: "+end);
showSteps(coord[1] , coord[2],coord[3]);
}else if(coord[0]== "WAYPOINT"){
$("#comments").text("WAYPOINT: ");
temp = coord[1] +", "+coord[2];
//alert("way: "+temp);
waypts.push({
location:temp,
stopover:true});
var text = "reached till this stop ";
showSteps(coord[1] , coord[2],text);
}
}
var request = {
origin: start,
destination: end,
waypoints: waypts,
optimizeWaypoints: true,
travelMode: google.maps.TravelMode.DRIVING
};
directionsService.route(request, function(response, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
}
});
}
var marker;
function showSteps(lat, lon, text) {
//alert("showSteps:"+image+" text"+text);
// For each step, place a marker, and add the text to the marker's
// info window. Also attach the marker to an array so we
// can keep track of it and remove it when calculating new
// routes.
marker = new google.maps.Marker({
position: new google.maps.LatLng(lat,lon),
map: map
});
attachInstructionText(marker, text);
}
function attachInstructionText(marker, text) {
google.maps.event.addListener(marker, 'click', function() {
// Open an info window when the marker is clicked on,
// containing the text of the step.
if(text == ""){
text = "not reached";
}
stepDisplay.setContent(text);
stepDisplay.open(map, marker);
});
}
</script>
<input id = "btnShow" type="button" value="Show Maps" class="fMap" onclick="showOnMap()" />
<div id="dialog" style="display: none">
<div id="dvMap" style="height: 380px; width: 580px;">
</div>
</div>