Карты Google не отображаются - PullRequest
Новая
       1

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

6 голосов
/ 03 августа 2011

У меня есть карта Google, которая не будет отображаться. Проблема, кажется, та же самая в FF & Chrome, но еще более «плохая» в IE (всегда последняя версия).

В FF & Chrome у меня проблема со стилем элемента position: relative; css. Как только я переключаюсь на (с помощью инструментов разработчика) position: absolute(or: fixed);, все отображается нормально в FF. В Chrome карта показывает только верхние 30% (сверху).

В IE карта даже не загружается.

Вот материал сценария из <head>. Контент только для тестирования и ничего не значит. Примечание: я использую это только для загрузки карты. Это будет обменено позже. 

<!-- Script inside <head> tag -->
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?
        file=api&amp;
        v=2&amp;
        key=<?php echo self::GOOGLE_API_KEY; ?>&amp;
        sensor=false">
    </script>
    <script type="text/javascript">
    function initialize() 
    {
        var startpos = new google.maps.LatLng( 50.978056,11.029167 );
        var ops = { 
             zoom:      6
            ,center:    startpos
            ,mapTypeId: 
                 google.maps.MapTypeId.ROADMAP
                ,tileSize: new google.maps.Size( 256, 256 )
        }
        var map = new google.maps.Map( document.getElementById("map_canvas"), ops );
        var pos1 = new google.maps.LatLng( 50.7510776,12.4820724 );
        var contentString1 = '<div align="left" dir="ltr" class="infowin"><h3>test</h3>testen</div>';
        var infowindow1 = new google.maps.InfoWindow( {
             content:   contentString1
            ,maxWidth:  5
        } );
        var marker1 = new google.maps.Marker( { 
             position:  pos1
            ,map:       map
            ,title: 'test' 
        } );
        google.maps.event.addListener(
             marker1
            ,'click'
            ,function() { 
                infowindow1.open( map, marker1 );
            }
        );
    }
    </script>

Это целая разметка для страницы. 

<!-- html markup - There *really* isn't anything else -->
<body onload="initialize()">
<div id="map_canvas" style="width:100%; height:100%;"></div>
</body>

Я провел много времени в Google, ничего не находя. Есть идеи? Спасибо!

Ответы [ 2 ]

20 голосов
/ 14 мая 2012

html, body должно быть height:100%;.

Но имейте в виду, что если ваш элемент-держатель карты является дочерним по отношению к другому элементу, то этот элемент также должен иметь height:100%;

В противном случае установка только html и body не принесет вам пользы.

Пример, объясняющий мою точку зрения: 

<html>
<head>
  <style>
      html, body { height:100%; }
  </style>
</head>
<body>

<div id="wrapper">
     <div id="google-map-holder" style="width:100%; height:100%;"></div>
</div>

</body>
</html>

Итак, если вы делаете что-то подобное вышеописанному. height:100%; здесь не сработает.

Чтобы сделать эту работу, вы должны сделать то же самое со всеми родителями, от которых #google-map-holder является потомком, в этом случае мы добавили бы height:100%; к #wrapper элементу.

ЕСЛИ элемент #google-map-holder находился непосредственно за элементом #wrapper, и дочернего элемента body непосредственно, тогда достаточно было бы просто сделать html, body.

3 голосов
/ 03 августа 2011

Проблема в height: 100%; из # map_canvas.

Добавьте это к вашему , и оно должно работать (проверено в Firefox 5 и Safari 5.1): 

<style>
  html, body {
    height: 100%;
  }
</style>

Чтобы узнать, почему это необходимо, взгляните на первый ответ на этот вопрос:

Div 100% высоты работает в Firefox, но не в IE

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

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

...