I'am trying to create GIS web using google maps api v3, JSON, and postgresql. i can show multiple marker in mymap, but when I click on a marker and try to open the Info window only the last marker will response correctly.
The problem is if i try and assign content to the infowindow within a loop. Then when i click the marker, it only knows about the content from the very last iteration of the loop. i know the problem but don't know how to solve it. sorry for my bad english. any suggestion? here the code (json.php and index.php):
<?php
$sql = "SELECT distinct org_id, customer_name, attribute16, attribute17 FROM gis where org_id = 41 OR org_id = 124";
$data = pg_query($sql);
$json = '{"enseval": {';
$json .= '"customer":[ ';
while($x = pg_fetch_array($data)){
$json .= '{';
$json .= '"id_customer":"'.$x['org_id'].'",
"nama_customer":"'.htmlspecialchars($x['customer_name']).'",
"x":"'.$x['attribute17'].'",
"y":"'.$x['attribute16'].'"
},';
}
$json = substr($json,0,strlen($json)-1);
$json .= ']';
$json .= '}}';
echo $json;
?>
<html>
<head>
<title>contoh</title>
<link href="assets/css/bootstrap.css" rel="stylesheet">
<style>
body {
padding-top: 60px; /* 60px to make the container go all the way to the bottom of the topbar */
}
</style>
<link href="assets/css/bootstrap-responsive.css" rel="stylesheet">
<script src="assets/js/jquery.js"></script>
<!-- load googlemaps api dulu -->
<script src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
var peta;
var gambar_tanda;
gambar_tanda = 'assets/img/marker.png';
var x = new Array();
var y = new Array();
var customer_name = new Array();
function peta_awal(){
// posisi default peta saat diload
var lokasibaru = new google.maps.LatLng(-6,107);
var petaoption = {
zoom: 6,
center: lokasibaru,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
peta = new google.maps.Map(document.getElementById("map_canvas"),petaoption);
// memanggil function ambilpeta() untuk menampilkan koordinat
ambipeta();
}
function ambipeta(){
url = "json.php";
$.ajax({
url: url,
dataType: 'json',
cache: false,
success: function(msg){
for(i=0;i<msg.enseval.customer.length;i++){
x[i] = msg.enseval.customer[i].x;
y[i] = msg.enseval.customer[i].y;
customer_name[i] = msg.enseval.customer[i].nama_customer;
var point = new google.maps.LatLng(parseFloat(msg.enseval.customer[i].x),parseFloat(msg.enseval.customer[i].y));
tanda = new google.maps.Marker({
position: point,
map: peta,
icon: gambar_tanda,
clickable: true
});
//here is my problem
var isi = msg.enseval.customer[i].nama_customer;
var infowindow = new google.maps.InfoWindow({
content:isi
});
google.maps.event.addListener(tanda, 'click', function() {
//infowindow.setContent(content);
infowindow.open(peta,tanda);
});
}
}
});
}
</script>
</head>
<body onload="peta_awal()">
<div class="container">
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
</a>
<a class="brand" href="#">CONTOH</a>
<div class="btn-group pull-right"></div>
</div>
</div>
</div>
<div id="map_canvas" style="height:500px"></div>
<hr>
<footer>
<p>© TEST</p>
</footer>
</div>
</body>
</html>