I can't get my code to make the infobox pop up when I click on a marker

Question

So I'm using the infobox plugin/addon for the google maps api, and I can get the marker to appear but when i click on it nothing happens. My code is mostly from the example, but for some reason it doesn't pop up as it should. Do I need to import it someway that it's not already?(Because when i a declare a new InfoBox, InfoBox is not highlighted). What should I do?

Infobox plug in: https://raw.githubusercontent.com/googlemaps/v3-utility-library/master/infobox/src/infobox.js

My jsfiddle: https://jsfiddle.net/kaidemarco/06wpx75j/49/

*Also I tried to format using the show your code but it didn't work perfectly.

function initMap() {
  var Jays = {lat:  39.280126,lng: -74.574394};

 var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 14,
    center: Jays
  });

var marker = new google.maps.Marker({
            map: map,
            draggable: false,
            position: Jays,
            visible: true
        });

var boxText = document.createElement("div");
        boxText.style.cssText = "border: 1px solid black; margin-top: 8px; background: yellow; padding: 5px;";
        boxText.innerHTML = "City Hall, Sechelt<br>British Columbia<br>Canada";

var myOptions = {
             content: boxText
            ,disableAutoPan: false
            ,maxWidth: 0
            ,pixelOffset: new google.maps.Size(-140, 0)
            ,zIndex: null
            ,boxStyle: { 
              background: "url('tipbox.gif') no-repeat"
              ,opacity: 0.75
              ,width: "280px"
             }
            ,closeBoxMargin: "10px 2px 2px 2px"
            ,closeBoxURL: "https://www.google.com/intl/en_us/mapfiles/close.gif"
            ,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, marker);

}

Answer 1

The issue is that the InfoBox depends on the Google Maps Javascript API. One option to fix it is to load the API and the InfoBox synchronously in the correct order.

<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>

Call the initMap function on window load:

google.maps.event.addDomListener(window, 'load', initMap);

proof of concept fiddle

function initMap() {
  var Jays = {
    lat: 39.280126,
    lng: -74.574394
  };

  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 14,
    center: Jays
  });

  var marker = new google.maps.Marker({
    map: map,
    draggable: false,
    position: Jays,
    visible: true
  });

  var boxText = document.createElement("div");
  boxText.style.cssText = "border: 1px solid black; margin-top: 8px; background: yellow; padding: 5px;";
  boxText.innerHTML = "City Hall, Sechelt<br>British Columbia<br>Canada";

  var myOptions = {
    content: boxText,
    disableAutoPan: false,
    maxWidth: 0,
    pixelOffset: new google.maps.Size(-140, 0),
    zIndex: null,
    boxStyle: {
      background: "url('tipbox.gif') no-repeat",
      opacity: 0.75,
      width: "280px"
    },
    closeBoxMargin: "10px 2px 2px 2px",
    closeBoxURL: "https://www.google.com/intl/en_us/mapfiles/close.gif",
    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, marker);

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

#map {
  height: 100%;
}

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

<!-- Replace the value of the key parameter with your own API key. -->
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<script src="https://cdn.jsdelivr.net/gh/googlemaps/v3-utility-library@master/infobox/src/infobox.js"></script>
<div id="map"></div>