Question

[Solved] initMap is not a function – map not rendering. Google Maps API – JS

I am experiencing the well known issue initMap is not a function and I really don’t see how to solve it. I’ve tried various methods recommended in other questions but none of them work. The only plausible solution I found was involving the usage of AngularJS but I am trying to accomplish script without it.

Here is my html code:

<html>
<head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>    
        <script async defer 
            src="https://maps.googleapis.com/maps/api/js?key=XXXXXX&callback=initMap"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
    <script src ="script.js" />

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <link rel="stylesheet" href ="style.css">
</head>
    <body>
    <div id ="map-canvas"> </div>
    </body>
</html>

JS Code:

window.initMap = function() {
        var uluru = {lat: -25.363, lng: 131.044};
        var map = new google.maps.Map(document.getElementById('map-canvas'), {
          zoom: 4,
          center: uluru
        });
        var marker = new google.maps.Marker({
          position: uluru,
          map: map
        });
      };

For the JS code, I literally copied and pasted what’s in Google’s documentation with a small change made here window.initMap = function().


Things I’ve tried:

  1. Changing function initMap() to window.initMap = function()
  2. Delete everything in initMap() and giving it alert("ok") to see
    if it will come up. Well, it didn’t.
  3. Changed the position of async defer to the end of the script reference, also put the script reference at the very top.

Questions I’ve checked in detail:

First try, Second, Third time wasn’t the charm

The error message I get :

Error-msg-Chrome

My map is not being rendered and I keep getting this error, any ideas how to fix it?

Solution #1:

Two issues:

  1. Add the missing </script> tag
  2. Change the order of the page load:
<div id="map-canvas"> </div>
<script src="script.js" defer async></script>
<script async defer 
  src="https://maps.googleapis.com/maps/api/js?key=XXXXXX&callback=initMap"></script>
Respondent: geocodezip

Solution #2:

Try changing the order of the scripts from this

        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>    
        <script async defer 
        src="https://maps.googleapis.com/maps/api/js?key=XXXXXX&callback=initMap"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
        <script src ="script.js" />

To this

        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>    

        <script src ="script.js" />
        <script async defer 
        src="https://maps.googleapis.com/maps/api/js?key=XXXXXX&callback=initMap"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

So this way the initMap function is defined before the GMaps api loads

Respondent: Hugo David Farji

The answers/resolutions are collected from stackoverflow, are licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0 .

Most Popular

To Top
India and Pakistan’s steroid-soaked rhetoric over Kashmir will come back to haunt them both clenbuterol australia bossier man pleads guilty for leadership role in anabolic steriod distribution conspiracy