2013-10-27 31 views
-2

我在我的谷歌地圖中我的標記信息窗口出現問題。標記正確顯示,但每當你點擊一個標記時,它只顯示最後一個標記集的信息(在最後一個標記之上)。這裏是我的代碼:谷歌地圖信息標記只顯示最後一個標記

<?php 
//Open connection to database to fetch markers from maps table: 
require_once("config.php"); // get config 
$con = mysql_connect(DB_HOST, DB_USER, DB_PASSWORD); // connect to db 
if (!$con) die('Could not connect: ' . mysql_error()); 
mysql_select_db("drpayne_test", $con); // select db 
$q = "SELECT * FROM maps"; // form query 
$result = mysql_query($q); // run query 

// output the start of the HTML Map Page 
echo <<<END 
<!DOCTYPE html> 
<html> 
<head> 
<title>Marker database viewer</title> 
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> 
<style type="text/css"> 
html { height: 100% } 
body { height: 100%; margin: 0; padding: 0 } 
#map_canvas { height: 100% } 
</style> 
<script type="text/javascript" 
src="http://maps.googleapis.com/maps/api/js?sensor=false"> 
</script> 
<script type="text/javascript"> 
var map; 
var marker=new Array(); 
var infowindow=new Array(); 
function initialize() { 
    var contentString; 
    var mylatlng; 
    var latlng = new google.maps.LatLng(34.52867,-83.98645); 
    var myOptions = { 
    zoom: 8, 
    center: latlng, 
    mapTypeId: google.maps.MapTypeId.HYBRID 
}; 
map = new google.maps.Map(document.getElementById("map_canvas"), 
          myOptions); 
END; 
// loop through the rows of map markers 
while($row = mysql_fetch_array($result)) 
    echo <<<END 

    // Marker Code Start 
    contentString = "<h1> {$row['title']} </h1><p> {$row['descr']} </p>"; 
mylatlng = new google.maps.LatLng({$row['lat']},{$row['lng']}); 
infowindow[{$row['id']}] = new google.maps.InfoWindow({ 
content: contentString 
}); 
marker[{$row['id']}] = new google.maps.Marker({ 
position: mylatlng, 
map: map, 
title:" {$row['geo']} " 
}); 
google.maps.event.addListener(marker[{$row['id']}], 'click', function() { 
    infowindow[{$row['id']}].open(map,marker[{$row['id']}]); 
}); 
// Marker Code End 

END; 
// Output the end of the HTML page 
echo <<<END 

} 
</script> 
</head> 
<body onload="initialize()"> 
<div id="map_canvas" style="width:100%; height:100%"></div> 
</body> 
</html> 

END; 
?> 
+1

[谷歌地圖JS API V3的重複 - 簡單多標記示例](http://stackoverflow.com/questions/3059044/google-maps-js-api-v3-simple-multiple-marker-example) – geocodezip

回答