Registry / gcp / google-maps-utility-library-v3-infobox

google-maps-utility-library-v3-infobox

JSON →
library1.1.14jsnpmunverified

This package, `google-maps-utility-library-v3-infobox`, is a community-maintained fork of the original InfoBox utility library for Google Maps JavaScript API V3. It was created to provide continued access to the `InfoBox` class after its original hosting on Google Code became unavailable. `InfoBox` functions similarly to `google.maps.InfoWindow` but offers greatly enhanced styling customization and can be used as a map label. While the original InfoBox library (version 1.1.13) has seen minor updates since its initial fork, this specific npm package (version 1.1.14) has not been updated in over 9 years, indicating it is no longer actively maintained. Its release cadence is effectively none. It differentiates itself by providing a robust solution for custom info windows in older Google Maps V3 projects, a feature that was more difficult to achieve with the native `InfoWindow` at the time.

gcp
npm install google-maps-utility-library-v3-infobox
github ↗package ↗
INSTALL
IMPORT
SIG · GOOGLE-MAPS-UTILIT
G
google-maps-utility-library-v3-infobox
gcpjavascriptv1.1.14
Install
—
Import
—
Disk
—
Pass rate
0/ 6
Env Coverage0 / 6
glibc
18–22
musl
18–22
Install & Compatibility
Where this runs
tested against v? · npm install
Install × environment matrix
Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux
musl
node 18–226 runs
build_error
glibc
node 18–226 runs
build_error
Code
Verified usage

Verified import paths — ran on the pinned version, not inferred.

InfoBox
✓ import 'google-maps-utility-library-v3-infobox'; // InfoBox is then available globally or via your bundler's shim
✗ import { InfoBox } from 'google-maps-utility-library-v3-infobox';
This library was not designed for modern ES Modules. It typically exposes `InfoBox` globally or relies on bundlers to wrap it for CommonJS `require`. Native ES module import syntax for named exports will not work directly.
InfoBox
✓ const InfoBox = require('google-maps-utility-library-v3-infobox');
✗ import InfoBox from 'google-maps-utility-library-v3-infobox';
For CommonJS environments (e.g., Node.js or older bundlers like Browserify), use `require()`. The module likely exports `InfoBox` as the default or directly on `module.exports`. If using `webpack` or `laravel-mix`, you might need to ensure it's loaded as a plain script rather than a module.
InfoBox (via global script)
✓ <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"></script> <script src="https://cdn.jsdelivr.net/npm/google-maps-utility-library-v3-infobox@1.1.14/dist/infobox.js"></script>
The most common and reliable way to use this library, especially in legacy projects or environments without bundlers, is to include it as a separate script tag after the Google Maps API script. This makes `InfoBox` available as a global object.

Demonstrates initializing a Google Map, adding a marker, and attaching a custom-styled InfoBox that opens on marker click. It also shows how to use InfoBox as a static map label. Requires the Google Maps JavaScript API to be loaded first.

