Googleマップはローカルに表示されますが、公開時に表示されません

Question

データベースからのpgクエリに基づいて動的に設定されたカスタムマーカーで大陸の私たちを中心にしてズームするウェブアプリがあります。ローカルにマップが表示されていますが、サーバーに公開した後ではありません。私はAPIキーを持っており、Google開発コンソールのアクセス許可を確認しています。ここで

はjavascriptのです：

function initMap() { 

    var map = new google.maps.Map(document.getElementById('map'), { 
     zoom: 5, 
     center: {lat: 39.350033, lng: -94.6500523} 
    }); 

    // Do not actually need labels for our purposes, but the site_id is best if they are required. 
    var labels = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ'; 



    // Add some markers to the map. 
var xhr = new XMLHttpRequest(); 
xhr.onreadystatechange = function() { 

if (xhr.readyState == 4) { 
    var arr = JSON.parse(xhr.responseText); 
    console.log(xhr.responseText); 
    if(Array.isArray(arr)){ 
     showMarkers(arr); 
    } 
} 
} 
xhr.open('GET', 'markers.php', true); 
xhr.send(); 

function showMarkers(locations){ 
var markers = locations.map(function(location, i) { 
    return new google.maps.Marker({ 
    position: location, 
    label: labels[i % labels.length] 
    }); 
}); 

var markerCluster = new MarkerClusterer(map, markers, {imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png'}); 
} 
    } 

私はここで.rightmediasolutions.com/

にAPIキーの制限を設定し、公開するHTMLへのリンクです：http://www.rightmediasolutions.com/gs_chrome/map.html

Answer 1

いくつかの調査をしました...マップが完全に初期化されるためには、リンクされたスタイルシートではなく、高さと幅のスタイルをインラインにする必要があります。