使用PHP＆amp; WordPress和Google Map API上的MYSQL，用于从MYSQL数据库中检索数据，并在Google Map上显示带有信息窗口的标记。
问题是地图没有出现在网页上，但SQL查询正在检索所需的数据。
我做错了什么以及如何解决这个问题。
<?php
/*
Template Name: search info_location
*/
get_header();
?>
<!DOCTYPE html>
<html>
<head>
<title>Custom Markers</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=**********&callback=initMap">
</script>
<style>
/* Always set the map height explicitly to define the size of the div
* element that contains the map. */
#map {
height: 600px;
}
/* Optional: Makes the sample page fill the window. */
html, body {
height: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="map"></div>
<?php
// code for submit button action
global $wpdb, $site_name;
//variables that handle the retrieved data from mysql database based on the ID of the variable in HTML (select)
if(isset($_POST['query_submit']))
{
if(isset($_POST['site_name']))
{
$site_name=$_POST['site_name'];
}
else { $site_name=""; }
if(isset($_POST['owner_name']))
{
$owner_name=$_POST['owner_name'];
}
else { $owner_name=""; }
if(isset($_POST['Company_name']))
{
$company_name=$_POST['Company_name'];
}
else { $company_name=""; }
if(isset($_POST['Subcontractor_name']))
{
$Subcontractor_name=$_POST['Subcontractor_name'];
}
else { $Subcontractor_name="";}
// var_dump($site_name);
$sql = $wpdb->prepare("select i.siteID
, i.siteNAME
, i.equipmentTYPE
, c.latitude
, c.longitude
, c.height
, o.ownerNAME
, o.ownerCONTACT
, x.companyNAME
, y.subcontractorCOMPANY
, y.subcontractorNAME
, y.subcontractorCONTACT
from site_info i
LEFT
JOIN owner_info o
on i.ownerID = o.ownerID
LEFT
JOIN company_info x
on i.companyID = x.companyID
LEFT
JOIN subcontractor_info y
on i.subcontractorID = y.subcontractorID
LEFT JOIN site_coordinates2 c
on i.siteID=c.siteID
where
i.siteNAME = %s
AND
o.ownerNAME = %s
AND
x.companyNAME = %s
",$site_name,$owner_name,$company_name);
$query_submit =$wpdb->get_results($sql, OBJECT);
echo "<br>";
echo "<br>";
//echo $sql;
// var_dump($_POST['site_name']);
foreach ($query_submit as $obj) {
$obj->siteNAME;
$obj->ownerNAME;
$obj->companyNAME;
$obj->subcontractorNAME;
$obj->siteID;
$obj->equipmentTYPE;
$obj->latitude;
$obj->longitude;
$obj->height;
$obj->ownerCONTACT;
$obj->subcontractorCONTACT;
$obj->subcontractorCOMPANY;
}
// table that will dsiplay the results based on the user's selection //
echo "<table width='30%' ";
echo "<tr>";
echo "<td>Site Name</td>";
echo "<td>Owner Name</td>";
echo "<td>Company Name</td>";
echo "<td>Subcontractor Name</td>";
echo "<td>Site ID</td>";
echo "<td>Equipment Type</td>";
echo "<td> Lattitude</td>";
echo "<td>Longitude </td>";
echo "<td> Height</td>";
echo "<td> Owner Contact</td>";
echo "<td> Sub Contact</td>";
echo "<td> Sub company Name</td>";
echo "</tr>";
echo "<tr>";
echo "<td>".$obj->siteNAME."</td>";
echo "<td>".$obj->ownerNAME."</td>";
echo "<td>".$obj->companyNAME."</td>";
echo "<td>".$obj->subcontractorNAME."</td>";
echo "<td>".$obj->siteID."</td>";
echo "<td>".$obj->equipmentTYPE."</td>";
echo "<td>".$obj->latitude."</td>";
echo "<td>".$obj->longitude."</td>";
echo "<td>".$obj->height."</td>";
echo "<td>".$obj->ownerCONTACT."</td>";
echo "<td>".$obj->subcontractorCONTACT."</td>";
echo "<td>".$obj->subcontractorCOMPANY."</td>";
echo "</tr>";
echo "<tr>";
echo "<td>";
?>
<script>
var map,currentPopup;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
zoom: 8,
center: new google.maps.LatLng(33.888630, 35.495480),
mapTypeId: 'roadmap'
});
var iconBase = 'https://maps.google.com/mapfiles/kml/shapes/';
var icons = {
parking: {
icon: iconBase + 'parking_lot_maps.png'
},
library: {
icon: iconBase + 'library_maps.png'
},
info: {
icon: iconBase + 'info-i_maps.png'
}
};
function addMarker(feature) {
var marker = new google.maps.Marker({
position: feature.position,
//icon: icons[feature.type].icon,
map: map
});
var popup = new google.maps.InfoWindow({
content: '<b>Site ID :</b> ' + feature.info +'<br></br>'
+ '<b> Site Name</b>' + feature.site_name +'<br></br>'
+ '<b>Coordinates :</b> '+ feature.position +'<br></br>'
+ '<b>height :</b> ' + feature.height,
maxWidth: 300
});
google.maps.event.addListener(marker, "click", function() {
if (currentPopup != null) {
currentPopup.close();
currentPopup = null;
}
popup.open(map, marker);
currentPopup = popup;
});
google.maps.event.addListener(popup, "closeclick", function() {
map.panTo(center);
currentPopup = null;
});
}
var features = [
<?php
$prependStr ="";
foreach( $wpdb->get_results("select c.siteID, c.latitude, c.longitude, c.height
, i.siteNAME
FROM site_coordinates2 c LEFT
JOIN site_info i
on c.siteID = i.siteID
where i.siteNAME = '".$site_name."'", OBJECT) as $key => $row) {
$latitude = $row->latitude;
$longitude = $row->longitude;
$siteid = $row->siteID;
$height = $row->height;
$siteName = $row->siteNAME;
echo $prependStr;
?>
{
position: new google.maps.LatLng(<?php echo $latitude; ?>, <?php echo $longitude; ?>),
info:'<?php echo $siteid;?>',
height: '<?php echo $height;?>',
site_name: <?php echo $siteName;?>',
}
<?php
$prependStr =",";
}
?>
];
for (var i = 0, feature; feature = features[i]; i++) {
addMarker(feature);
}
}
</script>
<?php
echo "</td>";
echo "</tr>";
echo "</table>";
}
?>
<!-- the below part of code work as it should --!>
<!--create dropdown list site names-->
<form method ="post" action ="" name="submit_form">
<table width="30%">
<tr>
<td>Site Name</td>
<td>Owner Name</td>
<td>Company Name</td>
<td>Subcontractor Name</td>
</tr>
<tr>
<td><select id="site_name" name = "site_name">
<?php
$query_site_name =$wpdb->get_results("select DISTINCT siteNAME from site_info");
foreach($query_site_name as $site_name)
{
// $site_name = (array)$site_name;
echo "<option value = '".$site_name ->siteNAME."'>". $site_name->siteNAME."</option>";
}
?>
<!--create dropdown list owner names-->
</select></td>
<td><select id="owner_name" name ="owner_name">
<?php
global $owner_name;
$query_owner_name =$wpdb->get_results ("select DISTINCT ownerNAME from owner_info");
foreach($query_owner_name as $owner_name)
{
// $owner_name = (array)$owner_name;
echo "<option value = '".$owner_name->ownerNAME."'>". $owner_name->ownerNAME."</option>";
}
?>
</select></td>
<!--create dropdown list Company names-->
</select></td>
<td><select id="Company_name" name ="Company_name">
<?php
global $Company_name;
$query_Company_name =$wpdb->get_results ("select DISTINCT companyNAME from company_info");
foreach($query_Company_name as $Company_name)
{
// $Company_name = (array)$Company_name;
echo "<option value = '".$Company_name->companyNAME."'>". $Company_name->companyNAME."</option>";
}
?>
</select></td>
<!--create dropdown list Subcontractor names-->
</select></td>
<td><select id="Subcontractor_name" name ="Subcontractor_name">
<?php
global $Subcontractor_name;
$query_Subcontractor_name =$wpdb->get_results ("select DISTINCT subcontractorNAME from subcontractor_info");
foreach($query_Subcontractor_name as $Subcontractor_name)
{
// $Subcontractor_name = (array)$Subcontractor_name;
echo "<option value = '".$Subcontractor_name->subcontractorNAME."}'>". $Subcontractor_name->subcontractorNAME."</option>";
}
?>
</select></td>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td>
<input type ="submit" name="query_submit" value ="Search" />
</td>
</tr>
</table>
</form>
</body>
</html>
<?php
get_footer();
?>