Google Map не работает после добавления API, отображающего серый квадрат

Карта Google показывает серый квадрат или иногда ничего не отображается/белый Я googled некоторые ссылки и пробую их пути, но не работал для меня. Любое решение? я попытался изменить масштаб, но по-прежнему не работает консоли не показывает ошибкуGoogle Map не работает после добавления API, отображающего серый квадрат

<head>  
<script src="http://maps.google.com/maps?file=api&amp;v=3&amp;hl=en&amp;key=GOOGLE_GENERATED_API&amp;sensor=true"type="text/javascript"></script> 
    <script> 
    function myMap() { 
     var myCenter = new google.maps.LatLng(31.4856,74.3406); 
     var mapCanvas = document.getElementById("map"); 
     var mapOptions = {center: myCenter, zoom: 8}; 
     var map = new google.maps.Map(mapCanvas, mapOptions); 
     var marker = new google.maps.Marker({position:myCenter}); 
     marker.setMap(map); 

     var infowindow = new google.maps.InfoWindow({ 
     content: "Welcome to Ali Institute of Education" 
     }); 
     infowindow.open(map,marker); 
    } 
    </script> 



    </head> 

    <body onload="myMap()"> 

    <?php include '/layout/header.php';?> 

    <!-- Contact Us Content --> 
    <div class="container-fluid"> 



     <div id="map" style="width: 800px; height: 400px; overflow:visible;">&nbsp;</div> 
    </div> 
</body>

источник

2017-01-09 Muhammad Saad Bhatti

Возможно, вы превышать максимальные пределы карты суточной нагрузки: https://developers.google.com/maps/documentation/static-maps/usage-limits?hl=es- 419 или просто –

@JordiFlores nope –

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&hl=en&key=GOOGLE_GENERATED_API&sensor=true" ></script> 

         <!--OR--> 

<script src="https://maps.google.com/maps/api/js?file=api&amp;v=3&amp;hl=en&amp;key=GOOGLE_GENERATED_API&amp;sensor=true"></script>

На этой ссылке заменить текст GOOGLE_GENERATED_API с Google API ключа.

Показаны идеально на моей стороне. Какую ошибку вы получите в своем браузере consollog? неверно указаны ваши API API карт. Возможно, вы получите эту ошибку google не определяет. google.maps.event.addDomListener (myMap); ADD эту строку или вы можете удалить onload из тела и добавить это google.maps.event.addDomListener (окно, 'load', myMap);

Дополнительная информация Я добавил функцию щелчка на маркер. Если у вас есть какие-либо вопросы, спросите меня в комментарии.


 
    function myMap() { 
 
     var myCenter = new google.maps.LatLng(31.4856,74.3406); 
 
     var mapCanvas = document.getElementById("map"); 
 
     var mapOptions = {center: myCenter, zoom: 8}; 
 
     var map = new google.maps.Map(mapCanvas, mapOptions); 
 
     var marker = new google.maps.Marker({position:myCenter}); 
 
     marker.setMap(map); 
 

 
     var infowindow = new google.maps.InfoWindow({ 
 
     content: "Welcome to Ali Institute of Education" 
 
     }); 
 
     marker.addListener('click', function() { 
 
      infowindow.open(map, marker); 
 
     }); 
 
    
 
    google.maps.event.addDomListener (myMap); 
 
//google.maps.event.addDomListener (window, 'load', myMap); 
 
// if you use the window load myMap You don't need onload function on body tag 
 
    }

#map{ 
 
width: 800px; 
 
height: 400px; 
 
overflow:visible; 
 
}

<head> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
 
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> 
 
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&amp"></script> 
 
</head> 
 
<body onload="myMap()"> 
 
<div class="container-fluid"> 
 
    <div id="map"></div> 
 
</div> 
 
    </head>

источник

2017-01-09 10:59:48

сейчас я получаю эту ошибку: вы включили API Карт Google несколько раз на этой странице. Это может вызвать непредвиденные ошибки. common.js: 48 Uncaught RangeError: Максимальный размер стека вызовов Предупреждение API Карт Google: NoApiKeys –

Я добавил скрипт api key. Я не знаю, почему нет Api ключей ошибка –

@MuhammadSaadBhatti, какая ошибка ?? проверить API CDN https://maps.googleapis.com/maps/api/js?v=3.exp&hl=en&key=API_KEY» Замените api_key с вашим-х –

Google Map не работает после добавления API, отображающего серый квадрат

ответ

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