{"library":"load-google-maps-api","title":"Google Maps JavaScript API Loader (Promise-based)","description":"The `load-google-maps-api` package (current stable version 2.0.2) provides a lightweight, promise-returning utility for dynamically loading the Google Maps JavaScript API. It modernizes the traditional API loading process by abstracting away the requirement for a global callback function, which can be cumbersome and less compatible with contemporary JavaScript bundlers like Webpack or Browserify. Instead, this module returns a Promise that resolves with the `google.maps` object upon successful API load, or rejects if a configurable timeout is exceeded. Developers can pass an options object to configure various aspects of the API, including the API key, desired language, region, specific API version, and supplemental libraries, offering a cleaner and more modular approach to integrating Google Maps into client-side web applications. Its release cadence is generally stable, with updates typically addressing Google Maps API changes or minor enhancements.","language":"javascript","status":"active","last_verified":"Sun Apr 19","install":{"commands":["npm install load-google-maps-api"],"cli":null},"imports":["import loadGoogleMapsApi from 'load-google-maps-api';","loadGoogleMapsApi().then(googleMaps => { /* use googleMaps */ });","import loadGoogleMapsApi from 'load-google-maps-api';\nloadGoogleMapsApi({ key: 'YOUR_API_KEY', libraries: ['places'] });"],"auth":{"required":false,"env_vars":[]},"quickstart":{"code":"import loadGoogleMapsApi from 'load-google-maps-api';\n\nconst GOOGLE_MAPS_API_KEY = process.env.GOOGLE_MAPS_API_KEY ?? ''; // Always use environment variables for keys\n\nif (!document.getElementById('map-container')) {\n  const mapDiv = document.createElement('div');\n  mapDiv.id = 'map-container';\n  mapDiv.style.width = '100%';\n  mapDiv.style.height = '400px';\n  document.body.appendChild(mapDiv);\n}\n\nloadGoogleMapsApi({\n    key: GOOGLE_MAPS_API_KEY,\n    v: 'weekly', // Use 'weekly' for latest features, 'release' for stable\n    language: 'en',\n    region: 'US',\n    libraries: ['geometry', 'places'] // Example of loading additional libraries\n  })\n  .then(function (googleMaps) {\n    const map = new googleMaps.Map(document.getElementById('map-container'), {\n      center: {\n        lat: 40.7484405,\n        lng: -73.9944191\n      },\n      zoom: 12,\n      mapId: 'YOUR_MAP_ID' // Recommended for customized cloud-based maps\n    });\n    console.log('Google Maps API loaded successfully and map initialized.', map);\n    // You can now interact with the 'map' object or 'googleMaps' global object\n  })\n  .catch(function (error) {\n    console.error('Failed to load Google Maps API:', error);\n    // Handle errors, e.g., display a fallback message\n  });","lang":"javascript","description":"This code demonstrates how to load the Google Maps API using a Promise and initialize a basic map with an API key and additional libraries. It also includes basic error handling.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}