i am using PHP and MYSQL on WordPress with Google Map API where i am retrieving data from the MYSQL database and display markers on the Google Map based on the coordinates retrieved from the database.
the problem is that noting is displayed in the web page, can anyone tell me where is the error in my code?
code:
<?php
/*
Template Name: MAP2
*/
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">
<style>
/* Always set the map height explicitly to define the size of the div
* element that contains the map. */
#map {
height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
height: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
var map;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
zoom: 16,
center: new google.maps.LatLng(-33.91722, 151.23064),
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 features =
{
<?php
global $wpdb;
$prependStr ="";
foreach( $wpdb->get_results("SELECT * FROM site_coordinates2") as $key => $row)
{
$latitude = $row->latitude;
$longitude = $row->longitude;
$info = $row->siteID;
echo $prependStr;
?>
{
position: new google.maps.LatLng(<?php echo $latitude ?>, <?php echo $latitude ?>),
type: '<?php echo $info;?>'
}
<?php
$prependStr =",";
}
?>
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=***************callback=initMap">
</script>
</body>
</html>
<?php
get_footer();
?>
