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

<p>Try loading your JS using the <a href="https://craftcms.com/docs/templating/includejsfile" rel="nofollow">includeJsFile</a> tag... I believe that should place it in the correct position.</p>

<pre><code>{% includeJsFile "/assets/js/app.min.js" %}
</code></pre>

<p>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...</p>

<pre class="lang-js prettyprint-override"><code>$(function () {
    // Your code goes here
});
</code></pre>

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

CC BY-SA 3.0
2016-10-29T17:30:19.270Z
Interesting. I knew the problem was my stuff was rolling before smartMap was loading. Out of curiosity, is there a difference between loading the js via  twig like above or the "normal" way?
Damon
CC BY-SA 3.0
2016-10-30T05:33:08.300Z
Nope, no difference at all.
Lindsey D
CC BY-SA 3.0
2016-12-05T15:50:07.377Z
Wrapping my styles in `$(function()...` fixed it for me. Thanks!
Steven Thate
CC BY-SA 3.0
2016-10-29T04:46:01.187Z
2016-10-29T04:46:01.187Z
Lindsey D
<p>Well, I know for a fact I am doing this incorrectly &amp; it's going to be painfully obvious. I can see why (I think) but to be honest I just don’t “get it”.</p>
<p>I’m trying to style a Google map using Smart Map &amp; JavaScript, but keep getting the JS error:</p>
<pre><code>Uncaught ReferenceError: smartMap is not defined(…)
</code></pre>
<p>This is what my template looks like:</p>
<pre><code>{# Google Map of location. #}
{% set options = {
    height: 500,
    width: '100%',
    zoom: 15,
    markerOptions: {
    },
    infoWindowOptions: {
        maxWidth: 200
    }
} %}

    &lt;div id=&quot;mapCanvas&quot;&gt;
        {{ craft.smartMap.map(product.address, options) }}
    &lt;/div&gt;


    &lt;script src=&quot;/assets/js/app.min.js&quot;&gt;&lt;/script&gt;
&lt;/body&gt;
</code></pre>
<p>Within <code>app.min.js</code> I am doing this:</p>
<pre><code>if ($('#mapCanvas').length) {
    var styles = [{
        &quot;featureType&quot;: &quot;all&quot;,
        &quot;elementType&quot;: &quot;geometry&quot;,
        &quot;stylers&quot;: [{&quot;visibility&quot;: &quot;simplified&quot;}, {&quot;hue&quot;: &quot;#ff7700&quot;}]
    },

    ...

    smartMap.map['smartmap-mapcanvas-1'].setOptions({styles: styles});
}
</code></pre>
<p>I've been reading <a href="https://craftcms.stackexchange.com/questions/1886/how-do-you-auto-zoom-center-smartmap-with-multiple-markers">this post</a> which literally has the answer to my problem I believe. I just don't understand how to tell the system where/what <code>smartMap</code> is.</p>
<p>Thank you for any suggestions!</p>
<p><strong>EDIT</strong></p>
<p>Here is what the rendered page looks like:</p>
<pre><code>&lt;script src=&quot;/assets/js/app.min.js&quot;&gt;&lt;/script&gt;
&lt;script type=&quot;text/javascript&quot; src=&quot;https://maps.googleapis.com/maps/api/js&quot;&gt;&lt;/script&gt;
&lt;script type=&quot;text/javascript&quot; src=&quot;http://mysite.dev/cpresources/smartmap/js/smartmap.js?d=1449217510&quot;&gt;&lt;/script&gt;
</code></pre>
<p><strong>EDIT 2</strong></p>
<p>Just for future reference in case someone else comes across this thread. It ended up being the way I was initializing my js file.</p>
<pre><code>// This executes before we're ready
(function () {
    'use strict';
    ...

})();


// This works
$(function () {
   ...
});
</code></pre>

CC BY-SA 3.0
2016-10-29T03:43:03.223Z
Are you seeing `smartmap/js/smartmap.js` get loaded? Is it loading before, or after `assets/js/app.min.js`?
Lindsey D
CC BY-SA 3.0
2016-10-29T04:19:55.320Z
Yep - it is after. I've updated my question to show what I see.
Damon
<plugins><plugin-smartmap>
How do I talk to Smart Map in JavaScript?
# How do I talk to Smart Map in JavaScript?

(Asked by: username_0 on 2016-10-29)

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
    }
} %}

    
        {{ craft.smartMap.map(product.address, options) }}
    


    


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:




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 () {
   ...
});

**Tags:** plugins, plugin-smartmap

> **Comments:**
> **username_1**: Are you seeing `smartmap/js/smartmap.js` get loaded? Is it loading before, or after `assets/js/app.min.js`?  
> **username_0**: Yep - it is after. I've updated my question to show what I see.  

---

## 1 answers

### Answer by username_1 on 2016-10-29. Score: 4 | Accepted answer

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.

> **Comments:**
> **username_0**: Interesting. I knew the problem was my stuff was rolling before smartMap was loading. Out of curiosity, is there a difference between loading the js via  twig like above or the "normal" way?  
> **username_1**: Nope, no difference at all.  
> **username_2**: Wrapping my styles in `$(function()...` fixed it for me. Thanks!  

---

