Google Maps - Uncaught InvalidValueError: initialise is not a function

Question

When I load the page that my Google Maps is displayed, I always see the following error in the console:

Uncaught InvalidValueError: initialise is not a function js?sensor=false&callback=initialise:94

When hovering over the filename, this is showing as originating from https://maps.googleapis.com/maps/api/js?sensor=false&callback=initialise

The Google Maps window and map displays absolutely fine though and has full functionality. Strangely, I couldn't find any hits on Google regarding this, they all seem to be about setLong and setLat.

If I change the order of loading between the API call, and the JS file, the error message changes between initialise and google. But in both cases, the map still continues to load fine.

Why is the error occuring, and how do I resolve it properly? Here's my google-map.js file:

function initialise() {
    var myLatlng = new google.maps.LatLng(51.126500, 0.257595); // Add the coordinates
    var mapOptions = {
        zoom: 15, // The initial zoom level when your map loads (0-20)
        disableDefaultUI: true, // Disable the map UI
        center: myLatlng, // Centre the Map to our coordinates variable
        mapTypeId: google.maps.MapTypeId.ROADMAP, // Set the type of Map
        scrollwheel: false, // Disable Mouse Scroll zooming (Essential for responsive sites!)
    // All of the below are set to true by default, so simply remove if set to true:
    panControl:false, // Set to false to disable
    mapTypeControl:false, // Disable Map/Satellite switch
    scaleControl:false, // Set to false to hide scale
    streetViewControl:false, // Set to disable to hide street view
    overviewMapControl:false, // Set to false to remove overview control
    rotateControl:false // Set to false to disable rotate control
    }
    var map = new google.maps.Map(document.getElementById('map'), mapOptions); // Render our map within the empty div
    var image = new google.maps.MarkerImage('/wp-content/themes/bellavou/img/marker2.png', null, null, null, new google.maps.Size(70,70)); // Create a variable for our marker image.             
    var marker = new google.maps.Marker({ // Set the marker
        position: new google.maps.LatLng(51.125887, 0.258075), // Position marker to coordinates
        icon:image, //use our image as the marker
        map: map, // assign the market to our map variable
        title: 'Bella Vou at The Pantiles' // Marker ALT Text
    });
}
google.maps.event.addDomListener(window, 'load', initialise); // Execute our 'initialise' function once the page has loaded.

First, you define a callback on the API call `https://maps.googleapis.com/maps/api/js?sensor=false&callback=initialise` then you add a listener `google.maps.event.addDomListener(window, 'load', initialise);` that basically does the same. Remove that listener line or remove the `callback=initialise` from the API call and let us know if it works better. — MrUpsidown, Jul 14 '16 at 10:14
Yep, I removed the `callback=initialise` from the API call, and the error has removed. Thank you for that, add as an answer when you're ready! — Lee, Jul 14 '16 at 10:17

score 30 · Accepted Answer · answered Jul 14 '16 at 10:20

First, you define a callback on the API call:

https://maps.googleapis.com/maps/api/js?sensor=false&callback=initialise

then you add a listener

google.maps.event.addDomListener(window, 'load', initialise);

that basically does the same.

You should remove the callback=initialise from the API call or the above mentioned addDomListener line from your JS file and it should work.

Google Maps - Uncaught InvalidValueError: initialise is not a function

1 Answers1

Linked