API Карт Google v3 | показывает нет данных карты

Я программирую небольшое приложение для JavaScript для нашего местного дома пожарных. Приложение немного похоже на powerpoint и т. Д., Но в html. В этом приложении я бы показал карту карт google с маршрутом, который показывает путь от пожарного дома к огню. Я использую jquery для запроса данных с http-сервера.API Карт Google v3 | показывает нет данных карты

Моя проблема в том, что я вставил код для карт Google api, и браузер показывает мне объект карт с логотипом google и так далее. Но нет карты, есть только серый фон. С мышью кажется, что я могу увеличивать/уменьшать масштаб, прокручивать и т. Д. На карте (если я взаимодействую, в firebug приходит datatransfers для google api), но карты там не было.

Внесены личные карты api key, и если я удалю его, плагин покажет неудачу. Поэтому я думаю, что это не проблема.

есть проблема с jquery и картами api? У кого-нибудь еще проблемы с этим?

<!DOCTYPE html> 
<html> 
<head> 
    <title></title> 
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
    <link rel="stylesheet" type="text/css" href="./css/standard.css"> 
    <script src="./js/libs/jquery-1.9.0/jquery.min.js" type="text/javascript"></script> 
    <script type="text/javascript" 
     src="http://maps.googleapis.com/maps/api/js?key=api_key&sensor=false"> 
    </script> 
    <script type="text/javascript"> 
     function initialize() { 
      var mapOptions = { 
       center: new google.maps.LatLng(50.98188, 6.78655), 
       zoom: 8, 
       mapTypeId: google.maps.MapTypeId.ROADMAP 
      }; 
      var map = new google.maps.Map(document.getElementById("map_canvas"),mapOptions); 
      window.console.log("Position center: "+map.getCenter()+"\nZoom: "+map.getZoom()); 
      map.setZoom(12); 
      map.setCenter(new google.maps.LatLng(0, 0)); 
      window.console.log("Position center: "+map.getCenter()+"\nZoom: "+map.getZoom()); 
     } 
    </script> 
</head> 
<body> 
    <div id="site_content"> 
     <div id="head_left" class="background_box"> 
     </div> 
     <div id="head_center" class="background_box"> 
      <div class="heading"></div> 
     </div> 
     <div id="head_right" class="background_box"> 
      <h1 class="date_data"></h1> 
      <h1 class="time_data"></h1> 
     </div> 
     <div class="spacing_data"></div> 
     <div id="data_box" class="background_box"> 
      <div id="map_canvas" style="width: 100%;height: 100%"></div> 
     </div> 
     <div class="spacing_data"></div> 
     <div id="footer_left" class="background_box"> 
     </div> 
     <div id="footer_center" class="background_box"> 
      <div class="footer"></div> 
     </div> 
     <div id="footer_right" class="background_box"> 
     </div> 
    </div> 
    <script> 
     jQuery.getScript("./js/initialisation.js",function(){initialisation();}); 
     initialize(); 
    </script> 
</body>

нет контента, потому что это все загружается во время выполнения с сервера через JQuery, а затем вставляется в DOM.

источник

2013-08-16 user2689153

возможно дубликат [Google Maps V3, карта не будет отображаться, когда обернутый во второй DIV] (http://stackoverflow.com/questions/10675075/google -maps-v3-map-wont-display-when-wrapped-in-a-second-div) – geocodezip

Предположим, что это не проблема CSS с отсутствующей высотой #map_canvas (как я понимаю, карта видна , но не загружает ни одной плитки) ... нам нужно больше деталей, потому что на этот код не может быть дан ответ. Пожалуйста, разместите содержимое initialisation.js и standard.css –

См Mike Williams' description on percentage sized maps from his v2 tutorial

Вам нужно добавить определения для всех родительских элементов карты, чтобы браузер, чтобы вычислить размер не нулевой.

working example

<!DOCTYPE html> 
<html> 
<head> 
    <title></title> 
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
<style type="text/css"> 
html,body { 
width: 100%; 
height: 100%; 
} 
</style> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script> 
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script> 
<script type="text/javascript"> 
     function initialize() { 
      var mapOptions = { 
       center: new google.maps.LatLng(50.98188, 6.78655), 
       zoom: 8, 
       mapTypeId: google.maps.MapTypeId.ROADMAP 
      }; 
      var map = new google.maps.Map(document.getElementById("map_canvas"),mapOptions); 
      window.console.log("Position center: "+map.getCenter()+"\nZoom: "+map.getZoom()); 
      map.setZoom(12); 
      map.setCenter(new google.maps.LatLng(0, 0)); 
      window.console.log("Position center: "+map.getCenter()+"\nZoom: "+map.getZoom()); 
     } 
google.maps.event.addDomListener(window,"load",initialize); 
</script> 
</head> 
<body> 
    <div id="site_content" style="width: 100%;height: 100%;"> 
     <div id="head_left" class="background_box" > 
     </div> 
     <div id="head_center" class="background_box"> 
      <div class="heading"></div> 
     </div> 
     <div id="head_right" class="background_box"> 
      <h1 class="date_data"></h1> 
      <h1 class="time_data"></h1> 
     </div> 
     <div class="spacing_data"></div> 
     <div id="data_box" class="background_box" style="width: 100%;height: 100%;"> 
      <div id="map_canvas" style="width: 100%;height: 100%;"></div> 
     </div> 
     <div class="spacing_data"></div> 
     <div id="footer_left" class="background_box"> 
     </div> 
     <div id="footer_center" class="background_box"> 
      <div class="footer"></div> 
     </div> 
     <div id="footer_right" class="background_box"> 
     </div> 
    </div> 
</body> 
</html>

источник

2013-08-16 13:16:16 geocodezip

Я ничего не видел, очевидно, неправильно, но это работает для меня. Возможно, это просто проблема с CSS.

<!DOCTYPE html> 
<html> 
<head> 
<title></title> 
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> 
<style type="text/css"> 
    html { height: 100% } 
    body { height: 100%; margin: 0; padding: 0 } 
    #map_canvas { height: 100% } 
</style> 

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

<script> 
    function initialize() { 
     var mapOptions = { 
      center: new google.maps.LatLng(50.98188, 6.78655), 
      zoom: 8, 
      mapTypeId: google.maps.MapTypeId.ROADMAP 
     }; 
     var map = new google.maps.Map(document.getElementById("map_canvas"),mapOptions); 
     window.console.log("Position center: "+map.getCenter()+"\nZoom: "+map.getZoom()); 
     map.setZoom(12); 
     map.setCenter(new google.maps.LatLng(0, 0)); 
     window.console.log("Position center: "+map.getCenter()+"\nZoom: "+map.getZoom()); 
    } 

    google.maps.event.addDomListener(window, 'load', initialize); 
</script> 
</head> 
<body> 
    <div id="map_canvas"></div> 
</body> 
</html>

источник

2013-08-16 13:18:22 duncan

сейчас все в порядке с картой. Спасибо за вашу помощь.

Теперь после отладки я знал, что у меня были две проблемы в моем коде раньше. 1. Процентная проблема с размером карты 2. Мои поля div, где определены с переполнением: скрытые. после того, как я удалил это объявление, теперь отображается полная карта.

Как в начале: Спасибо

источник

2013-08-19 08:58:19 user2689153

В моем случае это была проблема со стилями, первым Я отключил все из них, чтобы посмотреть, что происходит, и потому, что карты появились я новый, они были ответственны. Затем я перевернул все стили и удалил строки за строкой, чтобы узнать, кто из них несет ответственность.

источник

2015-10-28 23:54:53 Picard

<!-- Preloader --> 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script> 
<script src="js/cookie.js"></script> 
<!-- Latest compiled and minified CSS --> 
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css"> 

<!-- Optional theme --> 
<!-- Compiled and minified CSS --> 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/css/materialize.min.css"> 

<!-- Compiled and minified JavaScript --> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/js/materialize.min.js"></script> 
<meta charset="utf-8" /> 
<meta name="format-detection" content="telephone=no" /> 
<meta name="msapplication-tap-highlight" content="no" /> 
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width" /> 
<!-- This is a wide open CSP declaration. To lock this down for production, see below. --> 
<meta http-equiv="Content-Security-Policy" content="default-src * 'unsafe-inline'; style-src 'self' 'unsafe-inline'; media-src *" /> 
<!-- Good default declaration: 
* gap: is required only on iOS (when using UIWebView) and is needed for JS- >native communication 
* https://ssl.gstatic.com is required only on Android and is needed for TalkBack to function properly 
* Disables use of eval() and inline scripts in order to mitigate risk of XSS vulnerabilities. To change this: 
* Enable inline JS: add 'unsafe-inline' to default-src 
* Enable eval(): add 'unsafe-eval' to default-src 
* Create your own at http://cspisawesome.com 
--> 
<!-- <meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: 'unsafe-inline' https://ssl.gstatic.com; style-src 'self' 'unsafe-inline'; media-src *" /> -->

попробовать это ....

источник

2016-07-13 00:21:30

Привет Amr, добро пожаловать в StackOverflow. Кодекс только ответы не поощряются здесь, поскольку они неясны и ничего не учат.Можете ли вы, пожалуйста, отредактировать свой ответ, чтобы описать, почему это решает проблему OP и что она делает? Благодарю. –

API Карт Google v3 | показывает нет данных карты

ответ

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