Карта Google отображена, но пуста - PullRequest
Новая
       1

Карта Google отображена, но пуста

0 голосов
/ 03 октября 2018

Я хочу отобразить карту Google - однако последняя не заполнена (логотип Google не отображается, ни города, ни улицы, и т. Д.).Там нет ошибки в консоли.Вот иллюстрация проблемы:

Google map shown empty

Источники

Следующий код является выдержкой.Такие теги, как <body> и т. Д. Не отображаются. 

<div style="width: 500px; height: 500px;">
            <div style="width: 500px; height: 500px;" id="page-gaz-de-ville-map"></div>
        </div>
        <script type="text/javascript">
            $(document).ready(function() {
                var map;

                $.getScript('https://maps.googleapis.com/maps/api/js?key=XYZ', initMap);

                function initMap() {

                    var clusterStyles = [];

                    var mapstyles = [];

                    map = new google.maps.Map(document.getElementById('page-gaz-de-ville-map'), {
                        styles : mapstyles
                    });
                }

            });
                </script>

Вопрос

Это поддельный ключ API.Почему карта пуста и как я могу решить проблему?

Ответы [ 4 ]

0 голосов
/ 03 октября 2018

Это на самом деле вы хотите. Сначала необходимо добавить теги HTML, BODY, затем необходимо импортировать плагин JQuery ($ (документ) - это JQuery) 

$(document).ready(function () {
        var map;
        $.getScript('https://maps.googleapis.com/maps/api/js?key=XYZ', initMap);
        function initMap() {
            var myOptions = {
            zoom: 12,
            center: new google.maps.LatLng(9.981496491854426, 76.30557754516597),
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        var map = new google.maps.Map(document.getElementById('page-gaz-de-ville-map'), myOptions);
        }
    });
0 голосов
/ 03 октября 2018

Я бы порекомендовал загрузить файл js следующим образом: 

<script async defer src=".....key=XYZ&callback=initMap"></script>

Это должно обеспечить отложенную загрузку, которую, я полагаю, вы пытались достичь с помощью вызова getScript.

И определитьфункция initMap в элементе script в теге head.Сделал трюк для меня.

0 голосов
/ 03 октября 2018

Пожалуйста, используйте следующий код, 

<!--- First of all need to add below script  --->
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=Your Key&v=3&libraries=places,visualization"></script>

<!--- Below code is used to invoke the google map --->
<script type="text/javascript">
    $(document).ready(function() {
        myLatlng = new google.maps.LatLng(64485, 2674827.909);

        var myOptions = {
            zoom: 18,
            zoomControl: true,
            center: myLatlng,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };

        map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

        myMarker = new google.maps.Marker({
            position: myLatlng
        });
        myMarker.setMap(map);
    });
</script>

<!--- Html code --->
<div style="width: 600px; height: 400px;" id="map_canvas"></div>

Дайте мне знать, если у вас есть какие-либо вопросы.

0 голосов
/ 03 октября 2018

Вам необходимо создать ключ API .

и заменить XYZ, в вызове javascript, на ваш ключ.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...