Google Maps APIがポップアップしない

Question

私はウェブサイトを持っています：terpconnect.umd.edu/~ybencheqと私は基本的に私のページの一番下にGoogle Mapsをフィーチャーしたかったのです。私はAPIキーを生成し、それをキーパラメータに渡しました。私の資格情報のURLは、https://terpconnect.umd.edu/~ybencheq/,https://www.terpconnect.umd.edu/~ybencheq/,.terpconnect.umd.edu/です。これらのどれも動作しません。私はRefererNotAllowedMapErrorを取得し、時には私のコンソールにエラーが出ないこともあります。ページのその部分では空白になります）。

は、ここで私が持っているものです。

<!-- Add Google Maps --> 
<script> 

function myMap() 
{ 
    myCenter=new google.maps.LatLng(38.9869, 76.9426); 
    var mapOptions= { 
    center:myCenter, 
    zoom:12, scrollwheel: false, draggable: false, 
    mapTypeId:google.maps.MapTypeId.ROADMAP 
}; 
var map=new google.maps.Map(document.getElementById("googleMap"),mapOptions); 

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

そして：

<script src="https://maps.googleapis.com/maps/api/js?key=[insertkeyhere]" 
type="text/javascript"></script> 

Answer 1

は、あなたがどこかmyMap関数を呼び出す必要があります。どちらかのonloadそれを呼び出す：

<script async defer src="https://maps.googleapis.com/maps/api/js?callback=myMap&key=[insertkeyhere]" type="text/javascript"></script> 

（両方ではない）

proof of concept fiddle

コードスニペット：

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

やバックAPI負荷の呼び出しで

function myMap() { 
 
    myCenter = new google.maps.LatLng(38.9869, 76.9426); 
 
    var mapOptions = { 
 
    center: myCenter, 
 
    zoom: 12, 
 
    scrollwheel: false, 
 
    draggable: false, 
 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
 
    }; 
 
    var map = new google.maps.Map(document.getElementById("googleMap"), mapOptions); 
 

 
    var marker = new google.maps.Marker({ 
 
    position: myCenter, 
 
    }); 
 
    marker.setMap(map); 
 
} 
 
google.maps.event.addDomListener(window, "load", myMap);

html, 
 
body, 
 
#googleMap { 
 
    height: 100%; 
 
    width: 100%; 
 
    margin: 0px; 
 
    padding: 0px 
 
}

<script src="https://maps.googleapis.com/maps/api/js"></script> 
 
<div id="googleMap"></div>