Clojurescript: Problems calling Google Maps API

StackOverflow https://stackoverflow.com/questions/20468696

Question

Trying to replicate Google's "Hello World" for Google Maps. Here is my cljs code:

(ns myapp.core)

(def *map* nil)
(def my-opts
   {"zoom"      8
    "mapTypeId" google.maps.MapTypeId.ROADMAP
    "center"    (google.maps.LatLng. -34.397, 150.644)})

(defn map-load []
  (let [elem (.getElementById js/document "map-canvas")]
     (set! *map* (google.maps.Map. elem my-opts))))

(google.maps.event.addDomListener js/window "load" map-load)

And the HTML:

 <!DOCTYPE html>
 <html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <style type="text/css">
      html { height: 100% }
      body { height: 100%; margin: 0; padding: 0 }
      #map-canvas { height: 100% }
    </style>
  </head>
  <body>
    <div id="map-canvas" />

    <script type="text/javascript"
      src="https://maps.googleapis.com/maps/api/js?sensor=false">
    </script>
    <script src="myapp.js" type="text/javascript"></script>
    <script type="text/javascript">goog.require("myapp.core");</script>
  </body>
</html>

This yields a blank, slightly brownish screen and no errors. But no map displays.

Here is the Google Hello World code, which works fine. I cannot figure out the difference between the two.

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <style type="text/css">
      html { height: 100% }
      body { height: 100%; margin: 0; padding: 0 }
      #map-canvas { height: 100% }
    </style>
  </head>
  <body>
    <div id="map-canvas"/>

    <script type="text/javascript"
      src="https://maps.googleapis.com/maps/api/js?sensor=false">
    </script>
    <script type="text/javascript">
      function initialize() {
        var mapOptions = {
          center: new google.maps.LatLng(-34.397, 150.644),
          zoom: 8
        };
        var map = new google.maps.Map(document.getElementById("map-canvas"),
            mapOptions);
      }
      google.maps.event.addDomListener(window, 'load', initialize);
    </script>

  </body>
 </html>
Was it helpful?

Solution

as you can see in Himera, when you need interoperability you have to perform some translations between js and clj, through js->clj or clj->js functions 

;; ClojureScript records aren't exactly 
;; compatible with pure JavaScript
;;
;; Enhance JavaScript objects to ClojureScript 
;; records for additional capabilities.
;;
;; Then do something on each element.
;;
;; Then convert back to plain JavaScript.

(defn get-names [people]
  (let [people (js->clj people)
        names (map "name" people)]
    (clj->js names)))

Then, you only have to change this line 

(set! *map* (google.maps.Map. elem my-opts))

for this other

(set! *map* (google.maps.Map. elem (clj->js my-opts)))

And I've found out an interesting project about cljs and gmaps maybe it helps you

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top