これを修正して、HTML div要素からGoogleマップマーカーのポップアップコンテンツに画像を追加するにはどうすればよいですか？

Question

これは私のニーズに合わせてカスタマイズしているgoogle maps apiの完全なJavascriptです。このコードが行うことは、ポップアップ情報を含むマーカーを作成することです。 popusの内容のテキストは、CSSファイルからのもので、name、address1、address2、およびpostalCodeという情報があります。私はイメージのための変数を追加して、各マーカーのテキスト情報の下に異なる画像を追加する必要があり、それはVAR iwContent変数にこの"<img src=''>"のようなもののようなものを追加する必要がありますと仮定しますが、私はどのように

var map; 
var infoWindow; 
var markersData = [{ 
    lat: 41.998079, 
    lng: 21.426156, 
    name: "Camping Praia da Barra", 
    address1: "Rua Diogo Cão, 125", 
    address2: "Praia da Barra", 
    postalCode: "3830-772 Gafanha da Nazaré" 
}]; 

function initialize() { 
    var mapOptions = { 
     center: new google.maps.LatLng(40.601203, -8.668173), 
     zoom: 9, 
     mapTypeId: 'roadmap', 
    }; 
    map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); 
    infoWindow = new google.maps.InfoWindow(); 
    google.maps.event.addListener(map, 'click', function() { 
     infoWindow.close(); 
    }); 
    displayMarkers(); 
} 
google.maps.event.addDomListener(window, 'load', initialize); 

function displayMarkers() { 
    var bounds = new google.maps.LatLngBounds(); 
    for (var i = 0; i < markersData.length; i++) { 
     var latlng = new google.maps.LatLng(markersData[i].lat, markersData[i].lng); 
     var name = markersData[i].name; 
     var address1 = markersData[i].address1; 
     var address2 = markersData[i].address2; 
     var postalCode = markersData[i].postalCode; 
     var image = markersData[i].image; 
     createMarker(latlng, name, address1, address2, postalCode, image); 
     bounds.extend(latlng); 
    } 
    map.fitBounds(bounds); 
} 

function createMarker(latlng, name, address1, address2, postalCode, image) { 
    var marker = new google.maps.Marker({ 
     map: map, 
     position: latlng, 
     title: name, 
     icon: 'anchor_point_with shadow.png' 
    }); 
    google.maps.event.addListener(marker, 'click', function() { 
     var iwContent = '<div id="iw_container">' + '<div class="iw_title">' + name + '</div>' + '<div class="iw_content">' + address1 + '<br />' + address2 + '<br />' + postalCode + '</div></div>'; //i guess change should be made at this line 
     infoWindow.setContent(iwContent); 
     infoWindow.open(map, marker); 
    }); 
} 

Answer 1

を把握することはできません

はmarkersData

var markersData = [{ 
 
    lat: 41.998079, 
 
    lng: 21.426156, 
 
    name: "Camping Praia da Barra", 
 
    address1: "Rua Diogo Cão, 125", 
 
    address2: "Praia da Barra", 
 
    postalCode: "3830-772 Gafanha da Nazaré", 
 
    image: "http://lorempixel.com/100/100/" 
 
}]; 
 

 

 
function initialize() { 
 
    var mapOptions = { 
 
    center: new google.maps.LatLng(40.601203, -8.668173), 
 
    zoom: 9, 
 
    mapTypeId: 'roadmap', 
 
    }; 
 

 
    map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); 
 

 
    infoWindow = new google.maps.InfoWindow(); 
 

 

 
    google.maps.event.addListener(map, 'click', function() { 
 
    infoWindow.close(); 
 
    }); 
 

 

 
    displayMarkers(); 
 
} 
 
