{"id":18034702,"url":"https://github.com/yuanqing/load-google-maps-api","last_synced_at":"2025-04-05T04:12:56.173Z","repository":{"id":53730626,"uuid":"48869924","full_name":"yuanqing/load-google-maps-api","owner":"yuanqing","description":":earth_asia: A lightweight Promise-returning helper for loading the Google Maps JavaScript API","archived":false,"fork":false,"pushed_at":"2021-03-17T14:09:59.000Z","size":268,"stargazers_count":172,"open_issues_count":3,"forks_count":22,"subscribers_count":3,"default_branch":"main","last_synced_at":"2025-03-29T03:09:01.926Z","etag":null,"topics":["google","google-maps","google-maps-api","javascript","promise"],"latest_commit_sha":null,"homepage":"https://codepen.io/lyuanqing/pen/YeYBrN","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/yuanqing.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2016-01-01T05:00:25.000Z","updated_at":"2025-02-02T04:22:05.000Z","dependencies_parsed_at":"2022-08-30T01:51:13.877Z","dependency_job_id":null,"html_url":"https://github.com/yuanqing/load-google-maps-api","commit_stats":null,"previous_names":[],"tags_count":16,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yuanqing%2Fload-google-maps-api","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yuanqing%2Fload-google-maps-api/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yuanqing%2Fload-google-maps-api/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yuanqing%2Fload-google-maps-api/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/yuanqing","download_url":"https://codeload.github.com/yuanqing/load-google-maps-api/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247284951,"owners_count":20913704,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["google","google-maps","google-maps-api","javascript","promise"],"created_at":"2024-10-30T11:13:28.414Z","updated_at":"2025-04-05T04:12:56.151Z","avatar_url":"https://github.com/yuanqing.png","language":"JavaScript","readme":"# load-google-maps-api [![npm Version](https://badgen.net/npm/v/load-google-maps-api)](https://www.npmjs.org/package/load-google-maps-api) [![Build Status](https://badgen.net/travis/yuanqing/load-google-maps-api?label=build)](https://travis-ci.org/yuanqing/load-google-maps-api) [![Bundle Size](https://badgen.net/bundlephobia/minzip/load-google-maps-api)](https://bundlephobia.com/result?p=load-google-maps-api)\n\n\u003e A lightweight Promise-returning helper for loading the [Google Maps JavaScript API](https://developers.google.com/maps/documentation/javascript/)\n\n- The Promise’s fulfilled callback is passed the `google.maps` object\n- Optionally set a timeout, an API key, the language, [and more](#loadgooglemapsapioptions)\n\n## Usage\n\n\u003e [**Editable demo (CodePen)**](https://codepen.io/lyuanqing/pen/YeYBrN)\n\n```js\nconst loadGoogleMapsApi = require('load-google-maps-api')\n\nloadGoogleMapsApi().then(function (googleMaps) {\n  new googleMaps.Map(document.querySelector('.map'), {\n    center: {\n      lat: 40.7484405,\n      lng: -73.9944191\n    },\n    zoom: 12\n  })\n}).catch(function (error) {\n  console.error(error)\n})\n```\n\n*N.B.* Just like the Google Maps API itself, this module is client-side only.\n\n## Motivation\n\n[Without this module](https://developers.google.com/maps/documentation/javascript/tutorial#Loading_the_Maps_API), you would need to specify a named *global* callback, and pass said callback’s name as a parameter in the `script` tag’s `src`. For example:\n\n```html\n\u003cscript\u003e\nwindow.googleMapsOnLoad = function () {\n  // `window.google.maps` available here\n}\n\u003c/script\u003e\n\u003cscript async defer src=\"https://maps.googleapis.com/maps/api/js?callback=googleMapsOnLoad\"\u003e\u003c/script\u003e\n```\n\nThis module abstracts this ceremony away, and fits better with modern bundlers like [Browserify](http://browserify.org/) or [Webpack](https://webpack.github.io/).\n\n## API\n\n```js\nconst loadGoogleMapsApi = require('load-google-maps-api')\n```\n\n### loadGoogleMapsApi([options])\n\nReturns a [Promise](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise).\n\n- **Fulfilled** if loading was successful. The fulfilled callback is passed the `google.maps` object. If `loadGoogleMapsApi` is called multiple times on a page, the fulfilled callback will be passed the previously-loaded `google.maps` object.\n- **Rejected** if we weren’t able to load the Google Maps API after `options.timeout`.\n\nSee [Usage](#usage).\n\n`options` is an optional object literal:\n\n  Key | Description | Default\n  :--|:--|:--\n  `apiUrl` | The Google Maps API `script` tag URL | `'https://maps.googleapis.com/maps/api/js'`\n  `channel` | [Client usage reporting channel](https://developers.google.com/maps/premium/reports/usage-reports#channels) | `undefined`\n  `client` | [Client ID](https://developers.google.com/maps/documentation/javascript/get-api-key#specifying-a-client-id-when-loading-the-api) | `undefined`\n  `key` | [Your API key](https://developers.google.com/maps/documentation/javascript/get-api-key#step-2-add-the-api-key-to-your-application) | `undefined`\n  `language` | [Language](https://developers.google.com/maps/documentation/javascript/localization#Language) | `undefined`\n  `libraries` | [Supplemental libraries to load](https://developers.google.com/maps/documentation/javascript/libraries) | `[]`\n  `region` | [Region](https://developers.google.com/maps/documentation/javascript/localization#Region) | `undefined`\n  `timeout` | Time in milliseconds before rejecting the Promise | `10000`\n  `v` | [API version](https://developers.google.com/maps/documentation/javascript/versions) | `undefined`\n\n## Installation\n\n```sh\n$ yarn add load-google-maps-api\n```\n\n## License\n\n[MIT](LICENSE.md)\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyuanqing%2Fload-google-maps-api","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fyuanqing%2Fload-google-maps-api","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyuanqing%2Fload-google-maps-api/lists"}