Гугл карта не появляется - PullRequest
Новая
       4

Гугл карта не появляется

9 голосов
/ 06 октября 2011

Я следую вводному учебнику для Карт 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, что и в руководстве, но карта все равно не появляется.

Ответы [ 6 ]

15 голосов
/ 07 октября 2011

Есть 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 .

0 голосов
/ 07 января 2017

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

Просто так: 

  <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>
0 голосов
/ 02 сентября 2014

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

<!DOCTYPE html>

<body onload="initialize();">
      <div style="height:350px; width:100%;" id="map-canvas"></div>
</body>
0 голосов
/ 01 декабря 2012

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

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

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

0 голосов
/ 06 октября 2011

Ваша проблема в том, что вы имеете в виду синтаксис 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

Второй убийца здесь.

0 голосов
/ 06 октября 2011

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

$(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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

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

...