{"id":13246,"library":"google-maps-utility-library-v3-infobox","title":"Google Maps V3 InfoBox Utility","description":"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.","status":"abandoned","version":"1.1.14","language":"javascript","source_language":"en","source_url":"git://github.com/nmccready/google-maps-utility-library-v3-infobox","tags":["javascript"],"install":[{"cmd":"npm install google-maps-utility-library-v3-infobox","lang":"bash","label":"npm"},{"cmd":"yarn add google-maps-utility-library-v3-infobox","lang":"bash","label":"yarn"},{"cmd":"pnpm add google-maps-utility-library-v3-infobox","lang":"bash","label":"pnpm"}],"dependencies":[],"imports":[{"note":"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.","wrong":"import { InfoBox } from 'google-maps-utility-library-v3-infobox';","symbol":"InfoBox","correct":"import 'google-maps-utility-library-v3-infobox';\n// InfoBox is then available globally or via your bundler's shim"},{"note":"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.","wrong":"import InfoBox from 'google-maps-utility-library-v3-infobox';","symbol":"InfoBox","correct":"const InfoBox = require('google-maps-utility-library-v3-infobox');"},{"note":"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.","symbol":"InfoBox (via global script)","correct":"<script src=\"https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap\"></script>\n<script src=\"https://cdn.jsdelivr.net/npm/google-maps-utility-library-v3-infobox@1.1.14/dist/infobox.js\"></script>"}],"quickstart":{"code":"function initMap() {\n  const map = new google.maps.Map(document.getElementById('map'), {\n    zoom: 10,\n    center: { lat: -33.9, lng: 151.2 },\n  });\n\n  const marker = new google.maps.Marker({\n    map: map,\n    position: { lat: -33.9, lng: 151.2 },\n    title: 'Custom InfoBox Example',\n  });\n\n  // Example content for the InfoBox\n  const contentString = `\n    <div style=\"padding: 10px; background-color: white; border: 2px solid #ccc; border-radius: 5px;\">\n      <h3>Hello from InfoBox!</h3>\n      <p>This is a custom styled information window.</p>\n      <button onclick=\"alert('Button clicked from InfoBox!')\">Click Me</button>\n    </div>\n  `;\n\n  // InfoBox options (simplified example, refer to library docs for full options)\n  const infoBoxOptions = {\n    content: contentString,\n    disableAutoPan: false,\n    pixelOffset: new google.maps.Size(-140, 0),\n    boxStyle: {\n      width: '280px',\n      opacity: 1,\n      background: 'none',\n      border: 'none'\n    },\n    closeBoxMargin: '2px 2px 2px 2px',\n    closeBoxURL: 'http://www.google.com/intl/en_us/mapfiles/close.gif',\n    infoBoxClearance: new google.maps.Size(1, 1),\n    isHidden: false,\n    pane: 'floatPane',\n    enableEventPropagation: true\n  };\n\n  const ib = new InfoBox(infoBoxOptions);\n\n  marker.addListener('click', () => {\n    ib.open(map, marker);\n  });\n\n  // Example of using a hidden InfoBox as a label (common use case)\n  const labelOptions = {\n    content: '<div style=\"color: blue; font-weight: bold; font-size: 14px;\">My Label</div>',\n    boxStyle: {\n      background: 'none',\n      border: 'none'\n    },\n    disableAutoPan: true,\n    pixelOffset: new google.maps.Size(-20, -40), // Adjust to position relative to marker\n    position: marker.getPosition(),\n    closeBoxURL: \"\", // Hide close button for labels\n    isHidden: false,\n    pane: 'mapPane', // Renders above markers but below infowindows\n    enableEventPropagation: false\n  };\n  const label = new InfoBox(labelOptions);\n  label.open(map, marker);\n}\n\n// Ensure Google Maps API is loaded with a callback\n// <div id=\"map\" style=\"height: 400px; width: 100%;\"></div>\n// <script async defer src=\"https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY_HERE&callback=initMap\"></script>\n// <script src=\"https://cdn.jsdelivr.net/npm/google-maps-utility-library-v3-infobox@1.1.14/dist/infobox.js\"></script>","lang":"javascript","description":"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."},"warnings":[{"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.","message":"The 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.","severity":"breaking","affected_versions":"All versions"},{"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.","message":"This 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.","severity":"gotcha","affected_versions":"All versions"},{"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.","message":"The 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.","severity":"gotcha","affected_versions":"All versions"},{"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.","message":"Google'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.","severity":"deprecated","affected_versions":"All versions"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"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.","cause":"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.","error":"ReferenceError: InfoBox is not defined"},{"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>`","cause":"The Google Maps JavaScript API object (`google.maps`) was not fully loaded or available when `InfoBox` was initialized or its options were configured.","error":"TypeError: google.maps.Size is not a constructor (or similar for other google.maps objects)"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null,"pypi_latest":null,"cli_name":"","cli_version":null}