function initMap() { const map = new google.maps.Map(document.getElementById('map'), { zoom: 10, center: { lat: -33.9, lng: 151.2 }, }); const marker = new google.maps.Marker({ map: map, position: { lat: -33.9, lng: 151.2 }, title: 'Custom InfoBox Example', }); // Example content for the InfoBox const contentString = ` <div style="padding: 10px; background-color: white; border: 2px solid #ccc; border-radius: 5px;"> <h3>Hello from InfoBox!</h3> <p>This is a custom styled information window.</p> <button onclick="alert('Button clicked from InfoBox!')">Click Me</button> </div> `; // InfoBox options (simplified example, refer to library docs for full options) const infoBoxOptions = { content: contentString, disableAutoPan: false, pixelOffset: new google.maps.Size(-140, 0), boxStyle: { width: '280px', opacity: 1, background: 'none', border: 'none' }, closeBoxMargin: '2px 2px 2px 2px', closeBoxURL: 'http://www.google.com/intl/en_us/mapfiles/close.gif', infoBoxClearance: new google.maps.Size(1, 1), isHidden: false, pane: 'floatPane', enableEventPropagation: true }; const ib = new InfoBox(infoBoxOptions); marker.addListener('click', () => { ib.open(map, marker); }); // Example of using a hidden InfoBox as a label (common use case) const labelOptions = { content: '<div style="color: blue; font-weight: bold; font-size: 14px;">My Label</div>', boxStyle: { background: 'none', border: 'none' }, disableAutoPan: true, pixelOffset: new google.maps.Size(-20, -40), // Adjust to position relative to marker position: marker.getPosition(), closeBoxURL: "", // Hide close button for labels isHidden: false, pane: 'mapPane', // Renders above markers but below infowindows enableEventPropagation: false }; const label = new InfoBox(labelOptions); label.open(map, marker); } // Ensure Google Maps API is loaded with a callback // <div id="map" style="height: 400px; width: 100%;"></div> // <script async defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY_HERE&callback=initMap"></script> // <script src="https://cdn.jsdelivr.net/npm/google-maps-utility-library-v3-infobox@1.1.14/dist/infobox.js"></script>
Debug
Known issues
breakingThe original InfoBox library was never an official Google product and is archived by Google Maps utility libraries on GitHub. It is explicitly noted as 'not maintained'. This `npm` package is an unmaintained fork of that already unmaintained library, with its last publish date being over 9 years ago. Expect no updates, bug fixes, or compatibility assurances with newer versions of the Google Maps JavaScript API.
fix
For new projects or modernizing existing ones, consider using the native `google.maps.InfoWindow` with custom CSS styling, or more modern libraries/frameworks that abstract Google Maps interactions and provide better customizability.
affects: All versions
gotchaThis library relies on the global `google.maps` object being present. If the Google Maps API is loaded asynchronously, ensure that `InfoBox` is initialized only after the `google.maps` object is fully available, typically within the `callback` function specified in the Maps API script URL.
fix
Load the InfoBox script after the Google Maps API script, and instantiate `InfoBox` objects within the `initMap` callback function (or equivalent) provided to the Google Maps API loader.
affects: All versions
gotchaThe library does not support native ES Modules (`import ... from '...'`) and is intended for use in traditional script tag environments or CommonJS setups via bundlers. Attempting to use `import { InfoBox } from '...'` directly will likely fail.
fix
For CommonJS, use `const InfoBox = require('google-maps-utility-library-v3-infobox');`. For browser environments, load it via a `<script>` tag after the Google Maps API script. Bundlers like Webpack or Rollup might require specific configurations (e.g., using `script-loader` or `expose-loader`) to handle such global-exposing libraries correctly.
affects: All versions
deprecatedGoogle's own documentation now archives InfoBox, indicating it is no longer officially supported or recommended for new development. The core functionality of customizable info windows can often be achieved with modern CSS on standard `google.maps.InfoWindow` or by implementing custom `OverlayView` components.
fix
Evaluate if the custom styling needs can be met by styling `google.maps.InfoWindow` with CSS. For advanced use cases requiring complete control over the overlay, consider extending `google.maps.OverlayView` directly.
affects: All versions
Errors
Common errors & fixes
ReferenceError: InfoBox is not defined
The `infobox.js` script was either not loaded, or it was loaded before the Google Maps API script, or it was incorrectly imported in a module environment.
fix
Ensure the `infobox.js` script is loaded *after* the Google Maps API script, typically via a `<script>` tag in HTML. If using a module bundler, verify it's correctly exposed globally or `require()`d after the global `google.maps` object is available. For Laravel Mix, ensure it's loaded with `mix.scripts()` rather than `mix.js()` if it's not a module.
TypeError: google.maps.Size is not a constructor (or similar for other google.maps objects)
The Google Maps JavaScript API object (`google.maps`) was not fully loaded or available when `InfoBox` was initialized or its options were configured.
fix
Ensure that `InfoBox` instances and their options are created only within the `callback` function specified in your Google Maps API script URL (e.g., `initMap`). This guarantees `google.maps` is ready. Example: `<script async defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"></script>`
Upgrade
Version history
1.1.14latest on npm
Audit
Dependencies

No dependency data recorded yet.

Agent activity
23 hits · last 30 days
node
18
OpenAI (training)
1
Resources
githubhttps://github.com/nmccready/google-maps-utility-library-v3-infobox ↗
packagehttps://www.npmjs.com/package/google-maps-utility-library-v3-infobox ↗