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

Question

Я работал ранее с картами, и я никогда не сталкивался с проблемой, когда карта вообще не отображается.

Вот скрипка с моей реализацией коды, включая запрос в библиотеку места API

http://jsfiddle.net/Newtt/Ljn1n6nh/

Вот мой пример кода:

JS:

function initialize() { 
    var elem = document.getElementById('map-dire'); 
    var map = new google.maps.Map(elem, { 
     mapTypeId: google.maps.MapTypeId.ROADMAP, 
    }); 
} 
google.maps.event.addDomListener(window, 'load', initialize()); 

Это самая простая форма карты, но он всегда отображает серое/бежевое поле, и если я нажимаю в любом месте, он говорит Uncaught TypeError: Cannot read property 'x' of undefined. Я понимаю, что эта ошибка показывает, когда элемент DOM для карты не загружен. Но не запускается ли карта только при загрузке элемента window?

Answer 1

**center and zoom are Required.** 

Попробуйте отправить широту и долготу динамически, я даю жестко закодированные значения для справки

function initialize() { 
    var elem = document.getElementById('map-dire'); 
    var mapOptions = { 
      center: { lat: -34.397, lng: 150.644}, 
      zoom: 8 
     }; 

    var map = new google.maps.Map(elem, mapOptions); 
    map.setMapTypeId(google.maps.MapTypeId.ROADMAP); 
} 
google.maps.event.addDomListener(window, 'load', initialize()); 

Отредактированный jsfiddle также работает, если вы даете увеличение собственности как

function initialize() { 
    var elem = document.getElementById('map-dire'); 
    var map = new google.maps.Map(elem, { 
     mapTypeId: google.maps.MapTypeId.ROADMAP, 
     center: { lat: -34.397, lng: 150.644},zoom: 8 
    }); 
} 
google.maps.event.addDomListener(window, 'load', initialize()); 

Answer 2

Там 2 требуется (обязательно) MapOptions

• Центр LatLng Первоначальный центр карты. Обязательно.
• zoom номер Первоначальный уровень масштабирования карты. Обязательно.

Если вы не предоставите их, то Вам необходимо позвонить map.setCenter() и map.setZoom(), map.fitBounds() [который вычисляет и], используйте KmlLayer с preserveViewport установлен в ложь [который также вычисляет обе] или какую-либо другую операцию, из-за чего они оба устанавливаются (так что карта будет инициализирована).

фрагмент кода, который вызывает map.setCenter() и map.setZoom():

function initialize() { 
 
    var elem = document.getElementById('map-dire'); 
 
    var map = new google.maps.Map(elem, { 
 
    mapTypeId: google.maps.MapTypeId.ROADMAP, 
 
    }); 
 
    map.setCenter({lat: 0,lng: 0}); 
 
    map.setZoom(2); 
 
} 
 
google.maps.event.addDomListener(window, 'load', initialize());

#map-dire { 
 
    height: 450px; 
 
}

<script src="https://maps.googleapis.com/maps/api/js?libraries=places"></script> 
 
<div class="modal-body"> 
 
    <div class="row"> 
 
    <div class="col-lg-4"> 
 
     <div class="search-box"> 
 
     <input id="search-places" class="jr-input" focusdir search-box placeholder="Enter location"> 
 
     <div id="directions-panel" class="directions-panel"> 
 

 
     </div> 
 
     </div> 
 
    </div> 
 
    <div class="col-lg-8"> 
 
     <div id="map-dire"> 
 

 
     </div> 
 
    </div> 
 

 
    </div> 
 
</div>

фрагмент кода, который устанавливает center и zoom:

function initialize() { 
 
    var elem = document.getElementById('map-dire'); 
 
    var map = new google.maps.Map(elem, { 
 
    mapTypeId: google.maps.MapTypeId.ROADMAP, 
 
    center: {lat: 0,lng: 0}, 
 
    zoom: 2 
 
    }); 
 
} 
 
google.maps.event.addDomListener(window, 'load', initialize());

#map-dire { 
 
    height: 450px; 
 
}

<script src="https://maps.googleapis.com/maps/api/js?libraries=places"></script> 
 
<div class="modal-body"> 
 
    <div class="row"> 
 
    <div class="col-lg-4"> 
 
     <div class="search-box"> 
 
     <input id="search-places" class="jr-input" focusdir search-box placeholder="Enter location"> 
 
     <div id="directions-panel" class="directions-panel"> 
 

 
     </div> 
 
     </div> 
 
    </div> 
 
    <div class="col-lg-8"> 
 
     <div id="map-dire"> 
 

 
     </div> 
 
    </div> 
 

 
    </div> 
 
</div>