5

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 SmartMap & 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 () {
   ...
});
  • Are you seeing smartmap/js/smartmap.js get loaded? Is it loading before, or after assets/js/app.min.js? – Lindsey D Oct 29 '16 at 3:43
  • Yep - it is after. I've updated my question to show what I see. – Damon Oct 29 '16 at 4:19
4

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.

| improve this answer | |
  • 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 Oct 29 '16 at 17:30
  • Nope, no difference at all. – Lindsey D Oct 30 '16 at 5:33
  • Wrapping my styles in $(function()... fixed it for me. Thanks! – Steven Thate Dec 5 '16 at 15:50

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.