Skip to content

Instantly share code, notes, and snippets.

Last active February 13, 2019 12:00
What would you like to do?
Google Map component, with reagent and reframe. Questions asked on Clojurians #re-frame's channel.
; Following code is WRONG, see comments for details.
(defn google-map []
(let [pos (subscribe [:current-position])]
(fn []
[:h4 "Map"]
[:div#map-canvas {:style {:height "400px"}}]])
(fn []
(let [map-canvas (.getElementById js/document "map-canvas")
map-options (clj->js {"zoom" 9})
gmap (js/google.maps.Map. map-canvas map-options)
marker (js/google.maps.Marker. (clj->js {:map gmap :title "Drone"}))]
(let [latlng (js/google.maps.LatLng. (:latitude @pos) (:longitude @pos))]
(.setPosition marker latlng)
(.panTo gmap latlng)))))})))
; Another attempt, using props and lifecycle to udpate marker position
(defn gmap-component []
(let [gmap (atom nil)
options (clj->js {"zoom" 9})
update (fn [comp]
(let [{:keys [latitude longitude]} (reagent/props comp)
latlng (js/google.maps.LatLng. latitude longitude)]
(.setPosition (:marker @gmap) latlng)
(.panTo (:map @gmap) latlng)))]
{:reagent-render (fn []
[:h4 "Map"]
[:div#map-canvas {:style {:height "400px"}}]])
:component-did-mount (fn [comp]
(let [canvas (.getElementById js/document "map-canvas")
gm (js/google.maps.Map. canvas options)
marker (js/google.maps.Marker. (clj->js {:map gm :title "Drone"}))]
(reset! gmap {:map gm :marker marker}))
(update comp))
:component-did-update update
:display-name "gmap-component"})))
(defn gmap-wrapper []
(let [pos (subscribe [:current-position])]
(fn []
[gmap-component @pos])))
Copy link

When using this I have found it important to run :component-will-unmount to dispose of the stateful component

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment