Google Map component, with reagent and reframe. Questions asked on Clojurians #re-frame's channel.

August 17, 2015 ยท View on GitHub

; Following code is WRONG, see comments for details. (defn google-map [] (let [pos (subscribe [:current-position])]

(reagent/create-class
  {:reagent-render 
   (fn []
     [:div
      [:h4 "Map"]
      [:div#map-canvas {:style {:height "400px"}}]])

   :component-did-mount
   (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"}))]

       (reagent.ratom/run!
         (let [latlng (js/google.maps.LatLng. (:latitude @pos) (:longitude @pos))]
           (.setPosition marker latlng)
           (.panTo gmap latlng)))))})))