Последний (v3) API рекомендует использовать async defer
и обратный вызов при загрузке API Карт.
<script async defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"></script>
Чтобы выполнить эту работу, вам нужно определить класс наложения изнутри (или после) инициализации, когда класс google
был определен.В противном случае вы получите google not defined
ошибок.
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
center: { lat: 40, lng: -30 },
zoom: 3
});
TxtOverlay.prototype = new google.maps.OverlayView();
var overlay = new TxtOverlay(new google.maps.LatLng(0, 0),
"<div>Have a wonderful overlay day</div>",
"customCSSClass",
map);
}
...
//adapded from answer above
function TxtOverlay(pos, txt, cls, map) {
// Now initialize all properties.
this.pos = pos;
this.txt_ = txt;
this.cls_ = cls;
this.map_ = map;
// We define a property to hold the image's
// div. We'll actually create this div
// upon receipt of the add() method so we'll
// leave it null for now.
this.div_ = null;
this.onAdd = function() {
// Note: an overlay's receipt of onAdd() indicates that
// the map's panes are now available for attaching
// the overlay to the map via the DOM.
// Create the DIV and set some basic attributes.
var div = document.createElement('DIV');
div.className = this.cls_;
div.innerHTML = this.txt_;
// Set the overlay's div_ property to this DIV
this.div_ = div;
var overlayProjection = this.getProjection();
var position = overlayProjection.fromLatLngToDivPixel(this.pos);
div.style.left = position.x + 'px';
div.style.top = position.y + 'px';
// We add an overlay to a map via one of the map's panes.
var panes = this.getPanes();
panes.floatPane.appendChild(div);
}
this.draw = function() {
var overlayProjection = this.getProjection();
// Retrieve the southwest and northeast coordinates of this overlay
// in latlngs and convert them to pixels coordinates.
// We'll use these coordinates to resize the DIV.
var position = overlayProjection.fromLatLngToDivPixel(this.pos);
var div = this.div_;
div.style.left = position.x + 'px';
div.style.top = position.y + 'px';
}
this.onRemove = function() {
this.div_.parentNode.removeChild(this.div_);
this.div_ = null;
}
this.hide = function() {
if (this.div_) {
this.div_.style.visibility = "hidden";
}
}
this.show = function() {
if (this.div_) {
this.div_.style.visibility = "visible";
}
}
this.toggle = function() {
if (this.div_) {
if (this.div_.style.visibility == "hidden") {
this.show();
} else {
this.hide();
}
}
}
this.toggleDOM = function() {
if (this.getMap()) {
this.setMap(null);
} else {
this.setMap(this.map_);
}
}
// Explicitly call setMap() on this overlay
this.setMap(map);
}