Answers.Body: <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>
  
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2016-10-29T17:30:19.270Z
Answers.Text: 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?
Answers.UserDisplayName: Damon
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2016-10-30T05:33:08.300Z
Answers.Text: Nope, no difference at all.
Answers.UserDisplayName: Lindsey D
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2016-12-05T15:50:07.377Z
Answers.Text: Wrapping my styles in `$(function()...` fixed it for me. Thanks!
Answers.UserDisplayName: Steven Thate
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2016-10-29T04:46:01.187Z
Answers.LastActivityDate: 2016-10-29T04:46:01.187Z
Answers.UserDisplayName: Lindsey D
Body: <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>
  
Comments.ContentLicense: CC BY-SA 3.0
Comments.CreationDate: 2016-10-29T03:43:03.223Z
Comments.Text: Are you seeing `smartmap/js/smartmap.js` get loaded? Is it loading before, or after `assets/js/app.min.js`?
Comments.UserDisplayName: Lindsey D
Comments.ContentLicense: CC BY-SA 3.0
Comments.CreationDate: 2016-10-29T04:19:55.320Z
Comments.Text: Yep - it is after. I've updated my question to show what I see.
Comments.UserDisplayName: Damon
Tags: <plugins><plugin-smartmap>
Title: How do I talk to Smart Map in JavaScript?
ThreadText: # 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
      }
  } %}
  
      <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](https://craftcms.stackexchange.com/questions/1886/how-do-you-auto-zoom-center-smartmap-with-multiple-markers) 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 () {
     ...
  });
  
  ```
  
  **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](https://craftcms.com/docs/templating/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...
  
  ```js
  $(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!  
  
  ---
  
  