このコードのリンクはhttps://www.dropbox.com/s/1j0qc2uyp8vm9xj/map_user.phpにアクセスしますが、このコードは機能していません。JSONを使用してmysqlのデータの配列を取得し、それをjavascriptにエコーしましたが、実行しようとすると、灰色のマップしか表示されません。誰か助けてもらえますか?
<?php
include('lock.php');
include('function/query.php');
?>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>USER MAPS AND UPDATES</title>
<script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>
</head>
<body>
<div id="map" style="width: 500px; height: 400px;"></div>
<?php
$x = 0;
$query = "SELECT lat,lng FROM messages WHERE uid_fk='1'";
$result = mysql_query($query);
while($row = mysql_fetch_array($result, MYSQL_ASSOC)){
$data[$x] = array("lat" => $row['lat'], "lng" => $row['lng']);
$x++;
}
?>
<script type="text/javascript">
var markers = <?php echo json_encode($data); ?>
function initializeMaps() {
var myOptions = {
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControl: false
};
var map = new google.maps.Map(document.getElementById("map"),myOptions);
var infowindow = new google.maps.InfoWindow();
var marker, i;
var bounds = new google.maps.LatLngBounds();
for (i = 0; i < markers.length; i++) {
var pos = new google.maps.LatLng(markers[i][1], markers[i][2]);
bounds.extend(pos);
marker = new google.maps.Marker({
position: pos,
map: map
});
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(markers[i][0]);
infowindow.open(map, marker);
}
})(marker, i));
}
map.fitBounds(bounds);
}
initializeMaps();
</script>
</body>
</html>