我的页面上有一张Google地图和一个切换开关按钮。当点击切换时,我让它调用一个java脚本函数,它清除具有当前谷歌地图的div元素并加载另一个:
//clear div
$('#putMap').empty();
//call to get new friend list
$('#putMap').load('getVisitMap.php?u=' + userID ,
function() {
alert("called load function");
});
return false;
我的访问php文件如下所示:
$userID = $_GET['u'];
//Get all breweries
echo "<div id=\"map_canvas\" style=\"width: 600px; height: 400px;\"></div>";
echo '<script type="text/javascript">
var locations = [';
//count unique breweries
***mysql call is here****
echo "before for loop";
for( $i = 0; $i < $breweryNum; $i++){
$row = $resultBrew ->fetch_assoc();
$brewery = $row['beerBrewery'];
$long = $row['longi'];
$lat = $row['lat'];
$breweryURL = "breweryPage.php?id=$breweryID";
echo "['$brewery', $lat, $long] ";
//add camas if not last one
if($i != $breweryNum - 1 ){
echo ',';
}
}
echo '
];
var map = new google.maps.Map(document.getElementById(\'map_canvas\'), {
zoom: 10,
center: new google.maps.LatLng(-33.92, 151.25),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var bounds = new google.maps.LatLngBounds();
var infowindow = new google.maps.InfoWindow();
var marker, i;
for (i = 0; i < locations.length; i++) {
var position = new google.maps.LatLng(locations[i][1], locations[i][2]);
marker = new google.maps.Marker({
position: position,
map: map
});
google.maps.event.addListener(marker, \'click\', (function(marker, i) {
return function() {
infowindow.setContent(locations[i][0]);
infowindow.open(map, marker);
}
})(marker, i));
bounds.extend(position);
} //end for loop
map.fitBounds(bounds);
</script>
';
当我查看网络中的chrome中的inspect元素以查看getVisitMap.php文件的响应时它只显示:
<div id="map_canvas" style="width: 600px; height: 400px;"></div><script type="text/javascript">
var locations = [
我的回声我应该展示更多的代码。
以下是原始php页面的更多代码:
$page->content .= "<div id = \"putMap\">
<div id=\"map_canvas\" style=\"width: 600px; height: 400px;\"></div>";
$map = createMap($userID);
$page->content .= "
$map
</div>
";