Why infobox does not load correctly inside google maps modal window?

Question

I have a map with markers for all hotels on a specific area and when i click on each marker display the infobox of each hotel. This map opens on modal window.

When the user clicks on "View Larger Map" button, the map is displayed on a modal window with the infobox of that particular hotel open by default. However, the infobox it does not load correctly, it seems broken and is not on the center and when i click the marker it displays it correctly.

Also, when i close the modal window and open it again the map does not render completely and i have to zoom in or zoom out to render it completely. Any idea?

Ι tried google.maps.event.trigger(mapObject, "resize"); but it did not work.

Javascript

(function(A) {

if (!Array.prototype.forEach)
    A.forEach = A.forEach || function(action, that) {
        for (var i = 0, l = this.length; i < l; i++)
            if (i in this)
                action.call(that, this[i], i, this);
        };

    })(Array.prototype);

    var
    mapObject,
    markers = [],
    markersData = {
        'Single_hotel': [
        {
            name: 'Villas',
            location_latitude: 37.713490, 
            location_longitude: 20.980900,
            map_image_url: 'img/villas/280.jpg',
            name_point: 'Luxury Villas',
            description_point: 'Lorem Ipsum',
            get_directions_start_address: '',
            phone: '+30 2641 085625',
            url_point: 'single_hotel.html'
        },
        {
            name: 'Villas2',
            location_latitude: 37.881908, 
            location_longitude: 20.705990,
            map_image_url: 'img/villas/280.jpg',
            name_point: 'Luxury Villas 2',
            description_point: 'Lorem Ipsum',
            get_directions_start_address: '',
            phone: '+30 2641 085625',
            url_point: 'single_hotel.html'
        }

        ]

    };


        var mapOptions = {
            zoom: 14,
            center: new google.maps.LatLng(37.713490, 20.980900),
            mapTypeId: google.maps.MapTypeId.ROADMAP,

            mapTypeControl: false,
            mapTypeControlOptions: {
                style: google.maps.MapTypeControlStyle.DROPDOWN_MENU,
                position: google.maps.ControlPosition.LEFT_CENTER
            },
            panControl: false,
            panControlOptions: {
                position: google.maps.ControlPosition.TOP_RIGHT
            },
            zoomControl: true,
            zoomControlOptions: {
                style: google.maps.ZoomControlStyle.LARGE,
                position: google.maps.ControlPosition.TOP_LEFT
            },
            scrollwheel: false,
            scaleControl: false,
            scaleControlOptions: {
                position: google.maps.ControlPosition.TOP_LEFT
            },
            streetViewControl: true,
            streetViewControlOptions: {
                position: google.maps.ControlPosition.LEFT_TOP
            },

        };
        var marker;
        mapObject = new google.maps.Map(document.getElementById('map_modal'), mapOptions);
        for (var key in markersData)
            markersData[key].forEach(function (item) {
                marker = new google.maps.Marker({
                    position: new google.maps.LatLng(item.location_latitude, item.location_longitude),
                    map: mapObject,
                    icon: 'img/pins/' + key + '.png',
                });


                if ('undefined' === typeof markers[key])
                    markers[key] = [];
                    markers[key].push(marker);

                google.maps.event.addListener(marker, 'click', (function () {
                  closeInfoBox();
                  getInfoBox(item).open(mapObject, this);
                  mapObject.setCenter(new google.maps.LatLng(item.location_latitude, item.location_longitude));
 }));

});

    function onHtmlClick(key,key2) {
      google.maps.event.trigger(markers[key][key2], 'click');

    }

    function hideAllMarkers () {
        for (var key in markers)
            markers[key].forEach(function (marker) {
                marker.setMap(null);
            });
    };

    function closeInfoBox() {
        $('div.infoBox').remove();
    };

    function getInfoBox(item) {
        return new InfoBox({
            content:
            '<div class="marker_info" id="marker_info">' +
            '<img src="' + item.map_image_url + '" alt="Image"/>' +
            '<h3>'+ item.name_point +'</h3>' +
            '<span>'+ item.description_point +'</span>' +
            '<div class="marker_tools">' +
            '<form action="http://maps.google.com/maps" method="get" target="_blank" style="display:inline-block""><input name="saddr" value="'+ item.get_directions_start_address +'" type="hidden"><input type="hidden" name="daddr" value="'+ item.location_latitude +',' +item.location_longitude +'"><button type="submit" value="Get directions" class="btn_infobox_get_directions">Directions</button></form>' +
                '<a href="tel://'+ item.phone +'" class="btn_infobox_phone">'+ item.phone +'</a>' +
                '</div>' +
                '<a href="'+ item.url_point + '" class="btn_infobox">Details</a>' +
            '</div>',
            disableAutoPan: false,
            maxWidth: 0,
            pixelOffset: new google.maps.Size(10, 125),
            closeBoxMargin: '5px -20px 2px 2px',
            closeBoxURL: "http://www.google.com/intl/en_us/mapfiles/close.gif",
            isHidden: false,
            alignBottom: true,
            pane: 'floatPane',
            enableEventPropagation: true
        });


    };

Html code

 <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<!-- Button to Open the Modal -->
<a href="#" class="btn_map location_map_btn properties" data-toggle="modal" data-target="#myModal" onclick="onHtmlClick('Single_hotel',0)">View Larger Map (Single_hotel[0])<i class="icon-location-5"></i></a><br>
<a href="#" class="btn_map location_map_btn properties" data-toggle="modal" data-target="#myModal" onclick="onHtmlClick('Single_hotel',1)">View Larger Map (Single_hotel[1])<i class="icon-location-5"></i></a>


<!-- The Modal map-->

<div class="modal fade" id="myModal">
  <div class="modal-dialog">
    <div class="modal-content">

      <!-- Modal Header -->
      <div class="modal-header">
        <h4 class="modal-title">Search By Map</h4>
        <button type="button" class="close" data-dismiss="modal">&times;</button>
      </div>

      <!-- Modal body -->
      <div class="modal-body">
        <div id="map_modal" class="map"></div>
      </div>

      <!-- Modal footer -->
      <div class="modal-footer">
        <button type="button" class="btn_map location_map_btn properties" data-dismiss="modal">Close</button>
      </div>

    </div>
  </div>
</div>
<!-- End modal map -->

<!-- Replace the value of the key parameter with your own API key. -->
<script src="https://maps.googleapis.com/maps/api/js?key=API_KEY"></script>
<script src="https://cdn.jsdelivr.net/gh/googlemaps/v3-utility-library@master/infobox/src/infobox.js"></script>

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

CSS code

#map {
  height: 100%;
}


html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

.map {
  height: 400px;
  width: 500px;
}

Please see jsfiddle

Answer 1

It looks like the marker is clicked while the modal is still loading which causes the infobox to not render correctly within the modal. Try waiting until the modal is loaded before showing the infobox. See below:

<a href="#" class="btn_map location_map_btn properties" data-toggle="modal" data-target="#myModal">View Larger Map (Single_hotel[0])<i class="icon-location-5"></i></a><br>

$('#myModal').on('shown.bs.modal', function(event) {
    onHtmlClick('Single_hotel', 0);
});

Hope this helps!