2016-11-13 7 views
0

都市のlong/latパラメータを返すクエリがあり、テンプレートにマップを表示したいと思います。 Googleの説明から、javascriptコードを貼り付ける場所を理解できません。Google Maps APIをdjangoテンプレートに統合

私の代わりに次の操作を行うことを進ん:

javascript.htmlテンプレート でAPIキーでスクリプトを貼り付け(base.htmlから延長)HTMLテンプレート
  • でマップのdivを作成し
    1. は静的フォルダにmap.jsファイルに

    をJavaScriptのスクリプトを追加しましたコンソールが表示さ:「initMapは関数ではありません」 誰でも助けることができますか?

  • 答えて

    0

    ボディエレメントを閉じてこのコンテンツのすべてのjsファイル/コードをロードする直前にフッターと呼ばれるブロックをbase.htmlに定義することをお勧めします。

    base.html

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
    <html> 
        <head> </head> 
        <body> 
        {% block footercontent %} 
        {% endblock %} 
        </body> 
    </html> 
    

    yourtemplate.html

    {% extends "base.html" %} 
    {% block footercontent %} 
         <script src="myscripts.js"></script> 
    {% endblock %} 
    
    0

    あなたはおそらくマニュアルの例のスクリプトタグ、コンソール手段に示すエラーをコピーするようなので、私が見えますthersにはinitMapという名前の関数はありません。スクリプトタグsrcの末尾に、&callback=initMapがあります。ここで、initMapは、Googleマップのjsファイルを使用できる状態にするときに呼び出す関数の名前です。

    javascript.htmlテンプレートの静的フォルダのmap.jsをインポートしないでください。

    プロヒント:

    <script async defer 
    src="https://maps.googleapis.com/maps/api/js?v=3 
        &key=YOUR_API_KEY&callback=initMap"> 
    
    :そう( more info)のように、GoogleマップのAPIの安定したバージョンを持っている v=3引数を使用します