Добавление карты Google Maps на страницу Luminus Reagent?

Question

Я хотел бы добавить страницу, содержащую компонент Google Maps, в мое приложение Luminus, но я не могу понять, как это сделать. Я попытался следовать за Reagent google maps guide, но карта не будет отображаться.

Это код Clojurescript, что я пробовал:

(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})]]]) 

Я сильно подозреваю, что это не правильный путь, чтобы добавить теги script.

Итак, мой вопрос: как добавить компонент Google Maps в приложение Lumius?

Answer 1

Переместить [:script {:type "text/javascript" :src "https://maps.googleapis.com/maps/api/js?key=<mykey>"}] на статическую страницу html, например, в Reagent example, к которому вы привязались.

Если вы заглянете в консоль разработчика своего браузера, вы, вероятно, получите app.js:337 Uncaught ReferenceError: google is not defined.

Размещение тегов сценариев в компонентах Reagent является плохой идеей, поскольку эти теги динамические и могут привести к загрузке сценария несколько раз за всю жизнь страницы. Также вы хотите загрузить скрипт непосредственно, когда страница отображается в первый раз.