Luminus ReagentページにGoogleマップを追加しますか？

Question

Luminusアプリケーションにgoogle mapsコンポーネントを含むページを追加したいのですが、これを行う方法がわかりません。私はReagent google maps guideに従おうとしましたが、マップは表示されません。私は強く、これはscriptタグを追加するための正しい方法ではないと思われる

(ns test.maps 
    (:require [reagent.core :as r])) 

(defn home-render [] 
    [:div {:style {:height "300px"}}]) 

(defn home-did-mount [this] 
    (let [map-canvas (r/dom-node this) 
     map-options (clj->js {"center" (google.maps.LatLng. -34.397, 150.644) 
           "zoom" 8})] 
    (js/google.maps.Map. map-canvas map-options))) 

(defn map-page [] 
    [:script {:type "text/javascript" :src "https://maps.googleapis.com/maps/api/js?key=<mykey>"}] 
    [:div.container 
    [:div.row 
    [:div.col-md-12 
    (r/create-class {:reagent-render  home-render 
         :component-did-mount home-did-mount})]]]) 

：

これは私が試したClojurescriptコードです。

私の質問は、LumiusアプリケーションにGoogle Mapsコンポーネントを追加する方法です。

Answer 1

あなたがリンクしたReagent exampleのように、[:script {:type "text/javascript" :src "https://maps.googleapis.com/maps/api/js?key=<mykey>"}]を静的なHTMLページに移動してください。

ブラウザのデベロッパーコンソールを調べると、おそらくapp.js:337 Uncaught ReferenceError: google is not definedになります。

スクリプトタグをReagentコンポーネントに配置するのは悪い考えです。これらのタグは動的であり、スクリプトがページの寿命を通して何度も読み込まれる可能性があるからです。また、ページが初めてレンダリングされたときにスクリプトを直接ロードしたいとします。