簡単に言えば、これら 2 つのトピックを組み合わせたいと思います。
Googleマップv3のマーカーのInfoWindowに画像を追加するには?
Google Maps JS API v3 - シンプルな複数マーカーの例
位置データをデータベースに保存していて、配列として取得しています。データベース内の x 個の場所ごとにマーカーと情報ウィンドウを配置したいと考えています。フィールドの 1 つに画像が含まれており、これを infoWindow コンテンツに含めたいと考えています。
これが私がこれまでのところです:
Php: // 接続を作成 $con=mysqli_connect("*******","*******","*******","tests");
// Check connection
if (mysqli_connect_errno($con))
{
echo "Failed to connect to MySQL: " . mysqli_connect_error();
}
$result = mysqli_query($con,"SELECT Name, Latitude, Longitude, Image FROM locate_coords");
while($row = mysqli_fetch_array($result))
{
$users[]= $row;
}
Javascript function initialize()
:
<?php
$js_array = json_encode($users);
echo "var locations = ". $js_array . ";\n";
?>
var styles = [
{
stylers: [
{ hue: "#00ffe6" },
{ saturation: -20 },
]
},{
featureType: "road",
elementType: "geometry",
stylers: [
{ lightness: 100 },
{ visibility: "simplified" },
]
},{
featureType: "road",
elementType: "labels",
stylers: [
{ visibility: "off" }
]
}
];
var styledMap = new google.maps.StyledMapType(styles,
{name: "Styled Map"});
var mapProp = {
zoom: 12,
center: new google.maps.LatLng(51.508742,-0.120850),
mapTypeControlOptions: {
mapTypeIds: [google.maps.MapTypeId.ROADMAP, 'map_style']
}
};
var map = new google.maps.Map(document.getElementById('map-canvas'),
mapProp);
var infowindow = new google.maps.InfoWindow();
var marker, i;
for (i = 0; i < locations.length; i++) {
//var container = document.getElementById("photo");
//var img = new Image();
//img.src = '
//container.appendChild(img);
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
map: map
});
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
//infowindow.setContent('<img id=="photo">' + locations[i][0]);
infowindow.setContent('<img src=/uploads/'. locations[i][3]'>' + locations[i][0]);
infowindow.open(map, marker);
}
})(marker, i));
}
map.mapTypes.set('map_style', styledMap);
map.setMapTypeId('map_style');
}
google.maps.event.addDomListener(window, 'load', initialize);
通常の画像 URL を入れるとうまくいきますが、配列値を入れようとするとすぐにマップが読み込まれません! この時点で、私は正気で何をすべきかを伝えることができました :-(..