我正在构建一个页面,从数据库中获取地址并显示所有位置,但代码仅显示数据库中的第一个地址字段。我什至搜索了谷歌和所有相关的问题,但似乎没有任何效果。
作为输出,我在地址字段中获得了第一个位置,并且该位置正在显示在谷歌地图上。我需要做的是从数据库中的地址字段中获取所有地址行并将它们显示在谷歌地图上(多个标记)。
有什么办法可以让我获取所有地址并将它们存储在数据库中的数组中,并在谷歌地图上显示来自“var address”的这些地址。
任何人都可以帮助我对这个概念不熟悉。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>Google Maps Multiple Markers</title>
<?
error_reporting(0);
include('dbcon.php');
$result = mysql_query("SELECT address FROM markers");
$new_array = array();
while ($row = mysql_fetch_assoc($result)) {
$new_array[] = $row['address'];
}
$add_js = json_encode( $new_array );
?>
<script
src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<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>
<script type="text/javascript">
var side_bar_html = "";
var icon1 = "prop.png";
var icon2 = "build.png";
var locations = <?php echo $add_js ?>;
//alert(locations);
function geocodeAddress(i) {
geocoder.geocode(
{
'address' : locations[i]
},
function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
map.setCenter(results[0].geometry.location);
createMarker(results[0].geometry.location, i);
} else {
alert('Geocode was not successful for the
following reason: '
+ status);
}
});
}
function createMarker(latlng,i) {
var marker = new google.maps.Marker({
map : map,
icon : icon1,
position : latlng
});
//add info window
google.maps.event.addListener(marker, 'mouseover', function() {
marker.setIcon(icon2);
infowindow.setContent(locations[i]);
infowindow.open(map, marker);
title: 'Property!'
});
google.maps.event.addListener(marker, 'mouseout', function() {
marker.setIcon(icon1);
infowindow.setContent(locations[i]);
infowindow.close(map, marker);
title: 'Property!'
});
//end of adding info window
return marker;
}
var map = new google.maps.Map(document.getElementById('map'), {
zoom : 10,
center : new google.maps.LatLng(28.6139, 77.2089),
mapTypeId : google.maps.MapTypeId.ROADMAP
});
var infowindow = new google.maps.InfoWindow({
size: new google.maps.Size(150,50)});
var geocoder = new google.maps.Geocoder();
for (var i = 0; i < locations.length; i++) {
geocodeAddress(i);
}//end of for loop
</script>
</body>
</html>