Как добавить изображение на карты Google в мое информационное окно, используя javascript? - PullRequest
0 голосов
/ 02 августа 2020

Итак, я работаю над школьным проектом, и пока мне удалось добавить карту 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);
                });
            }
        };
    });
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...