Google map keeps on giving me the same error

Question

I'm trying to insert a google map tp my html code but it keeps on giving me this error: "myMap is not a function", here is my code:

function myMap() {
    var mapOptions = {
        center: new google.maps.LatLng(51.5, -0.12),
        zoom: 10,
        mapTypeId: google.maps.MapTypeId.HYBRID
    }
var map = new google.maps.Map(document.getElementById("map"), mapOptions);
}

#map{
  width: 100%;
  height: 250px;
  }

<div id="map"></div>

    <script src="https://maps.googleapis.com/maps/api/js?key=APIKEY4&callback=myMap"></script>

If so, did you load that "separate" file before you load the `google maps` script? — borislemke, May 27 '17 at 15:59
duplicate of [initMap is not a function - map not rendering. Google Maps API - JS](https://stackoverflow.com/questions/40660124/initmap-is-not-a-function-map-not-rendering-google-maps-api-js) — geocodezip, May 27 '17 at 16:49

score 1 · Answer 1 · answered May 27 '17 at 16:00

1

You never initialize the actual map. Try the following. (it'll throw errors as I removed the API Key)

function myMap() {
    var mapOptions = {
        center: new google.maps.LatLng(51.5, -0.12),
        zoom: 10,
        mapTypeId: google.maps.MapTypeId.HYBRID
    }
var map = new google.maps.Map(document.getElementById("map"), mapOptions);
}

google.maps.event.addDomListener(window, 'load', myMap);

#map{
  width: 100%;
  height: 250px;
  }

<div id="map"></div>

    <script src="https://maps.googleapis.com/maps/api/js?key=APIKEY4&callback=myMap"></script>

answered May 27 '17 at 16:00

Josh Walshaw

200
1
2
17

it worked thank you! but it gave me this error in the console Uncaught ReferenceError: google is not defined, is that okay? – stephjhonny May 27 '17 at 16:02
1

@stephjhonny Make sure the – Josh Walshaw May 27 '17 at 16:04
@stephjhonny keep that line after – Dinesh undefined May 27 '17 at 16:05
You don't need both `callback=myMap` and `google.maps.event.addDomListener(window, 'load', myMap);` – geocodezip May 27 '17 at 16:46

score 1 · Accepted Answer · answered May 27 '17 at 16:47

The posted code works as is if the code snippet is rearranged to define the myMap function before the include of the API. Note that you don't (currently) need a key on stackoverflow.com as it is grandfathered with keyless access.

#map {
  width: 100%;
  height: 250px;
}

<div id="map"></div>
<script>
  function myMap() {
    var mapOptions = {
      center: new google.maps.LatLng(51.5, -0.12),
      zoom: 10,
      mapTypeId: google.maps.MapTypeId.HYBRID
    }
    var map = new google.maps.Map(document.getElementById("map"), mapOptions);
  }
</script>
<script async defer src="https://maps.googleapis.com/maps/api/js?callback=myMap"></script>

Google map keeps on giving me the same error

2 Answers2