Googleマップ - infoWindowにテキストと画像を挿入できません

Question

私はgoogle map api v3を使用して、いくつかのマーカーを地図上に表示します。infoWindowはユーザークリック時に表示されます。このinfoWindowの中に画像またはテキストを挿入することができます。両方を挿入する方法はありますか？

これはコードです：

google.maps.event.addListener(marker, 'click', (function(marker, i) { 
    return function() { 
    //infowindow.setContent('<img style="width:100px; height: 50px;" src="'+arrOfGeoPoints[i].image+'" >',"This text will not appear, but the image will"); 
    infowindow.setContent(arrOfGeoPoints[i].address); //text shows fine here 
    infowindow.open(map, marker); 
    } 
})(marker, i)); 

Answer 1

を追加することができます。

google.maps.event.addListener(marker, 'click', (function(marker, i) { 
    return function() { 
    infowindow.setContent('<img style="width:100px; height: 50px;" src="'+arrOfGeoPoints[i].image+'" ><br>'+arrOfGeoPoints[i].address); 
    infowindow.open(map, marker); 
    } 
})(marker, i)); 

をコードスニペット：

var geocoder; 
 
var map; 
 
var infowindow = new google.maps.InfoWindow(); 
 

 
function initialize() { 
 
    var map = new google.maps.Map(
 
    document.getElementById("map_canvas"), { 
 
     center: new google.maps.LatLng(37.4419, -122.1419), 
 
     zoom: 13, 
 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
 
    }); 
 
    var marker = new google.maps.Marker({ 
 
    position: map.getCenter(), 
 
    map: map 
 
    }); 
 
    var arrOfGeoPoints = [{ 
 
    image: "https://developers.google.com/site-assets/logo-stack-overflow.svg", 
 
    address: "Palo Alto" 
 
    }]; 
 
    var i = 0; 
 
    google.maps.event.addListener(marker, 'click', (function(marker, i) { 
 
    return function() { 
 
     infowindow.setContent('<img style="width:100px; height: 50px;" src="' + arrOfGeoPoints[i].image + '" ><br>' + arrOfGeoPoints[i].address); 
 
     infowindow.open(map, marker); 
 
    } 
 
    })(marker, i)); 
 
    google.maps.event.trigger(marker, 'click'); 
 
} 
 
google.maps.event.addDomListener(window, "load", initialize);

html, 
 
body, 
 
#map_canvas { 
 
    height: 100%; 
 
    width: 100%; 
 
    margin: 0px; 
 
    padding: 0px 
 
}

<script src="https://maps.googleapis.com/maps/api/js"></script> 
 
<div id="map_canvas"></div>

Answer 2

あなたはinfoWindow.setContentへの引数のうち、有効なHTML文字列を作成divの

google.maps.event.addListener(marker, 'click', (function(marker, i) { 
    return function() { 
     infowindow.setContent('<img style="width:100px; height: 50px;" src="' 
     + arrOfGeoPoints[i].image+'" ><div>' 
     + arrOfGeoPoints[i].address 
     + ' - This text should appear, like the image ' +'</div>'); 
     //infowindow.setContent(arrOfGeoPoints[i].address); //text shows fine here 
     infowindow.open(map, marker); 

})(marker, i));