Итак, я работаю над школьным проектом, и пока мне удалось добавить карту Google с настраиваемыми маркерами, и когда вы нажимаете на них, появляется всплывающее информационное окно с названием места. Теперь я хотел добавить изображение в это информационное окно, чтобы, когда вы щелкнете по местоположению, под ним будет изображение и его имя. Вот что я сделал до сих пор:
<div class="explore-img">
<!-- Start Map Nav Section -->
<div class="map-button-container">
<button id="restaurants" class="map-button">restaurants</button>
</div>
</div>
$("#restaurants").click(function () {
//array of markers
var restaurantMarkers = [{
coords:{lat:59.9178541,lng:10.7339675},
content: '<h6>Den Glade Gris</h6>',
},
{
coords:{lat:59.9088001,lng:10.7247294},
content: '<h6>Rorbua Aker Brygge</h6>',
},
{
coords:{lat:59.9075576,lng:10.758191},
content: '<h6>Maaemo</h6>',
}];
//Loop Through Markers
for(var i = 0; i < restaurantMarkers.length; i++){
//Add Marker
addRestaurantMarker(restaurantMarkers[i]);
}
//Add Marker Function
function addRestaurantMarker(props){
var marker = new google.maps.Marker({
position:props.coords,
map:map,
icon:
"https://img.icons8.com/office/40/000000/marker.png",
});
if(props.content){
var infowindow = new google.maps.InfoWindow({
content: props.content
});
marker.addListener('click', function() {
infowindow.open(map, marker);
});
}
};
});