google.maps.event.addDomListener(window, 'load', initialize); 
 

 

 

 
function displayMarkers() { 
 

 

 
    var bounds = new google.maps.LatLngBounds(); 
 

 

 
    for (var i = 0; i < markersData.length; i++) { 
 

 
    var latlng = new google.maps.LatLng(markersData[i].lat, markersData[i].lng); 
 
    var name = markersData[i].name; 
 
    var address1 = markersData[i].address1; 
 
    var address2 = markersData[i].address2; 
 
    var postalCode = markersData[i].postalCode; 
 
    var image = markersData[i].image; 
 

 
    createMarker(latlng, name, address1, address2, postalCode, image); 
 

 

 
    bounds.extend(latlng); 
 
    } 
 

 
    map.fitBounds(bounds); 
 
} 
 

 

 
function createMarker(latlng, name, address1, address2, postalCode, image) { 
 
    var marker = new google.maps.Marker({ 
 
    map: map, 
 
    position: latlng, 
 
    title: name, 
 
    //icon: 'anchor_point_with shadow.png' 
 
    }); 
 

 

 
    google.maps.event.addListener(marker, 'click', function() { 
 

 

 
    var iwContent = '<div id="iw_container">' + 
 
     '<div class="iw_title">' + name + '</div>' + 
 
     '<div class="iw_content">' + address1 + '<br />' + 
 
     address2 + '<br />' + 
 
     postalCode + '</div>'+ 
 
     '<img src="'+image+'"></div>'; //i guess change should be made at this line 
 

 

 
    infoWindow.setContent(iwContent); 
 

 

 
    infoWindow.open(map, marker); 
 
    }); 
 
}; 
 

 
initialize();

html, 
 
body { 
 
    height: 100%; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
#map-canvas { 
 
    height: 100%; 
 
    width: 100%; 
 
}

<script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script> 
 
<div id="map-canvas"></div>

でそれを定義した後、 imageを含む文字列 ìwContentに <img src="...を追加します3210

Answer 2

var markersData = [{ 
 
    lat: 41.998079, 
 
    lng: 21.426156, 
 
    name: "Camping Praia da Barra", 
 
    address1: "Rua Diogo Cão, 125", 
 
    address2: "Praia da Barra", 
 
    postalCode: "3830-772 Gafanha da Nazaré", 
 
    image: "http://lorempixel.com/100/100/" 
 
}]; 
 

 

 
function initialize() { 
 
    var mapOptions = { 
 
    center: new google.maps.LatLng(40.601203, -8.668173), 
 
    zoom: 9, 
 
    mapTypeId: 'roadmap', 
 
    }; 
 

 
    map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); 
 

 
    infoWindow = new google.maps.InfoWindow(); 
 

 

 
    google.maps.event.addListener(map, 'click', function() { 
 
    infoWindow.close(); 
 
    }); 
 

 

 
    displayMarkers(); 
 
} 
 
google.maps.event.addDomListener(window, 'load', initialize); 
 

 

 

 
function displayMarkers() { 
 

 

 
    var bounds = new google.maps.LatLngBounds(); 
 

 

 
    for (var i = 0; i < markersData.length; i++) { 
 

 
    var latlng = new google.maps.LatLng(markersData[i].lat, markersData[i].lng); 
 
    var name = markersData[i].name; 
 
    var address1 = markersData[i].address1; 
 
    var address2 = markersData[i].address2; 
 
    var postalCode = markersData[i].postalCode; 
 
    var image = markersData[i].image; 
 

 
    createMarker(latlng, name, address1, address2, postalCode, image); 
 

 

 
    bounds.extend(latlng); 
 
    } 
 

 
    map.fitBounds(bounds); 
 
} 
 

 

 
function createMarker(latlng, name, address1, address2, postalCode, image) { 
 
    var marker = new google.maps.Marker({ 
 
    map: map, 
 
    position: latlng, 
 
    title: name, 
 
    //icon: 'anchor_point_with shadow.png' 
 
    }); 
 

 

 
    google.maps.event.addListener(marker, 'click', function() { 
 

 

 
    var iwContent = '<div id="iw_container">' + 
 
     '<div class="iw_title">' + name + '</div>' + 
 
     '<div class="iw_content">' + address1 + '<br />' + 
 
     address2 + '<br />' + 
 
     postalCode + '</div>'+ 
 
     '<img src="'+image+'"></div>'; //i guess change should be made at this line 
 

 

 
    infoWindow.setContent(iwContent); 
 

 

 
    infoWindow.open(map, marker); 
 
    }); 
 
}; 
 

 
initialize();

html, 
 
body { 
 
    height: 100%; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
#map-canvas { 
 
    height: 100%; 
 
    width: 100%; 
 
}

<script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script> 
 
<div id="map-canvas"></div>