2015-11-17 4 views
0

Новые плитки не загружаются при перетаскивании и отпускании. Вместо этого отображается только пустой фон. map after drag and release[1]Карты google не загружают новые плитки при перетаскивании

Увеличение или уменьшение будет загрузить новую карту. Я загрузка текущей версии: http://maps.google.com/maps/api/js

<style type="text/css"> .single_map_canvas img { max-width: none; } </style> 
<div class="single_map_canvas" id="single_map" style="height: 225px; width: 450px;"></div> 

    <script type="text/javascript"> 
     function initialize() { 
      var singleLatlng = new google.maps.LatLng(37.5364,-122.2455); 
      var mapOptions = { 
      zoom: 12, 
      center: singleLatlng, 
      draggable: true 
      } 
      var map = new google.maps.Map(document.getElementById('single_map'), mapOptions); 

      var marker = new google.maps.Marker({ 
       position: singleLatlng, 
       map: map 
      }); 
     } 

     google.maps.event.addDomListener(window, 'load', initialize); 
    </script> 

UPDATE: Это должно быть внутри <head> тега.

<style type="text/css"> .single_map_canvas img { max-width: none; } </style> 
+1

[посланной код работает для меня] (HTTP: // jsfiddle.net/geocodezip/tepcmmnq/) – geocodezip

+0

У меня была такая же проблема. Добавление div img {max-width: none;} устраняет проблему. –

ответ

0

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
<!--  <title>Simple Map</title> 
 
    <meta name="viewport" content="initial-scale=1.0"> 
 
    <meta charset="utf-8"> 
 
    <style> 
 
    html, 
 
    body { 
 
     height: 100%; 
 
     margin: 0; 
 
     padding: 0; 
 
    } 
 
    
 
    </style> 
 
--> 
 
    <style type="text/css"> .single_map_canvas img { max-width: none; } </style> 
 
</head> 
 

 
<body> 
 
    <div class="single_map_canvas" id="single_map" style="height: 225px;width:450px;"></div> 
 
    
 
    <script> 
 
    var map; 
 

 
    function initMap() { 
 
     var singleLatlng = new google.maps.LatLng(37.5364, -122.2455); 
 
     map = new google.maps.Map(document.getElementById('single_map'), { 
 
      center: singleLatlng, 
 
      zoom: 8 
 
     }); 
 

 
     var marker = new google.maps.Marker({ 
 
      position: singleLatlng, 
 
      map: map 
 
     }); 
 
    } 
 
    </script> 
 
    <script src="https://maps.googleapis.com/maps/api/js?callback=initMap" async defer></script> 
 
</body> 
 

 
</html>

надеюсь, что это помогает

скорее всего, ур сеть работает медленно, я предполагаю

+0

Спасибо за этот пример. Это работало. Моя проблема заключалась в том, что css для .single_map_canvas не был введен в главный тег. – shanebp

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