I'm having a problem with my info window of my markers in my google maps. The markers show correctly but whenever you click on a marker it only shows the last marker set's info(above the last marker). Here is my code:
<?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;
?>
