У меня есть проект с Google Maps v3. И у меня проблема с отображением данных в информационных окнах нескольких маркеров. Когда я пытаюсь сделать информационное окно для каждого маркера, карта вообще не отображается. Я уверен, что я что-то пропустил, но я не знаю, что делать. Итак, вот мой код:
...
<script type="text/javascript">
var pinImage = new google.maps.MarkerImage ("http://chart.apis.google.com/chart?chst=d_map_xpin_letter_withshadow&chld=pin_star|%E2%80%A2|CC3300|000000|FF9900",
new google.maps.Size (70, 83),
new google.maps.Point (0,0),
new google.maps.Point (10,34));
var pinShadow = new google.maps.MarkerImage ("http://chart.apis.google.com/chart?chst=d_map_pin_shadow",
new google.maps.Size (89, 85),
new google.maps.Point (0, 0),
new google.maps.point (12, 35));
var map;
function initialize() {
var myLatlng = new google.maps.LatLng(41.258531,-96.012599);
var myOptions = {
zoom: 2,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var infoWindow = new google.maps.InfoWindow;
<?php
$posisi = array();
$keterangan = array();
foreach ($integer as $lokasi) {
$query = "SELECT cl.locId, cl.country as country, cl.region as region, cl.city as city, cl.postalCode as postalCode, cl.latitude as latitude, cl.longitude as longitude, cl.metroCode as metroCode, cl.areaCode as areaCode
FROM (SELECT locId as idcihuy FROM cityblocks WHERE $lokasi BETWEEN startIpNum AND endIpNum) cb, citylocation cl WHERE cb.idcihuy = cl.locId";
$result = mysql_query($query);
while ($location = @mysql_fetch_assoc($result)){
$posisi[]= 'new google.maps.LatLng(' . $location['latitude'] . ', ' . $location['longitude'] . ')';
$keterangan[]= '(' . $location['country'] . ', ' . $location['region'] . ', ' . $location['city'] . ')';
}
}
?>
var keterangan = new Array();
var point = [<?php echo implode(',', $posisi) ?>];
var lokasi = [<?php echo implode(',', $keterangan) ?>];
var icon = pinImage;
for (var i = 0; i < point.length; i++) {
var html = "<b>" + lokasi[i] + "</b> <br/>" + point[i];
var marker = new google.maps.Marker({
map: map,
position: point[i],
icon: pinImage,
shadow: pinShadow
});
bindInfoWindow(marker, map, infoWindow, html);
}
}
function bindInfoWindow(marker, map, infoWindow, html) {
google.maps.event.addListener(marker, 'click', function() {
infoWindow.setContent(html);
infoWindow.open(map, marker);
});
}
</script>
А это HTML-код (вывод браузера):
...
var pinImage = new google.maps.MarkerImage ("http://chart.apis.google.com/chart?chst=d_map_xpin_letter_withshadow&chld=pin_star|%E2%80%A2|CC3300|000000|FF9900",
new google.maps.Size (70, 83),
new google.maps.Point (0,0),
new google.maps.Point (10,34));
var pinShadow = new google.maps.MarkerImage ("http://chart.apis.google.com/chart?chst=d_map_pin_shadow",
new google.maps.Size (89, 85),
new google.maps.Point (0, 0),
new google.maps.point (12, 35));
var map;
function initialize() {
var myLatlng = new google.maps.LatLng(41.258531,-96.012599);
var myOptions = {
zoom: 2,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var infoWindow = new google.maps.InfoWindow;
var keterangan = new Array();
var point = [new google.maps.LatLng(20.0000, 77.0000),new google.maps.LatLng(20.0000, 77.0000),new google.maps.LatLng(38.0000, -97.0000),new google.maps.LatLng(51.7500, -1.2500)];
var lokasi = [(IN, , ),(IN, , ),(US, , ),(GB, K2, Oxford)];
var icon = pinImage;
for (var i = 0; i < point.length; i++) {
var html = "<b>" + lokasi[i] + "</b> <br/>" + point[i];
var marker = new google.maps.Marker({
map: map,
position: point[i],
icon: pinImage,
shadow: pinShadow
});
bindInfoWindow(marker, map, infoWindow, html);
}
}
function bindInfoWindow(marker, map, infoWindow, html) {
google.maps.event.addListener(marker, 'click', function() {
infoWindow.setContent(html);
infoWindow.open(map, marker);
});
}
</script>
Пожалуйста, помогите мне решить эту проблему. Мне действительно очень нужна помощь. Спасибо.