地图叠加层未显示。 如何显示叠加层？

Question

I am trying to show an overlay on the map but it not showing it. I copied this code from official documentation. What wrong going here. How can I resolve this issue? Is this code refreshing map once overlay is assigned? Is this code drawing an overlay on the map?

Code:

 var overlay; function initMap() { USGSOverlay.prototype = new google.maps.OverlayView(); var map = new google.maps.Map(document.getElementById('map'), { zoom: 20, mapTypeId: google.maps.MapTypeId.ROADMAP, zoomControl: false, mapTypeControl: false, scaleControl: false, panControl: false, navigationControl: false, streetViewControl: false, gestureHandling: 'cooperative', }); 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'; overlay = new USGSOverlay(bounds, srcImage, map); } function USGSOverlay(bounds, image, map) { this.bounds_ = bounds; this.image_ = image; this.map_ = map; this.div_ = null; this.setMap(map); } USGSOverlay.prototype.onAdd = function() { var div = document.createElement('div'); div.style.borderStyle = 'none'; div.style.borderWidth = '0px'; div.style.position = 'absolute'; var img = document.createElement('img'); img.src = this.image_; img.style.width = '100%'; img.style.height = '100%'; img.style.position = 'absolute'; div.appendChild(img); this.div_ = div; var panes = this.getPanes(); panes.overlayLayer.appendChild(div); } USGSOverlay.prototype.draw = function() { var overlayProjection = this.getProjection(); var sw = overlayProjection.fromLatLngToDivPixel(this.bounds_.getSouthWest()); var ne = overlayProjection.fromLatLngToDivPixel(this.bounds_.getNorthEast()); var div = this.div_; div.style.left = sw.x + 'px'; div.style.top = ne.y + 'px'; div.style.width = (ne.x - sw.x) + 'px'; div.style.height = (sw.y - ne.y) + 'px'; } USGSOverlay.prototype.onRemove = function() { this.div_.parentNode.removeChild(this.div_); this.div_ = null; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/gmaps.js/0.4.25/gmaps.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="map" data-map-zoom="9"></div> 

Error:

this.setMap is not a function

Live Demo:

https://www.vsss.co.in/Right/

Answer 1

You missed this part on the top :

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

this will give you setMap and other functions from OverlayView