Set Map не является экземпляром Map и не является экземпляром StreetViewPanaroma

Question

Я получаю эту ошибку при запуске кода из документации Google по API GoogleMaps: https://developers.google.com/maps/documentation/javascript/customoverlays

Я пытаюсь следовать написанному, вот мой код:

var overlay;
CustomImageOverly.prototype = new google.maps.OverlayView();


function init() {

    var pos= {lat: 62.323907, lng: -150.109291};
    var mapProp= {
      center:new google.maps.LatLng(pos),
      zoom:4,
      mapTypeId: google.maps.MapTypeId.TERRAIN,
      styles: [{
                  featureType: 'water',
                  elementType: 'geometry',
                  stylers: [{color: '#3498DB'},
                            {visibility: 'on'}]
                }]
    };
    var map = new google.maps.Map(document.getElementById("googleMap"),mapProp);



      var bounds = new google.maps.LatLngBounds(
        new google.maps.LatLng(62.281819, -150.287132),
        new google.maps.LatLng(62.400471, -150.005608));


        var srcImage = 'https://developers.google.com/maps/documentation/' +
        'javascript/examples/full/images/talkeetna.png';
        debugger;
        overlay = new CustomImageOverly(bounds, srcImage, map);
}

function CustomImageOverly(bounds, image, map)  {

  this.bounds_ = bounds;
  this.image_ = image;
  this.map_ = map;

  this.div_ = null;

  this.setMap(map);
}

Что я делаю не так?

Answer 1

Я понял, что я делаю не так. Я использовал методы API Google, не инициализируя API Google в моем HTML.

Я получил ответ отсюда: https://stackoverflow.com/a/58161132/3277177

    <div id="map"></div>
    <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_KEY"></script>
<script src = "map.js"></script>

Тогда в моем коде Javascript:

var map;
CustomImageOverly.prototype = new google.maps.OverlayView();

function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    center: {
      lat: -34.397,
      lng: 150.644
    },
    zoom: 8
  });
  var bounds = new google.maps.LatLngBounds(
    new google.maps.LatLng(62.281819, -150.287132),
    new google.maps.LatLng(62.400471, -150.005608));

  // The photograph is courtesy of the U.S. Geological Survey.
  var srcImage = 'https://developers.google.com/maps/documentation/javascript/';
  srcImage += 'examples/full/images/talkeetna.png';

  overlay = new CustomImageOverly(bounds, srcImage, map);
}

function CustomImageOverly(bounds, image, map) {

  this.bounds_ = bounds;
  this.image_ = image;
  this.map_ = map;

  this.div_ = null;

  this.setMap(map);
}
google.maps.event.addDomListener(window, 'load', initMap);