Google Maps API 3 действует странно

Question

Я хочу интегрировать API 3 Карт Google в веб-приложение, которое использует различные виды фреймворков JavaScript, например. JQuery, Highcharts, jPolite и т.д. Это код, который я использую

<!-- Map --> 
<div style="height: 450px;"> 
    <div id="map-canvas" style="width: 85%; height: 400px; float: left; margin-right: 10px;">  </div> 
</div> 

<script type="text/javascript"> 

jQuery(function() { 
var map; 

// 36.557372, 127.953339 
function initialize() { 
    var mapOptions = { 
     center: new google.maps.LatLng(36.557, 127.953), 
     zoom: 6, 
     mapTypeid: google.maps.MapTypeId.ROADMAP 
    }; 

    // Create a simple map. 
    map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); 

    var drawingManager = new google.maps.drawing.DrawingManager({ 
     drawingMode: google.maps.drawing.OverlayType.MARKER, 
     drawingControl: true, 
     drawingControlOptions: { 
      position: google.maps.ControlPosition.TOP_CENTER, 
      drawingModes: [ 
      google.maps.drawing.OverlayType.MARKER, 
      google.maps.drawing.OverlayType.CIRCLE, 
      google.maps.drawing.OverlayType.POLYGON, 
      google.maps.drawing.OverlayType.POLYLINE, 
      google.maps.drawing.OverlayType.RECTANGLE 
      ] 
     }, 
     polygonOptions: { 
      editable: true 
     } 
     }); 
     drawingManager.setMap(map); 

    google.maps.event.addListener(drawingManager, 'polygoncomplete', function(polygon) { 
     polygon.getPath().forEach(function(elem, index){ 
      var elemCoords = new Array(); 
      elemCoords.push(elem.lat()); 
      elemCoords.push(elem.lng()); 
     }); 
    }); 
} 

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

Само по себе это довольно простой кусок кода. Однако он интегрирован в более сложную структуру HTML (что может быть проблемой). Пройдя руководство по началу работы и просмотрев видео внизу, я подумал, что проблема заключается в высоте и ширине какого-либо элемента DOM вдоль иерархии. Однако после нескольких испытаний я увидел, что карта даже не загружается, т. Е. Div-map-canvas пуст. Это означает, что высота не является проблемой.

Я попытался открыть его разными браузерами (Firefox, Chrome, IE), и я ничего не вижу. Действительно странно то, что когда я открываю его с Firefox, который открывает панель инструментов разработчика, он загружается почти каждый раз?!?!

Также отображается карта, только когда я обновляю страницу с помощью Ctrl + F5 (игнорируя кеш). Только F5 ничего не показывает.

Я думаю, что это просто, что мне не хватает. Однако может быть некоторый конфликт с другими структурами, которые я не вижу.

Любая помощь приветствуется!

Answer 1

Решение заключается в том, чтобы загрузить API Карт Google асинхронно like this с функцией обратного вызова. Я предполагаю, что причиной этой проблемы было то, что каким-то образом API загружался до создания заполнителя div, и поэтому карте некуда было быть сохранено. Это могло быть из-за рамки jpolite или какой-либо другой структуры JavaScript, которая используется в проекте. В любом случае, я рад, что получил работу.

function loadScript() { 
    if (!(typeof google === 'object' && typeof google.maps === 'object')) { 
     var script = document.createElement('script'); 
     script.id = 'gmapsScript'; 
     script.type = 'text/javascript'; 
     script.src = 'https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=drawing,geometry&' + 
       'callback=initialize'; 
     document.body.appendChild(script); 
    } 
    else { 
     // do something when the API was already loaded 
    } 
}