谷歌地图未显示在 ajax 加载页面中

Question

当使用 AJAX 单击按钮时，我正在加载一个页面。我的普通页面上有一个地图，可以加载和显示正常，但是当我将地图添加到加载的页面时，它没有显示或给我任何错误？我试图在 ajax 加载后将 initmap(( 添加到代码中，但注意到了吗？我必须绑定它什么的吗？

我做错了什么？

地图的代码是：-

<div id='map-canvas'></div>

JS的

function initMap() {
var pointA = new google.maps.LatLng(51.7519, -1.2578),
pointB = new google.maps.LatLng(50.8429, -0.1313),
myOptions = {
zoom: 7,
center: pointA
},
map = new google.maps.Map(document.getElementById('map-canvas'), myOptions),
// Instantiate a directions service.
directionsService = new google.maps.DirectionsService,
directionsDisplay = new google.maps.DirectionsRenderer({
map: map
}),
markerA = new google.maps.Marker({
position: pointA,
title: "point A",
label: "A",
map: map
}),
markerB = new google.maps.Marker({
position: pointB,
title: "point B",
label: "B",
map: map
});
// get route from A to B
calculateAndDisplayRoute(directionsService, directionsDisplay, pointA, pointB);
}
initMap();

function calculateAndDisplayRoute(directionsService, directionsDisplay, pointA, pointB) {
directionsService.route({
origin: pointA,
destination: pointB,
travelMode: google.maps.TravelMode.DRIVING
}, function(response, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
} else {
window.alert('Directions request failed due to ' + status);
}
});
}

加载加载的按钮的代码是

$(document).ready(function(){
$(".mainstuff button").click(function(){
$('#loader').show();
status = $(this).attr("data-name");
var new_url = "get_job_details.php?job_id="+status;
//alert(status);
$("#div1").load(new_url);
});
});

产生这个：-

echo "<div id='map-canvas'></div><table class='mainTable'>
<tbody>
<tr>
<td width='50%' style='vertical-align: top'><li>Pick up time : <B>".$new_date."</B></li><li>Pick up time : <B>".$p_time."</B></li><li>Pick up address : <B>".$p_address."</B></li><li>Destination address : <B>".$d_address."</B></li><li>Return date : <B>".$d_date_new."</B></li><li>Return time : <B>".$d_time."</B></li><li>Number of passengers : <B>".$pax."</B></li><li>Estimated distance : <B>".$est_dist."</B></li><li>Estimated time : <B>".$est_time."</B></li><li></li></td>
<td width='50%' id='description'><li>Purpose : <B>".$purpose."</B></li><li>Extra requirements : <B>".$list."</B></li><li>Notes : <B>".$notes."</B></li><li>Total current bids : <B>".$total_bids."</B></li><li>Current lowest bid : <B>£".$lowest_bid_price."</B></li><li>Your bids on this job : <B>".$your_bids."</B></li><li>Your current lowest bid : <B>£".$my_lowest_bid."</B></li><li>Make a new bid of : £<input id='bid_amount' type='text'><li><textarea id='extras' class='extras' placeholder='Enter any information you would like the customer to know'></textarea></li><button id='makebid' data-name='".$job_id."' type='button' class='btn btn-bid'><span class='glyphicon glyphicon-pencil'></span> MAKE BID </button></li><div id='actions'><button type='button' class='btn btn-success' onclick='closedown()'><span class='glyphicon glyphicon-remove-circle'></span> CLOSE </button></div></td>
</tr>
</tbody>
</table>";
}

Answer 1

例如，尝试通过在 ajax 加载后添加 initMap(( 来更改 ajax 代码

$(document).ready(function(){   
$(".mainstuff button").click(function(){    
var status = $(this).attr("data-name");
$('#loader').show();
$.ajax({
url : "get_job_details.php",
cache: false,
data: { 'job_id':status },
type: 'GET', 
success : function(data) {
$("#div1").html(data);
$('#loader').hide();
initMap();
},
error: function(data) {
$('#loader').hide();
}
});
});
});