複数の情報ウィンドウを持つポリラインを持つマップを作成しています。情報ウィンドウに画像(各情報ウィンドウごとに異なる画像)を含めるには、クリックスルーURLが必要です。私はマーカー(URL付き)と情報ウィンドウをプロットしましたが、画像をポップアップ(情報ウィンドウ内)することはできません。複数の情報ウィンドウと画像を使ってGoogle Apiで地図を作成するにはどうすればよいですか?
<!DOCTYPE html>
<html>
<head>
<style>
html,
body {
font-family: Arial, sans-serif;
height: 100%;
margin: 0;
padding: 0;
}
#map {
height: 100%;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
function initMap() {
// Styles a map in night mode.
var map = new google.maps.Map(document.getElementById('map'), {
center: {lat: 38.6530169, lng: -90.3835485},
zoom: 6,
styles: [
{elementType: 'geometry', stylers: [{ color: '#ebe3cd'}]},
{elementType: 'labels', stylers: [{visibility: 'off'}]},
{elementType: 'labels.text.fill',stylers: [{color: '#523735'}]},
{elementType: 'labels.text.stroke', stylers: [{color: '#f5f1e6'}]},
{
featureType: 'administrative',
elementType: 'geometry',
stylers: [{ 'visibility': 'off'}]
},
{
featureType: 'administrative',
elementType: 'geometry.stroke',
stylers: [{ color: '#c9b2a6'}]
},
{
featureType: 'administrative.land_parcel',
stylers: [{'visibility': 'off'}]
},
{
featureType: 'administrative.land_parcel',
elementType: 'geometry.stroke',
stylers: [{ color: '#dcd2be'}]
},
{
featureType: 'administrative.land_parcel',
elementType: 'labels.text.fill',
stylers: [{color: '#ae9e90'}]
},
{
featureType: 'administrative.neighborhood',
stylers: [{visibility: 'off'}]
},
{
featureType: 'administrative.province',
elementType: 'geometry',
stylers: [{visibility: 'on'},{weight: '1.5'}]
},
{
featureType: 'landscape.natural',
elementType: 'geometry',
stylers: [{color: '#dfd2ae'}]
},
{
featureType: 'poi',
stylers: [{visibility: 'off'}]
},
{
featureType: 'poi',
elementType: 'geometry',
stylers: [{color: '#dfd2ae'}]
},
{
featureType: 'poi',
elementType: 'labels.text.fill',
stylers: [{color: '#93817c'}]
},
{
featureType: 'poi.park',
elementType: 'geometry.fill',
stylers: [{ color: '#a5b076'}]
},
{
featureType: 'poi.park',
elementType: 'labels.text.fill',
stylers: [{color: '#447530'}]
},
{
featureType: 'road',
stylers: [{visibility: 'off'}]
},
{
featureType: 'road',
elementType: 'geometry',
stylers: [{color: '#f5f1e6'}]
},
{
featureType: 'road',
elementType: 'labels.icon',
stylers: [{visibility: "off"}]
},
{
featureType: 'road.arterial',
elementType: 'geometry',
stylers: [{color: '#fdfcf8'}]
},
{
featureType: 'road.highway',
elementType: 'geometry',
stylers: [{color: '#f8c967'}]
},
{
featureType: 'road.highway',
elementType: 'geometry.stroke',
stylers: [{color: '#e9bc62'}]
},
{
featureType: 'road.highway.controlled_access',
elementType: 'geometry',
stylers: [{color: '#e98d58'}]
},
{
featureType: 'road.highway.controlled_access',
elementType: 'geometry.stroke',
stylers: [{color: '#db8555'}]
},
{
featureType: 'road.local',
elementType: 'labels.text.fill',
stylers: [{color: '#806b63'}]
},
{
featureType: 'transit',
stylers: [{visibility: 'off'}]
},
{
featureType: 'transit.line',
elementType: 'geometry',
stylers: [{color: '#dfd2ae'}]
},
{
featureType: 'transit.line',
elementType: 'labels.text.fill',
stylers: [{color: '#8f7d77'}]
},
{
featureType: 'transit.line',
elementType: 'labels.text.stroke',
stylers: [{color: '#ebe3cd'}]
},
{
featureType: 'transit.station',
elementType: 'geometry',
stylers: [{color: '#dfd2ae'}]
},
{
featureType: 'water',
elementType: 'geometry.fill',
stylers: [{color: '#b9d3c2'}]
},
{
featureType: 'water',
elementType: 'labels.text.fill',
stylers: [{color: '#92998d'}]
}
]
});
var locations = [
['August 20, 1832',40.423731,-83.8944137, 3,'dunihue.jpg','www.google.com'],
['September 20, 1832', 40.1489329, -84.3119643, 2],
['October 1, 1832', 39.7520154,-85.603323, 1],
];
var infowindow = new google.maps.InfoWindow();
var marker, i;
var markers = new Array();
for (i = 0; i < locations.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
map: map
});
markers.push(marker);
google.maps.event.addListener(marker, 'click', function() {
window.location.href = marker.url;
});
google.maps.event.addListener(marker, 'mouseover', (function(marker, i) {
return function() {
var html = '<h4>' + locations[i][0] + '</h4>';
html += '<img src="' + locations[i][4] + '" />';
infowindow.setContent(locations[i][0]);
infowindow.open(map, marker);
}
})(marker, i));
}
var flightPlanCoordinates = [
{lat: 40.423731, lng: -83.8944137},
{lat: 40.1489329, lng: -84.3119643},
{lat: 40.1066821, lng: -84.6497071},
{lat: 39.8379723, lng: -84.958815},
{lat: 39.7797003, lng: -86.2728364},
{lat: 39.6415502, lng: -86.8738581},
{lat: 39.4650324, lng: -87.4433594},
{lat: 38.9809128, lng: -89.143966},
{lat: 36.8811974, lng: -94.9064899}
];
var flightPath = new google.maps.Polyline({
path: flightPlanCoordinates,
geodesic: true,
strokeColor: '#340684',
strokeOpacity: .5,
strokeWeight: 2
});
flightPath.setMap(map);
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?
key=AIzaSyBI8ub80FYP5f06rn2yxwNgJW55L3NEOlM&v=3&callback=initMap">
</script>
</body>
</html>
投稿されたコードには「地図」はありません。遭遇している問題またはエラーを説明し、その問題を示す[mcve]を投稿してください。 – geocodezip
完全なコードを追加しました。私はマーカー(URL付き)とインフォメーションウィンドウをプロットしましたが、(インフォメーションウィンドウ内に)画像が表示されません。 – mxm1301