title: Index:145 Uncaught TypeError: map.mapTypes.insertAt is not a function
body: <p>I'm never used Google Maps API before, and I can't find any similar issues to this posted online. I'm doing something really basic here,
  I just want to layer OpenSeaMaps on top of Google Maps.</p>
  
  <p>And I've seen a couple of code samples online so I use the below code and I get an issue where <code>map.mapTypes.insertAt is not a function</code> but I've looked at the documentation and this doesn't seem to have been deprecated and is in a couple of examples for Google Maps API, for example <a href="https://developers.google.com/maps/documentation/javascript/examples/maptype-overlay" rel="nofollow noreferrer">https://developers.google.com/maps/documentation/javascript/examples/maptype-overlay</a></p>
  
  <p>Does anyone know why this would be throwing this error?</p>
  
  <pre><code>  var map;
  
    function initMap() {
  
     map = new google.maps.Map(document.getElementById('map'), {
              zoom: 8,
              center: { lat: 35.1264, lng: 33.4299 },
              mapTypeIds: ['satellite', 'OSM']
     });
  
  
      var osmMapTypeOptions = {
              getTileUrl: function(coord, zoom) {
                  return "http://t1.openseamap.org/seamark/" +
                      zoom + "/" + coord.x + "/" + coord.y + ".png";
              },
              tileSize: new google.maps.Size(256, 256),
              isPng: true,
              maxZoom: 19,
              minZoom: 0,
              name: "OSM"
       };
  
  
      var osmMapType = new google.maps.ImageMapType(osmMapTypeOptions);
  
  
      map.setMapTypeId('OSM');
      map.mapTypes.insertAt(0, osmMapType); 
  
    }
  </code></pre>