Я получаю ошибку javascript на вашей скрипке: Uncaught TypeError: anchor.getPosition is not a function.В вашем коде есть несколько опечаток:
firststreetbeachBOX - это InfoBox, а не google.maps.Marker.Это должно быть firststreetbeachMARKER.
google.maps.event.addListener(firststreetbeachMARKER, "click", function(e) {
ib.open(map, this);
});
должно быть:
google.maps.event.addListener(firststreetbeachBOX, "click", function(e) {
ib.open(map, this);
});
В настоящее время существует только одна
InfoBox ссылка
ib.Если вы хотите, чтобы один из них открывался по кликам, это нормально, но если вы хотите получить правильный контент, вам необходимо сбросить параметры в функции
onclick:
google.maps.event.addListener(firststreetbeachMARKER, "click", function(e) {
ib.open(map, this);
});
должно быть:
google.maps.event.addListener(firststreetbeachMARKER, "click", function(e) {
ib.setOptions(myOptionsa);
ib.open(map, this);
});
При вызовах
ib.open(map, this), которые
находятся за пределами функции onclick,
this не является допустимым
anchor.Это должен быть соответствующий
google.maps.Marker объект:
// the first should be:
ib.open(map, marker);
// the second should be:
id.open(map, firststreetbeachMARKER);
подтверждение концепции скрипта
фрагмент кода:
function initMap() {
var west = {
lat: 39.288682,
lng: -74.565635
};
var firststreetbeach = {
lat: 39.2807806,
lng: -74.5575138
};
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 14,
center: west,
mapTypeId: google.maps.MapTypeId.HYBRID,
styles: [{
featureType: "poi",
elementType: "labels",
stylers: [{
visibility: "off"
}]
}]
});
var marker = new google.maps.Marker({
map: map,
draggable: false,
position: west,
visible: true
});
marker.setTitle("west");
var firststreetbeachMARKER = new google.maps.Marker({
position: firststreetbeach,
map: map
});
firststreetbeachMARKER.setTitle("First Street Beach");
var boxText = document.createElement("div");
boxText.style.cssText = "border: 4px solid black; margin-top: 8px; background: deepskyblue; padding: 3px;";
boxText.innerHTML =
`<h1><div style="font-family: 'Permanent Marker', cursive;">
west</div></h1><p>
<b>Sick Place</b></p>`
var firststreetbeachBOX = document.createElement("div");
firststreetbeachBOX.style.cssText = "border: 4px solid black; margin-top: 8px; background: deepskyblue; padding: 3px;";
firststreetbeachBOX.innerHTML =
`<h1><div style="font-family: 'Permanent Marker', cursive;">
First Street Beach</div></h1><p>
<b>Guarded Beach, Can Only Be Surfed Before The Life Guards Show Up, Or After.(Life Guards On Duty 10Am-5:30PM Starting May 25-End Of Summer)</b></p>`
var myOptions = {
content: boxText,
disableAutoPan: false,
maxWidth: 0,
pixelOffset: new google.maps.Size(-120, 0),
zIndex: null,
boxStyle: {
background: "url('tipbox.gif') no-repeat",
opacity: 0.90,
width: "235px"
},
closeBoxMargin: "10px 2px 2px 2px",
closeBoxURL: "https://lh3.google.com/u/0/d/1vBKI8gNIslaOItFoenaRADfZ3Mh4hrM5=w50-h48-p-k-nu-iv1",
infoBoxClearance: new google.maps.Size(1, 1),
isHidden: false,
pane: "floatPane",
enableEventPropagation: false
};
google.maps.event.addListener(marker, "click", function(e) {
ib.setOptions(myOptions);
ib.open(map, this);
});
var ib = new InfoBox(myOptions);
ib.open(map, marker);
map.panTo(ib.getPosition())
var myOptionsa = {
content: firststreetbeachBOX,
disableAutoPan: false,
maxWidth: 0,
pixelOffset: new google.maps.Size(-120, 0),
zIndex: null,
boxStyle: {
background: "url('tipbox.gif') no-repeat",
opacity: 0.90,
width: "235px"
},
closeBoxMargin: "10px 2px 2px 2px",
closeBoxURL: "https://lh3.google.com/u/0/d/1vBKI8gNIslaOItFoenaRADfZ3Mh4hrM5=w50-h48-p-k-nu-iv1",
infoBoxClearance: new google.maps.Size(1, 1),
isHidden: false,
pane: "floatPane",
enableEventPropagation: false
};
google.maps.event.addListener(firststreetbeachMARKER, "click", function(e) {
ib.setOptions(myOptionsa);
ib.open(map, this);
});
var id = new InfoBox(myOptionsa);
id.open(map, firststreetbeachMARKER);
map.panTo(id.getPosition())
}
google.maps.event.addDomListener(window, 'load', initMap);
html,
body,
#map {
height: 100%;
margin: 0;
padding: 0;
}
.action-btns {
float: left;
width: 70px;
overflow: hidden;
position: relative;
top: 12px;
left: 6px;
}
<div id="map"></div>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/googlemaps/v3-utility-library@master/infobox/src/infobox.js"></script>
<link href="https://fonts.googleapis.com/css?family=Permanent+Marker" rel="stylesheet">