initMap is not a function Google Maps Javascript

uncaught (in promise) initmap is not a function
google maps api
unhandled promise rejection: initmap is not a function ; zone: <root> ; task: promise.then ; value:
load google maps api
initmap is not a function vue
initmap is not a function in laravel
google maps api zoom level
google is not defined

I know this question has been asked. But I still can't get past it. I am simply trying to get googlemaps API loaded in js fiddle. I cannot get past the error:initMap is not a function. My jsfiddle here: jsfiddle

My code:

function initMap() {
    var map = new google.maps.Map(document.getElementById('map'), {
        center: { lat: 34.397, lng: 150.644 },
        scrollwheel: false,
        zoom: 2
    });

HTML:

  <div id="map" style="width: 500px; height: 400px;"></div>
      <script async defer
            src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDieZ7uAY4DPdT3Z4fp4KtykHl6dWryYdw&callback=initMap">
    </script>

When I have the function initmap(){} (with brackets) the map does not load and I get the error. When remove the function initmap{}and just:

var map = new google.maps.Map(document.getElementById('map'), {
    center: { lat: 34.397, lng: 150.644 },
    scrollwheel: false,
    zoom: 2
});

The map loads, however I still get the error:

initMap is not a function

It might have something to do with a callback. I have not written javascript in a while. But I just need to get past this error. Thanks

initMap is not a function Google Maps Javascript, TL;DR. In the fiddle, you have a syntax error in not closing the iniMap() with } . Besides, the function is defined after the DOM loads. To fix this:. Honestly, the initMap is not a function  error is one of the most common mistakes Web Developers make when trying to build an interesting Map-Style, Side-Project Application (i.e. Zillow) using Vanilla JavaScript or JavaScript Framework/Library like Angular, Vue or React.

Here's a JSFiddle of how it works.

Essentially place your function above the call to Google API

<script>
function initMap() {
        var map = new google.maps.Map(document.getElementById('map'), {
            center: { lat: 34.397, lng: 150.644 },
            scrollwheel: false,
            zoom: 2
        });
    } // close function here
    </script>
    <script async defer
                src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDieZ7uAY4DPdT3Z4fp4KtykHl6dWryYdw&callback=initMap">
        </script>

Also the function wasn't properly closed.

[Solved] initMap is not a function, Google Maps API returns "initMap is not a function" error? Here are the most common reasons why you get it, how to fix it, and load Google  I had the same issueyour solution workedremoved the initMap from the script call and it worked. Ironically, what through me for a quite some time is that I didn't even see that in the script line because I have a separate initMap() in another custom.js file - so I kept looking at it trying to figure what the issue was.

I have been looking for an answer in many forums, but I just found in my code there was a lost ';'. After deleting the ';' everything worked well.

I know it's not the best answer but I hope it helps someone.

Uncaught InvalidValueError: initMap is not a function · Issue #14 , Uncaught InvalidValueError: initMap is not a function #14 Need to review where to place the JS script code for Google Maps, so that map  I have a basic HTML website, that has a few Google Maps in it. Each sub-site has its own map. Each site has this code, that calls the JS function: <script type="text/javascript"&gt; $.get

You are calling initMap before it was declared.

https://jsfiddle.net/mp7j7gy0/60/

<script async defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_KEY"> </script>

var initMap = function() {
    var map = new google.maps.Map(document.getElementById('map'), {
        center: { lat: 34.397, lng: 150.644 },
        scrollwheel: false,
        zoom: 2
    });
}

initMap()

Google Maps API problem - initMap(), This part of the Google Maps script URL is the culprit: &callback=initMap. It means that when the script is loaded it will attempt to run the  Take a look at Map Markers Not Displaying (JavaScript/Google Maps API V3) Try changing . var marker = google.maps.Marker to. var marker = new google.maps.Marker Adding new should fix your issue. This also applies to the library load-google-maps-api for those using webpack.

I stumbled upon this problem too, but in my case the culprit seems to be mod_pagespeed.

I think it modifies the order of scripts in the page, thus previous solutions did not work. I managed to solve it by dynamically adding the Map's script tag.

<script>
    function initMap() {
        // some code
    }

    // dynamically add your map
    var tag = document.createElement('script');
    tag.src = "https://maps.googleapis.com/maps/api/js?key=API_KEY&callback=initMap";
    tag.defer = true;
    var firstScriptTag = document.getElementsByTagName('script')[0];
    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
</script>

"initMap is not a function" error - Using Plone, The page I am building to hold the map returns this error: InvalidValueError: initMap is not a function initMap is in the Google API script, which I  Why is the first solution worse? In my case, i don't want to call the map on page load. I want to show it when a specific element is clicked. And this element is loaded dynamically from WebSQL, therefore, i don't even know when the element will be loaded, and i'm pretty sure google script will load faster.

API key - Google Maps Help, Well if 'initMap' is not the name of your callback function, nor is "google.loader.​callbacks.maps", then find out what your REAL function is acully called and put  As a result, map images within Google Maps and the Maps JavaScript API are broken up into map "tiles" and "zoom levels." At low zoom levels, a small set of map tiles covers a wide area; at higher zoom levels, the tiles are of higher resolution and cover a smaller area.

Can't find a way to load my script after Google Maps API, loaded before the script of google map API… So I got an error “uncaught exception: InvalidValueError: initMap is not a function”. I tried some callback functions  The section below displays the entire code you need to create the map in this tutorial.

Can't find a way to load my script after Google Maps API, loaded before the script of google map API… So I got an error “uncaught exception: InvalidValueError: initMap is not a function”. I tried some callback functions  While working on feature (ref: Issue #6 ), sometimes when loading user profile html, the map doesn't load and I get this error: Uncaught InvalidValueError: initMap is not a function. If I refresh the page, the map loads, but sometimes it

Comments
  • Is that a mistake in copying or you didn't close initMap properly?