Kathryn Crawford Kathryn Crawford - 2 months ago 17
jQuery Question

Javascript function at global scope

I'm trying to load the google maps js api on a wordpress site, and I just keep getting an "initMap is not a function" error. I figure I probably am writing my code wrong, I adapted it from a standalone page, so perhaps working it in to wordpress messed things up. I was having an issue with the JS files not loading in the correct order, but now my JS loads before Google Maps, so that wouldn't be the issue. It must be something wrong with the initMap function. This is the function that is causing the error. I thought I had passed it to a global scope, but I'm not sure I did it correctly.

Api key call

wp_enqueue_script( 'google-maps-js', 'https://maps.googleapis.com/maps/api/js?v=3&key=###key###&callback=initMap', array(), '20151215', true );


Function in the js file

jQuery(function($) {
window.initMap = function() {

// Disallow drag on mobile
var isDraggable = $(document).width() > 480 ? true : false;

map = new google.maps.Map(document.getElementById('map'), {
scrollwheel: false,
draggable: isDraggable,
streetViewControl: false,
styles: [{"featureType":"administrative","elementType":"labels.text","stylers":[{"visibility":"off"}]},{"featureType":"administrative","elementType":"labels.text.fill","stylers":[{"color":"#444444"}]},{"featureType":"landscape","elementType":"all","stylers":[{"color":"#f2f2f2"}]},{"featureType":"poi","elementType":"all","stylers":[{"visibility":"off"}]},{"featureType":"road","elementType":"all","stylers":[{"saturation":-100},{"lightness":45}]},{"featureType":"road","elementType":"labels","stylers":[{"visibility":"off"}]},{"featureType":"road.highway","elementType":"all","stylers":[{"visibility":"simplified"}]},{"featureType":"road.highway","elementType":"geometry.fill","stylers":[{"visibility":"on"},{"color":"#1764c0"}]},{"featureType":"road.highway","elementType":"geometry.stroke","stylers":[{"visibility":"on"},{"color":"#1764c0"}]},{"featureType":"road.highway","elementType":"labels","stylers":[{"visibility":"off"}]},{"featureType":"road.arterial","elementType":"geometry.fill","stylers":[{"visibility":"on"},{"color":"#2fa000"}]},{"featureType":"road.arterial","elementType":"geometry.stroke","stylers":[{"color":"#2fa000"},{"visibility":"simplified"}]},{"featureType":"road.arterial","elementType":"labels.icon","stylers":[{"visibility":"off"}]},{"featureType":"road.local","elementType":"geometry.fill","stylers":[{"color":"#2fa000"}]},{"featureType":"road.local","elementType":"geometry.stroke","stylers":[{"visibility":"on"},{"color":"#2fa000"}]},{"featureType":"transit","elementType":"all","stylers":[{"visibility":"off"}]},{"featureType":"water","elementType":"all","stylers":[{"color":"#46bcec"},{"visibility":"on"}]}]
});

// Center map in between California LatLng(36.778261, -119.417932) and New York LatLng(40.712784, -74.005941)
map.fitBounds(new google.maps.LatLngBounds(new google.maps.LatLng(36.778261, -119.417932), new google.maps.LatLng(40.712784, -74.005941)))
};
});

Answer

try move you initMap function outside the jquery init

<script>
    function initMap() {

        // Disallow drag on mobile
        var isDraggable = $(document).width() > 480 ? true : false;

      map = new google.maps.Map(document.getElementById('map'), {
        scrollwheel: false,
        draggable: isDraggable,
        streetViewControl: false,
        styles: [{"featureType":"administrative","elementType":"labels.text","stylers":[{"visibility":"off"}]},{"featureType":"administrative","elementType":"labels.text.fill","stylers":[{"color":"#444444"}]},{"featureType":"landscape","elementType":"all","stylers":[{"color":"#f2f2f2"}]},{"featureType":"poi","elementType":"all","stylers":[{"visibility":"off"}]},{"featureType":"road","elementType":"all","stylers":[{"saturation":-100},{"lightness":45}]},{"featureType":"road","elementType":"labels","stylers":[{"visibility":"off"}]},{"featureType":"road.highway","elementType":"all","stylers":[{"visibility":"simplified"}]},{"featureType":"road.highway","elementType":"geometry.fill","stylers":[{"visibility":"on"},{"color":"#1764c0"}]},{"featureType":"road.highway","elementType":"geometry.stroke","stylers":[{"visibility":"on"},{"color":"#1764c0"}]},{"featureType":"road.highway","elementType":"labels","stylers":[{"visibility":"off"}]},{"featureType":"road.arterial","elementType":"geometry.fill","stylers":[{"visibility":"on"},{"color":"#2fa000"}]},{"featureType":"road.arterial","elementType":"geometry.stroke","stylers":[{"color":"#2fa000"},{"visibility":"simplified"}]},{"featureType":"road.arterial","elementType":"labels.icon","stylers":[{"visibility":"off"}]},{"featureType":"road.local","elementType":"geometry.fill","stylers":[{"color":"#2fa000"}]},{"featureType":"road.local","elementType":"geometry.stroke","stylers":[{"visibility":"on"},{"color":"#2fa000"}]},{"featureType":"transit","elementType":"all","stylers":[{"visibility":"off"}]},{"featureType":"water","elementType":"all","stylers":[{"color":"#46bcec"},{"visibility":"on"}]}]
      });

      // Center map in between California LatLng(36.778261, -119.417932) and New York LatLng(40.712784, -74.005941)
      map.fitBounds(new google.maps.LatLngBounds(new google.maps.LatLng(36.778261, -119.417932), new google.maps.LatLng(40.712784, -74.005941)))
    };

</script>