Карта Google не отображается

ProgramBox

Карта Google не отображается

Post author:admin
Запись опубликована:8 марта, 2023
Post category:Вопросы по программированию

#javascript #google-maps

#javascript #google-карты

Вопрос:

Я следую вводному руководству по Картам Google, но по какой-то причине карта не отображается на моей веб-странице. Соответствующий HTML / CSS / JS:

 <!DOCTYPE html>
<html>
<head>
    <meta name="layout" content="main"/>

    <script type="text/javascript"
        src="http://maps.googleapis.com/maps/api/js?sensor=false">
    </script>
    <script type="text/javascript">
      function initialize() {
        var latlng = new google.maps.LatLng(-34.397, 150.644);
        var myOptions = {
          zoom: 8,
          center: latlng,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        var map = new google.maps.Map(document.getElementById("map_canvas"),
            myOptions);
      }

    </script>
</head>

<body onload="initialize()">
  <div id="map_canvas" style="width: 400px; height: 400px"></div>
</body>

</html>

Карта не отображается в map_canvas div.

Обновить

Я изменил страницу, чтобы она не использовала jQuery для загрузки карты. Теперь он использует точно тот же JS, что и в руководстве, но карта по-прежнему не отображается.

1. Вам не нужно подписываться на что-либо, чтобы использовать JS API Google Maps.

2. @AdamEberlin вы правы, подписка была удалена в версии 3

3. если вы задаете div определенный размер в пикселях, отображается ли карта?

Ответ №1:

В вашем коде 3 проблемы:

(1) добавьте следующие строки перед <script type="text/javascript">function initialize() {

 <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false">
</script>

Это в сообщении вашего ответа, но его нет в вашем файле http://www.iol.ie /~murtaghd/map/map.htm .

(2) Вам нужно позвонить initalize() (опять же: это в вашем сообщении, но не в коде):

 <body onload="initialize();">

(3) Установите размер холста для отображения карты (опять же: это в вашем сообщении, но не в коде). После этого вы можете изменить размер по своему усмотрению.

 <div id="map_canvas" style="width:500px; height:300px"></div>

Вы можете увидеть сайт, работающий на jsfiddle.

Ответ №2:

После бесчисленных поисков и тонны сообщений (которые были излишне сложными) я обнаружил, что если я просто добавлю встроенные стили высоты и ширины, карта загрузится. Я НЕ смог установить высоту и ширину элемента карты в заголовке или во внешней таблице стилей — карта исчезнет. Все остальное, что я извлек из текущей (??) документации Google Maps api:

Просто, как это:

   <div id="mapWrapper" style="height:500px; width:500px;">
    <div id="map" style="height:100%"></div>
  </div>  <!-- end of the mapWrapper  --> 
    <script>
      function initMap() {
        map = new google.maps.Map(document.getElementById('map'), {
          center: {lat: -34.397, lng: 150.644},
          zoom: 8
        });
      }

    </script>

Ответ №3:

Ваша проблема в том, что вы ссылаетесь на синтаксис jQuery, но вы не включили библиотеку jQuery на свою страницу. Я получаю ошибки JS:

 Error: l.google.maps.Load is not a function
Source File: http://www.iol.ie/~murtaghd/map/map_files/main.js
Line: 42

Error: $ is not defined
Source File: http://www.iol.ie/~murtaghd/map/map.htm
Line: 24

Второй — здешний убийца.

Ответ №4:

Вы не должны забывать использовать тип документа и загружать функцию javascript initialize() в тег, в который вы размещаете свою карту, и не забудьте установить height: и width: для вашей таблицы стилей, и я буду работать. если вы не установили высоту и ширину, она не будет отображаться

 <!DOCTYPE html>

<body onload="initialize();">
      <div style="height:350px; width:100%;" id="map-canvas"></div>
</body>

Ответ №5:

Вы ДОЛЖНЫ использовать initialize в качестве функции, поэтому измените свой код следующим образом:

$(function() {

Для;

function initialize() {

<body>

Для:

<body onload="initialize()" >

И: });

Для: }

Что должно привести к:

 <!DOCTYPE html>
<html>
<head>
    // This causes the common header, footer, styles, JQuery, etc. to be included
    <meta name="layout" content="main"/>

    <script type="text/javascript"
            src="http://maps.googleapis.com/maps/api/js?sensor=false">
    </script>
    <script type="text/javascript">
        // Use JQuery to trigger the loading of the Map
        function initialize() {
            var latlng = new google.maps.LatLng(-34.397, 150.644);
            var myOptions = {
                zoom: 8,
                center: latlng,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            var map = new google.maps.Map(document.getElementById("map_canvas"),
                    myOptions);
        }

    </script>
</head>

<body onload="initialize()" >
    <div id="map_canvas" style="width:400px; height:400px"></div>
</body>
</html>

1. Ваше предложение о том, что имя функции загрузки каким-то образом важно, не имеет никакого смысла. Тем не менее, я попробовал это, и это не сработало.

2. Я забыл включить, что вы ДОЛЖНЫ заменить: }); в } противном случае это недопустимая java

3. Отредактируйте приведенный выше пример, как я уже сказал, и доведите его до конца: draac.com/javatester.html это сработает, я проверял это несколько раз, и в следующий раз, пожалуйста, изучите немного больше, прежде чем голосовать против кого-то. А что, если инициализировать JS-файл из ссылок Google?

4. Я протестировал ваше предложение, и оно не сработало, сколько еще исследований я могу провести? Говорить, что изменение имени функции изменит поведение, не имеет никакого смысла

5. Это не Java, это JavaScript

Ответ №6:

У меня была такая же проблема. Этот фрагмент кода:

 <div id="map_canvas" style="width:500px; height:300px"></div>

.. помогло мне — я добавил ширину / высоту стиля в разметку, и это сработало.