Can't implement two infoboxes with google maps api - html

Question

I'm using the infobox plugin in the google maps api to create customized infoboxes for places, yet it's only working for the first one (the one named "west").
When I replicate the code for it using different coordinates and names, it doesn't open when I click the marker.
Here's the code:
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.open(map, this);
});
var ib = new InfoBox(myOptions);
ib.open(map, this);
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(firststreetbeachBOX, "click", function(e) {
ib.open(map, this);
});
var id = new InfoBox(myOptionsa);
id.open(map, this);
map.panTo(id.getPosition())
}
google.maps.event.addDomListener(window, 'load', initMap);
JSFIDDLE: https://jsfiddle.net/kaidemarco/06wpx75j/228/

Answer 1

I get a javascript error on your fiddle: Uncaught TypeError: anchor.getPosition is not a function. You have a number of typos in your code:
firststreetbeachBOX is an InfoBox, not a google.maps.Marker. That should be firststreetbeachMARKER.
google.maps.event.addListener(firststreetbeachMARKER, "click", function(e) {
ib.open(map, this);
});
should be:
google.maps.event.addListener(firststreetbeachBOX, "click", function(e) {
ib.open(map, this);
});
Currently there is only one InfoBox reference ib. If you only want one to open on clicks, that is fine, but if you want the correct content, you need to reset the options in the onclick function:
google.maps.event.addListener(firststreetbeachMARKER, "click", function(e) {
ib.open(map, this);
});
should be:
google.maps.event.addListener(firststreetbeachMARKER, "click", function(e) {
ib.setOptions(myOptionsa);
ib.open(map, this);
});
In the ib.open(map, this) calls that are outside of the onclick function, the this is not a valid anchor. That should be the appropriate google.maps.Marker object:
// the first should be:
ib.open(map, marker);
// the second should be:
id.open(map, firststreetbeachMARKER);
proof of concept fiddle
code snippet:
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">