Modernizr is not defined

Question

I've included the Modernizr Touch Events detection to my project (only left the rest out to keep it light as possible).

I use it to set different Google Maps JS options as following:

<script>
  function initMap() {
    var myLatLng = {lat: 52.022322, lng: 4.209055};
    if( Modernizr.touchevents ) {
        var map = new google.maps.Map(document.getElementById('map'), {
            zoom: 15,
            disableDefaultUI: false,
            center: myLatLng,
            scrollwheel: true,
            draggable: false,
        });

    } else {
        var map = new google.maps.Map(document.getElementById('map'), {
            zoom: 15,
            disableDefaultUI: false,
            center: myLatLng,
            scrollwheel: false,
            draggable: true,
        });
    }

    var marker = new google.maps.Marker({
        position: myLatLng,
        map: map,
        title: 'Duijnisveld Kasconstructies',
    });
  }
</script>

I've included this script in my page-contact.php file which displays the contact page on my Wordpress project.

Whenever I view the page I see no map and note the following error in my console: (index):235 Uncaught ReferenceError: Modernizr is not defined

What am I missing here?

Thanks guys!

Answer 1

You are calling Modernizr before theme-min.js which is where you are defining it.

You should move your code below this line.

<script type="text/javascript" src="http://duijnisveld.wpengine.com/wp-content/themes/duijnisveld-kascontructies/scripts/min/theme-min.js?ver=4.5.3"></script>