Why is the map not showing with Google Maps?

Question

css

There is a Google map in the modal window , but it is not displayed correctly. Displayed in gray.

But if you resize the browser window, then the map becomes more or less acceptable, but only a bug with a label remains (see screenshot).

The API key is registered. The code is the following:

<div class="modal-content">
                        <script src='https://maps.googleapis.com/maps/api/js?v=3.exp&key=AIzaSyBEdI95UsiiGhjDAsICADwKsQ5-bjR7WVM'></script>
                        <div style='overflow:hidden;height:340px;width:100%;'>
                            <div id='gmap_canvas' style='height:440px;width:100%;'></div>
                            <style>
                                #gmap_canvas img {
                                    max-width: none!important;
                                    background: none!important
                                }

                            </style>
                        </div>
                        <script type='text/javascript'>
                            function init_map() {
                                var myOptions = {
                                    zoom: 17,
                                    center: new google.maps.LatLng(49.988952, 36.26895860000002),
                                    mapTypeId: google.maps.MapTypeId.ROADMAP
                                };
                                map = new google.maps.Map(document.getElementById('gmap_canvas'), myOptions);
                                marker = new google.maps.Marker({
                                    map: map,
                                    position: new google.maps.LatLng(49.988952, 36.26895860000002)
                                });
                                infowindow = new google.maps.InfoWindow({
                                    content: '<strong>Leo Dent</strong><br>г.Харьков, пр.Московский, 137<br>'
                                });
                                google.maps.event.addListener(marker, 'click', function() {
                                    infowindow.open(map, marker);
                                });
                                infowindow.open(map, marker);
                            }
                            google.maps.event.addDomListener(window, 'load', init_map);

                        </script>
                    </div>

In another topic Why are Google Maps not displaying correctly? with a similar problem, it is advised to redraw the map. And also, always call this method when resizing the window (window resize). google.maps.event.trigger(MapInstance,'resize')Not quite sure how to apply this method in my case.
Added:
Added

google.maps.event.addDomListener(window, 'click', init_map);

into the map code and everything began to be displayed well, but the map is redrawn after each click, how to make it redraw only when a certain link is clicked?

Answer 1

possible js conflict

Answer 2

The problem is most likely a delayed download. What you have done is the wrong approach. The map should load itself without any clicks. Try setting the timeout to half a second in the init_map function, for example. And see if it loads or not.