Chefranov
@Chefranov
Front-End, Back-End

Почему не отображается карта с Google Maps?

Имеется карта Google в модальном окне, но она отображается не корректно. Выводится серым цветом.
5a131b0359219004510200.png
Но если ресайзнуть окно браузера, то карта становится более менее приемливо, но остается только баг с меткой (см. скрин).
5a131b40288b3862834838.png
Ключ API прописан. Код следующий:
<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>

В другой теме Почему некоректно отображаются карты Google Map? с похожей проблемой советуют перерисовывать карту. А так же, всегда вызывать этот метод при изменении размеров окна (window resize). google.maps.event.trigger(MapInstance,'resize') Не совсем понял как этот метод применить в моем случае.

Добавлено:
Добавил
google.maps.event.addDomListener(window, 'click', init_map);
в код карты и всё стало хорошо отображаться, но карта перерисовывается после каждого клика, как сделать чтобы перерисовывалась только по клику на определенную ссылку?
  • Вопрос задан
  • 1292 просмотра
Пригласить эксперта
Ответы на вопрос 2
Ptolemy_master
@Ptolemy_master
Проблема, скорее всего, в запаздывании загрузки. То, что вы сделали - это неправильный подход. Карта должна грузится сама без всяких кликов. Попробуйте в функцию init_map поставить таймаут на полсекунды, например. И посмотреть, грузится она или нет.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы