Search code examples
google-mapsclojureclojurescriptreagentluminus

Adding Google Maps to Luminus Reagent page?

I'd like to add a page containing a google maps component to my Luminus application but I can't figure out how to do this. I've tried to follow the Reagent google maps guide but the map won't show.

This is the Clojurescript code that I've tried:

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

I strongly suspect that this is not the right way to add script tags.

So my question is how do I add a Google Maps component to my Lumius application?

Solution

  • Move [:script {:type "text/javascript" :src "https://maps.googleapis.com/maps/api/js?key=<mykey>"}] to the static html page, like in the Reagent example you linked to.

    If you look into the developer console of your browser, you are probably getting app.js:337 Uncaught ReferenceError: google is not defined.

    Placing script tags in Reagent components is a bad idea because those tags dynamic and could cause the script to be loaded several times through the lifetime of the page. Also you want to load the script directly when the page is rendered for the first time.