height = 100% не отображает карты Google api

Я пытаюсь использовать API Карт Google. Я получил ключ авторизации и вставил в пример кода, который они нам дали, но я не могу сделать отображение карты даже тогда, когда они говорят мне, чтобы я поставил высоту 100% как на мой div div, так и на тело.height = 100% не отображает карты Google api

Я пробовал, и он не появится. Если я положил высоту 500 пикселей на карту div и дал телу 100% -ую высоту, это сработает ... но я хочу знать, почему высота 100% не будет рендерить. Я копирую именно то, что дает мне документация Google (https://developers.google.com/maps/documentation/javascript/examples/map-simple) и что видео говорит мне дважды проверить. ПОМОЩЬ, я безумно интересуюсь, почему 100% высота не будет отображаться. Я хочу использовать проценты, чтобы он мог быть совместим с мобильными устройствами!

<!doctype html> 
<html lang="en-us"> 
<head> 
    <meta charset="utf-8"> 
    <title>Ice Cream</title> 

     <!-- Google Docs--> 


    <!-- external CSS link --> 
    <link rel="stylesheet" href="css/reset.css"> 
    <link rel="stylesheet" href="css/style.css"> 
    <script src="http://code.jquery.com/jquery-latest.min.js"></script> 


    </head> 


<body> 


<div id='map_canvas'> HELLOooo <!--dimensions of map are set in CSS--> 
</div> 


    <!-- external CSS link --> 
    <!-- javascript --> 
     <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDuDCh7Odrr4RUUiAHMyDtfwC2NtySy-64"></script> 
     <script src="js/index.js"></script> 



</body> 
</html> 


body, #map_canvas{ 
    margin:0; 
    padding:0; 
    height: 100%; 



} 


    $(function() { 
    console.log("hi"); 

    function initialize() { 
     var mapOptions = { 
      center: { lat: -34.397, lng: 150.644}, 
      zoom: 8 
     }; 
     var map = new google.maps.Map(document.getElementById('map_canvas'), 
      mapOptions); 
     } 

     google.maps.event.addDomListener(window, 'load', initialize); 

console.log('map'); 



    });

источник

2015-02-15 yasmin

Try добавление мин-высота: 100%, а также. Я предполагаю, что тело не так высоко, как вы думаете. Добавьте также html {height: 100%}. –

Спасибо! Это сработало !!! – yasmin

Причина 100% не работает потому, что карта должна послать вам изображения в определенном соотношении (фиксированный width & height). Теперь я могу угадать здесь, но это то, что я думаю.

Так как у меня была аналогичная проблема, где моя карта была скрыта внутри вкладки, я написал эту функцию, чтобы вычислить ширину или соотношение ширины &. Тогда, независимо от размера контейнера, карта была включена, она будет корректироваться. Он использует jQuery, поэтому я просто решил опубликовать его, чтобы получить эту идею.

/** 
    * Calculate the dimensions 
    */ 
    calculateMap: function() { 
     var self = this, 
      parent = this.map.parent(), // jQuery obj 
      w, h, id, el; 

     // if the container of your map is visible and wrapped it has a certain width and height... 
     // if it also has 100% height, it could be collapsed (not wrapped) 
     // so you ask the google maps api to load images at 500px width and 0height? 
     // if the parent has 0height, the ratio helps to set it properly 
     // with debug tools (F12) you can see the parent if it lights up 
     if (parent.is(':visible')) { 
      w = parent.outerWidth(false); 
      h = w * this.settings.options.mapRatio; // 4/3 | 16/9 
      this.map.css({ width: w, height: h }); 
     } else { 
      // if your map is invisible after load... 
      id = this.onParent.prop('id'); // this id references my tab 
      el = this.onParent.prevAll().find('a[href=#' + id + ']'); // trigger of the tab 
      // add click event once 
      el.one(this.settings.events.onParent, function() { 
       setTimeout(function() { 
        self.activate(); // goes back to calculateMap() 
       }, 200); 
      }.bind(this)); 
     } 
    },

Если вы вызываете calculateMap на resize случае, вы будете иметь адаптивный подход.

Также быстрый google показал мне this approach ... обратите внимание на фиксированную ширину и высоту на iframe.

Короче:

фиксированной ширины и высоты в CSS дает чистое решение. вы могли бы использовать clearfix, padding в % или min-height в px, чтобы получить измерение, если это сработает.
Для загрузки динамических/событий я предлагаю JavaScript или JQuery
или с фреймом и фиксированной шириной и высотами

источник

2015-02-15 04:22:08

Браузер должен иметь возможность рассчитать высоту ненулевого. Вы должны установить высоту html элемента до 100% также:

$(function() { 
 
    console.log("hi"); 
 

 
    function initialize() { 
 
     var mapOptions = { 
 
      center: { lat: -34.397, lng: 150.644}, 
 
      zoom: 8 
 
     }; 
 
     var map = new google.maps.Map(document.getElementById('map_canvas'), 
 
      mapOptions); 
 
     } 
 

 
     google.maps.event.addDomListener(window, 'load', initialize); 
 

 
console.log('map'); 
 

 

 

 
    });

html, body, #map_canvas{ 
 
    margin:0; 
 
    padding:0; 
 
    height: 100%; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maps.googleapis.com/maps/api/js"></script> 
 
<div id='map_canvas'> HELLOooo <!--dimensions of map are set in CSS--> 
 
</div>

источник

2015-02-15 14:15:24 geocodezip

height = 100% не отображает карты Google api

ответ

Смежные вопросы