InitMap is not a function

Question

InitMap is not a function

I do not understand what the problem is? I used this example from the Google Maps API: Simple Map

<body>
   <!-- Map Section -->
   <section id="map"></section>

   <script src="js/jquery.min.js"></script>
   <script src="js/main.js"></script>
   <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB5Y8CqFe-4Egzl5TlPqlFvjRGcuCfHGvY&callback=initMap" async defer></script>

</body>

main.js:

//--------------------------------------------------
// Contact Map
//--------------------------------------------------
function initMap() {    
    if ($("#map").length > 0)
    {
        var map;
        map = new google.maps.Map(document.getElementById('map'),{
            center: {lat: 44.4297538, lng: 26.0649221},
            zoom: 16,
            scrollwheel: false,
            zoomControl: false,
            panControl: false,
            streetViewControl: false,
            mapTypeControl: false,
            overviewMapControl: false,
            clickable: false
        });

    }
}

Error:

: "initMap is not a function"
name: "InvalidValueError"

+2

google-maps

Denysm Nov 06 '16 at 10:22

source share

3 answers

Sebastien gicquel · Answer 1 · 2017-01-20T14:21:26+0000

I had the same problem working on a wordpress template with Sage (WordPress Starter Theme).

My js were wrapped

(function($) {

// all the functions to create map, center markers, etc.

}

Then the mapping was initialized to $(document).ready

I deleted (function($) { }and just added functions without $(document).ready, then it was ok.

Also, don't forget to upload your custom js file to google google map:

<script src="custom-js-google-map.js"></script>

<script async defer
      src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
</script>

Trolldejo · Answer 2 · 2017-08-31T16:07:23+0000

, &callback=initMap, . , initMap - , .

scaisEdge · Answer 3 · 2016-11-06T10:27:49+0000

Try moving to the head the download for the script

<html>
  <head>
    <title>Simple Map</title>
    <meta name="viewport" content="initial-scale=1.0">
    <meta charset="utf-8">

    <script src="js/jquery.min.js"></script>
    <script src="js/main.js"></script>
    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB5Y8CqFe-4Egzl5TlPqlFvjRGcuCfHGvY&callback=initMap" async defer></script>

and make sure for the right path for

     <script src="js/jquery.min.js"></script>
    <script src="js/main.js"></script>

try using relative path

     <script src="./js/jquery.min.js"></script>
    <script src="./js/main.js"></script>

InitMap is not a function

More articles: