フレームワーク7のマップ

Question

フレームワーク7でマップをロードしようとしていますが、それを行うことができません。私が得ているエラーは、Googleは未定です。以下は

は私のコード、HTMLコード

<div id="map" style="height:400px; width:1200px;"></div> 

<script src="https://maps.googleapis.com/maps/api/js?key= AIzaSyAWzZ-1BPmaWKFT0du3cis82mj9Y5ljIgk&callback=initMap" async defer></script> 

ページにマップをロードしないのJavaScriptコード

CascadingApp.onPageInit('admin', function(page) { 
    initialize(); 
}); 

function initialize() { 
    var map = null; 
    var latlng; 
    latlng = new google.maps.LatLng(37.4419, -122.1419); 
    var options = { 
     zoom: 13, 
     center: latlng, 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    } 
    var map = new google.maps.Map(document.getElementById("map"), options); 
} 

です。

Answer 1

index.htmlファイルにgoogle apiスクリプト<script src="https://maps.googleapis.com/maps/api/js?key= AIzaSyAWzZ-1BPmaWKFT0du3cis82mj9Y5ljIgk&callback=initMap" async defer></script>を追加してください。現在、apiはadmin.htmlテンプレートです。したがって、 管理ビューがロードされているときには、 CascadingApp.onPageInit('admin', function(page) {initialize();}); Google apiは完全にロードされていない、つまり非同期動作ではなく、エラーGoogleが定義されていません。あなたのindex.htmlページの残りの部分にgoogle apiを置くだけで問題ありません。 あなたのお役に立てば幸いです！

Answer 2

コールバック機能を使わずにindex.htmlのBUTの下にGoogleスクリプトを追加しました。

<script async defer 
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"> 
</script> 

次に、私のapp.jsスクリプトで、グローバルなどの可変マップを宣言し、エル・ページが完全にロードされたときにマップを初期化するには、次の関数を作成します。

$$(window).on('load', function(e) { initMap(); });

は初期化の定義同じapp.js内の関数を使用して、div（幅と高さは少なくとも）をマップするスタイルを設定することを忘れないでください。

参考になりまし希望は、Googleマップ、コールバック関数