googlemaps/v3-utility-library : ReferenceError: InfoBox is not defined

Question

Can someone provide some help?

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 infobox.js downloaded from github link https://github.com/googlemaps/v3-utility-library/blob/master/infobox/src/infobox.js but every attempt to display an InfoBox fail. After many hours, digging in the code, i spotted that my code is failing at

var ib = new InfoBox(myOptions);

To confirm it is not related with my project code, i achieved a page with copy paste of the basic example of github at https://github.com/googlemaps/v3-utility-library/blob/master/infobox/examples/infobox-basic.html: But still have the same error :

ReferenceError: InfoBox is not defined

which Firebug related again to : var ib = new InfoBox(myOptions);

In case you doubt here is my copy of code rendering the error :

 <!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3&amp;sensor=false"></script>
<script type="text/javascript" src="/js/infobox.js"></script>
<script type="text/javascript">
    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<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(theMap, this);
        });
        ele.textContent="initMap33";
        var ib = new InfoBox(myOptions);
        ele.textContent="initMap44";
        ib.open(theMap, marker);
    }
</script>

<title>Creating and Using an InfoBox</title>
</head>
<body onload="initialize()">
    <div id="test">testee</div>
    <div id="map_canvas" style="width: 100%; height: 400px"></div>
    <p>
    This example shows the "traditional" use of an InfoBox as a replacement for an InfoWindow.
</body>

</html>

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 https://github.com/googlemaps/v3-utility-library/issues/423

Update------ Here below is my Mix File :

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();

@Ben In Laravel it is in ressource/assets/js and compiled by LaravelMix in public/js/ as other jsFiles...i am pretty sure the file is loaded as i put some log in the callback onload() to check. The code is executed until this line var ib = new InfoBox(myOptions); (which is confirmed also by the message of FireBug in the browser) — LearningPath, Apr 08 '18 at 11:26
Result with current code is : The map is displayed with the marker on my page but when clicked on it, no infoBox appear (I.E/Chrome/FireFox) P.S : I still dont understand how SO works ; why my question was downvoted (some knowledge worth more or less than other ttss)? — LearningPath, Apr 08 '18 at 11:31
how do you compile? can you update your question to include the mix file / or somewhere else you include the infobox.js? — Ben, Apr 08 '18 at 17:05
@ben : I updated my question with the mix file. (P.S : with or without sourceMaps(), still the same issue in case you ask). Thks — LearningPath, Apr 08 '18 at 19:20
I tested with a 3rd infobox.js url i found (which include a previous version) https://cdn.rawgit.com/googlemaps/v3-utility-library/master/infobox/src/infobox.js and now the sample and my project work. Do you know a CDN url to the current infoBox.js version for test? However when copying the code of working url in my local infobox.js, i encounter same error issue. So there is something going on related to my infoBox.js laravel file compiled from Resources to Public... — LearningPath, Apr 08 '18 at 20:13

score 2 · Accepted Answer · answered Apr 08 '18 at 20:37

2

For Laravel Mix, mix.js() uses Webpack to bundle such as CommonJS or AMD modules.

For the infobox.js you included, it is not a javascript module and therefore it is not possible to use webpack bundle the assets.

Instead, you should use mix.scripts() to combine the plain js:

mix.scripts([
    'resources/assets/js/infobox.js'
], 'public/js/infobox.js');

answered Apr 08 '18 at 20:37

Ben

5,069
4
18
26

I marked your answer as right as it works but could you provide some more clarification : I wrote a plain javascript file which works with mix.js() or with mix.scripts(). Can you explain what is the difference with infoBox.js not working?what are the other assets coming with this infoBox.js? – LearningPath Apr 11 '18 at 09:14
check this out (https://webpack.github.io/) webpack is module bundler and javascript must be written in module such as CommonJS (spec: https://github.com/webpack/docs/wiki/commonjs) or AMD (spec: https://github.com/webpack/docs/wiki/amd), and for plain js it is not possible to use directly with webpack. – Ben Apr 11 '18 at 09:29
Got it. Thank you. – LearningPath Apr 11 '18 at 10:08

googlemaps/v3-utility-library : ReferenceError: InfoBox is not defined

1 Answers1