title: googlemaps/v3-utility-library : ReferenceError: InfoBox is not defined
body: <p>Can someone provide some help?</p>
  
  <p>I am using Laravel 5.5  . I successfully implemented Google Maps APIs in my project (InfoWindows displaying with data). In order to customize the infoWindow, i use locally through a script the <code>infobox.js</code> downloaded from github link <a href="https://github.com/googlemaps/v3-utility-library/blob/master/infobox/src/infobox.js" rel="nofollow noreferrer">https://github.com/googlemaps/v3-utility-library/blob/master/infobox/src/infobox.js</a>  but every attempt to display an InfoBox fail.
  After many hours, digging in the code, i spotted that my code is failing at </p>
  
  <pre><code>var ib = new InfoBox(myOptions);
  </code></pre>
  
  <p>To confirm it is not related with my project code, i achieved a page with copy paste of the basic example of github at <a href="https://github.com/googlemaps/v3-utility-library/blob/master/infobox/examples/infobox-basic.html" rel="nofollow noreferrer">https://github.com/googlemaps/v3-utility-library/blob/master/infobox/examples/infobox-basic.html</a>:
  But still have the same error : </p>
  
  <blockquote>
    <p>ReferenceError: InfoBox is not defined</p>
  </blockquote>
  
  <p>which Firebug related again to : <code>var ib = new InfoBox(myOptions);</code></p>
  
  <p>In case you doubt here is my copy of code rendering the error :</p>
  
  <pre><code> &lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3&amp;amp;sensor=false"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="/js/infobox.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript"&gt;
      function initialize() {
          ele = document.getElementById("test");
  
          var secheltLoc = new google.maps.LatLng(49.47216, -123.76307);
          var myMapOptions = {
               zoom: 15
              ,center: secheltLoc
              ,mapTypeId: google.maps.MapTypeId.ROADMAP
          };
          var theMap = new google.maps.Map(document.getElementById("map_canvas"), myMapOptions);
          var marker = new google.maps.Marker({
              map: theMap,
              draggable: true,
              position: new google.maps.LatLng(49.47216, -123.76307),
              visible: true
          });
          ele.textContent="initMap2";
          var boxText = document.createElement("div");
          boxText.style.cssText = "border: 1px solid black; margin-top: 8px; background: yellow; padding: 5px;";
          boxText.innerHTML = "City Hall, Sechelt&lt;br&gt;British Columbia&lt;br&gt;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(theMap, this);
          });
          ele.textContent="initMap33";
          var ib = new InfoBox(myOptions);
          ele.textContent="initMap44";
          ib.open(theMap, marker);
      }
  &lt;/script&gt;
  
  &lt;title&gt;Creating and Using an InfoBox&lt;/title&gt;
  &lt;/head&gt;
  &lt;body onload="initialize()"&gt;
      &lt;div id="test"&gt;testee&lt;/div&gt;
      &lt;div id="map_canvas" style="width: 100%; height: 400px"&gt;&lt;/div&gt;
      &lt;p&gt;
      This example shows the "traditional" use of an InfoBox as a replacement for an InfoWindow.
  &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>
  
  <p>I am wondering if the setting of mix (for .js, .css etc...) on my Laravel Framework could be in cause? Did someone encounter such issue?
  ...I opened an issue on <a href="https://github.com/googlemaps/v3-utility-library/issues/423" rel="nofollow noreferrer">https://github.com/googlemaps/v3-utility-library/issues/423</a></p>
  
  <p>Update------
  Here below is my Mix File :</p>
  
  <pre><code>let mix = require('laravel-mix');
  
  mix.js('resources/assets/js/app.js', 'public/js')
     .js('resources/assets/js/slider.js', 'public/js')
     .js('resources/assets/js/globalstat.js', 'public/js')
     .js('resources/assets/js/infobox.js', 'public/js')
     .sass('resources/assets/sass/app.scss', 'public/css').sourceMaps();
  </code></pre>