Maximum Stack Size exceeding in clojurescript when using with Google Maps API

23 views
Skip to first unread message

Casey Sparrow

unread,
Jun 24, 2020, 2:35:14 AM6/24/20
to ClojureScript
I have the following function that loads the google maps api:

```
(defn load-google-maps-api []
                (js/console.log "script element is " script)


            (set! (.-defer script) true)
            (set! (.-async script) true)
            (set! (.-init-delivery-map js/window)
                  (fn []
                    (prn "setting delivery-map")
                    (reset! delivery-map
                          (js/google.maps.Map. (js/document.getElementById "delivery-map")
                                               {:center {:lat 37.0 :lng -122.0}}))))

            (.append (js/jQuery "head") script)

)

```

which I call when an event is triggered. However, the line ```(.append (js/jQuery "head") script)``` in conjunction with the line. (set! (.-src script) "https://maps.googleapis.com/maps/api/js?key=AIzaSyD1r7IEMfQzY&callback=init_delivery_map")

 ``````

cause the error:

```
Uncaught (in promise) RangeError: Maximum call stack size exceeded
    at Object.cljs$core$array_index_of [as array_index_of] (core.cljs:6592)
    at Object.cljs$core$array_map_index_of [as array_map_index_of] (core.cljs:6607)
    at ni.eval [as cljs$core$ILookup$_lookup$arity$3] (core.cljs:6892)
    at ni.eval [as get] (core.cljs:6822)
    at ni.streetView_changed (js?key=AIzaSyD1r7IwW4_MfQzY&callback=init_delivery_map&_=1592974955286:217)
    at $d (js?key=AIzaSyD1r_MfQzY&callback=init_delivery_map&_=1592974955286:63)
    at ni._.O.set (js?key=AIzaSyD1r7IEvvf6w8FlMfQzY&callback=init_delivery_map&_=1592974955286:181)
    at ni.streetView_changed (js?key=AIzaSyD1r7IEvMfQzY&callback=init_delivery_map&_=1592974955286:217)
    at $d (js?key=AIzaSyD1r7IEvvf6w8FlHu3k_hP_oJwW4_MfQzY&callback=init_delivery_map&_=1592974955286:63)
    at ni._.O.set (js?key=AI_MfQzY&callback=init_delivery_map&_=1592974955286:181)

```

Suggesting that the maximum call stack is less than what it should be. Because the javascript version of this code doesn't give this error and works:

```
function loadGoogleMapsApi() {
    var script = document.createElement('script');
    script.defer = true;
    script.async = true;

    window.initDeliveryMap = function() {
        console.log("init map");
        console.log("Element is ", document.getElementById("delivery-map"));
        deliveryMap = new google.maps.Map(document.getElementById("delivery-map"), {
            center: { lat: 37.7749, lng: -122.4194 },
            zoom: 8
        });
    };

    document.head.appendChild(script);

}


```

Thomas Heller

unread,
Jun 24, 2020, 6:58:09 AM6/24/20
to ClojureScript
You are passing a CLJS map into the js/google.maps.Map. call. Convert it via (clj->js {:center ...}) first or use the #js literal.
Reply all
Reply to author
Forward
0 new messages