Google マップ 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>
この問題を解決するのを手伝ってください。私は本当に本当に助けが必要です。ありがとうございました。