How do I talk to Smart Map in JavaScript?

Question

Well, I know for a fact I am doing this incorrectly & it's going to be painfully obvious. I can see why (I think) but to be honest I just don’t “get it”.

I’m trying to style a Google map using Smart Map & JavaScript, but keep getting the JS error:

Uncaught ReferenceError: smartMap is not defined(…)

This is what my template looks like:

{# Google Map of location. #}
{% set options = {
    height: 500,
    width: '100%',
    zoom: 15,
    markerOptions: {
    },
    infoWindowOptions: {
        maxWidth: 200
    }
} %}
<div id="mapCanvas">
    {{ craft.smartMap.map(product.address, options) }}
</div>


<script src="/assets/js/app.min.js"></script>

</body>

Within app.min.js I am doing this:

if ($('#mapCanvas').length) {
    var styles = [{
        "featureType": "all",
        "elementType": "geometry",
        "stylers": [{"visibility": "simplified"}, {"hue": "#ff7700"}]
    },
...

smartMap.map['smartmap-mapcanvas-1'].setOptions({styles: styles});

}

I've been reading this post which literally has the answer to my problem I believe. I just don't understand how to tell the system where/what smartMap is.

Thank you for any suggestions!

EDIT

Here is what the rendered page looks like:

<script src="/assets/js/app.min.js"></script>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js"></script>
<script type="text/javascript" src="http://mysite.dev/cpresources/smartmap/js/smartmap.js?d=1449217510"></script>

EDIT 2

Just for future reference in case someone else comes across this thread. It ended up being the way I was initializing my js file.

// This executes before we're ready
(function () {
    'use strict';
    ...
})();
// This works
$(function () {
   ...
});

Answer 1

I'd recommend loading your JS file after the smartmap.js file has been loaded. The smartMap JS object needs to exist before your code gets run.

Try loading your JS using the includeJsFile tag... I believe that should place it in the correct position.

{% includeJsFile "/assets/js/app.min.js" %}

If that doesn't work, then you may need to wrap your code in something that would prevent it from running until the page is fully loaded...

$(function () {
    // Your code goes here
});

^ That example uses jQuery. The same can be achieved without jQuery, if you're not using it.