title: InvalidValueError: myMap is not a function
body: <p>I'm trying to include a map on my website but it keeps on giving me an error. When I try it on a plain page with just the code for the map and nothing else it works.</p>
  
  <p>HTML :</p>
  
  <pre><code>    &lt;!-- Contact/Area Container --&gt;
  &lt;div class="w3-container" id="where" style="padding-bottom:32px;"&gt;
      &lt;div class="w3-content" style="max-width:700px"&gt;
          &lt;h5 class="w3-center w3-padding-48"&gt;&lt;span class="w3-tag w3-wide"&gt;WHERE TO FIND US&lt;/span&gt;&lt;/h5&gt;
          &lt;p&gt;Find us at some address at some place.&lt;/p&gt;
  
          &lt;div id="googleMap" class="w3-sepia" style="width:100%;height:400px;"&gt;&lt;/div&gt;
  
              &lt;p&gt;&lt;span class="w3-tag"&gt;FYI!&lt;/span&gt; We offer full-service catering for any event, large or small. We understand your needs and we will cater the food to satisfy the biggest criteria of them all, both look and taste.&lt;/p&gt;
              &lt;p&gt;&lt;strong&gt;Reserve&lt;/strong&gt; a table, ask for today's special or just send us a message:&lt;/p&gt;
              &lt;form action="/action_page.php" target="_blank"&gt;
                  &lt;p&gt;&lt;input class="w3-input w3-padding-16 w3-border" type="text" placeholder="Name" required name="Name"&gt;&lt;/p&gt;
                  &lt;p&gt;&lt;input class="w3-input w3-padding-16 w3-border" type="number" placeholder="How many people" required name="People"&gt;&lt;/p&gt;
                  &lt;p&gt;&lt;input class="w3-input w3-padding-16 w3-border" type="datetime-local" placeholder="Date and time" required name="date" value="2017-11-16T20:00"&gt;&lt;/p&gt;
                  &lt;p&gt;&lt;input class="w3-input w3-padding-16 w3-border" type="text" placeholder="Message \ Special requirements" required name="Message"&gt;&lt;/p&gt;
                  &lt;p&gt;&lt;button class="w3-button w3-black" type="submit"&gt;SEND MESSAGE&lt;/button&gt;&lt;/p&gt;
              &lt;/form&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  
  &lt;script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDyLiQj3MnPbOp5SoMewKILkSPHHb0BQYQ&amp;callback=myMap"&gt;&lt;/script&gt;
  
  &lt;script type="text/javascript" src="script.js"&gt; &lt;/script&gt;
  </code></pre>
  
  <p>JAVASCRIPT: </p>
  
  <pre><code>function myMap()
  {
    myCenter=new google.maps.LatLng(41.878114, -87.629798);
    var mapOptions= {
      center:myCenter,
      zoom:12, scrollwheel: false, draggable: false,
      mapTypeId:google.maps.MapTypeId.ROADMAP
    };
    var map=new google.maps.Map(document.getElementById("googleMap"),mapOptions);
  
    var marker = new google.maps.Marker({
      position: myCenter,
    });
    marker.setMap(map);
  
  
  }
  </code></pre>