CODEWITHSUNDEEP
javascriptjquerygoogle-mapsgoogle-maps-api-3
ZombieChowder
ZombieChowder

Reputation: 1204

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?

Upvotes: 0

Views: 2400

Answers (2)

geocodezip
geocodezip

Reputation: 161334

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>

Upvotes: 1

Hugo David Farji
Hugo David Farji

Reputation: 174

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

Upvotes: 0

Related Questions