{"id":20467031,"url":"https://github.com/codekraft-studio/vue-google-map","last_synced_at":"2026-04-30T03:34:35.409Z","repository":{"id":29398616,"uuid":"114530301","full_name":"codekraft-studio/vue-google-map","owner":"codekraft-studio","description":"A Google Map components set for VueJs.","archived":false,"fork":false,"pushed_at":"2023-04-19T18:37:25.000Z","size":3434,"stargazers_count":0,"open_issues_count":6,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-10-06T12:27:44.913Z","etag":null,"topics":["google-maps","vue-components","vuejs"],"latest_commit_sha":null,"homepage":"https://codekraft-studio.github.io/vue-google-map/","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/codekraft-studio.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2017-12-17T11:18:37.000Z","updated_at":"2019-11-16T01:03:47.000Z","dependencies_parsed_at":"2025-01-16T01:27:42.454Z","dependency_job_id":"2916daf6-24e8-4d4c-9fe8-7751fa0def56","html_url":"https://github.com/codekraft-studio/vue-google-map","commit_stats":{"total_commits":92,"total_committers":1,"mean_commits":92.0,"dds":0.0,"last_synced_commit":"3ede05a645f2a174237347b5ef493ae2d6a96a9b"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/codekraft-studio/vue-google-map","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codekraft-studio%2Fvue-google-map","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codekraft-studio%2Fvue-google-map/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codekraft-studio%2Fvue-google-map/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codekraft-studio%2Fvue-google-map/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/codekraft-studio","download_url":"https://codeload.github.com/codekraft-studio/vue-google-map/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codekraft-studio%2Fvue-google-map/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32453952,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-29T22:27:22.272Z","status":"online","status_checked_at":"2026-04-30T02:00:05.929Z","response_time":57,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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-maps","vue-components","vuejs"],"created_at":"2024-11-15T13:26:49.564Z","updated_at":"2026-04-30T03:34:34.069Z","avatar_url":"https://github.com/codekraft-studio.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# vue-google-map\n\n\u003e Google Map components and integration for VueJs\n\n[![NPM version][npm-image]][npm-url] [![Dependency Status][daviddm-image]][daviddm-url]\n\n#### Important disclaimer!\n\nThis package is under active development, I personally use it in various projects that are already in production but this doesn't mean it hasn't bug or it won't change the API structure in the future. Also the documentation is not complete yet, so if is missing something open a request or look at the [source code](https://github.com/codekraft-studio/vue-google-map).\n\n## Installation\n\n```\nnpm i @codekraft-studio/vue-google-map\n```\n\n## Usage\n\nBefore starting you need a Google API key from the [developer console](http://console.developers.google.com/), once you obtained your key, import the module in your application and register it as plugin:\n\n```js\nimport VueGoogleMap from '@codekraft-studio/vue-google-map'\n\nVue.use(VueGoogleMap, {\n\n  // register globally all plugin provided components\n  installComponents: true,\n  \n  // loading options for google map script\n  load: {\n    sync: false,\n    apiKey: 'your-api-key',\n    libraries: ['...'],\n    // other options\n  },\n\n  // called when the google map client is loaded\n  onReady: () =\u003e { }\n  \n})\n```\n\nFor all the specific script loading options checkout Google Developers [website](https://developers.google.com/maps/documentation/javascript/tutorial#Loading_the_Maps_API).\n\nThis module tries to map GoogleMap with Vue components as much as possible so any of the options available on the original GoogleMap class will be available as component props and all the events emitted will be mapped to component events.\n\n## Components\n\nHere a list of the available components that you can use with this plugin, click on them to discover more about the usage and see examples..\n\n* [Marker](#marker)\n* [AutoComplete](#autocomplete)\n* [Circle](#circle)\n* [Rectangle](#rectangle)\n* [Polygon](#polygon)\n* [Polyline](#polyline)\n\n#### Marker\n\nThe Google Map Marker element require to be inside a `\u003cgoogle-map\u003e` component., it support the __default slot__.\n\n```html\n\u003cgoogle-map-marker\n  title=\"String\"\n  label=\"String|Object\"\n  clickable=\"Boolean\"\n  draggable=\"Boolean\"\n  visible=\"Boolean\"\n  z-index=\"Number\"\n  click=\"Function\"\n  dblclick=\"Function\"\n  rightclick=\"Function\"\n  drag=\"Function\"\n  dragstart=\"Function\"\n  dragend=\"Function\"\n  mouseup=\"Function\"\n  mousedown=\"Function\"\n  mouseover=\"Function\"\n  mouseout=\"Function\"\n\u003e\u003c/google-map-marker\u003e\n```\n\n#### AutoComplete\n\nThe AutoComplete component does not require to be inside a `\u003cgoogle-map\u003e` component, it can be used anyway inside your app. It display an input and optionally the autocomplete controls, when a place is selected the __place-changed__ event is triggered with the result.\n\n```html\n\u003cgoogle-map-autocomplete\n  model=\"String\"\n  types=\"Array\"\n  controls=\"Boolean\"\n  update-map=\"Boolean\"\n  place-changed=\"Function\"\n\u003e\u003c/google-map-autocomplete\u003e\n```\n\n---\n\n## Development\n\nIf you want to contribute in the development clone or fork the repository, than install all the dependencies.\n\n```\nnpm install\n```\n\nCreate a `.env` file containing a key called __VUE_APP_GOOGLE_APIKEY__ with as value a valid API key obtained from Google Developers website.\n\n```env\nVUE_APP_GOOGLE_APIKEY=my-apy-key\n```\n\nFinally start the project in development mode with the command `npm run dev` it will start the demo project where are the features are showcased and live tested.\n\n## Contributing\n\n1.  Create an issue and describe your idea\n2.  Fork the project (\u003chttps://github.com/codekraft-studio/generator-wordpress-plugin/fork\u003e)\n3.  Create your feature branch (`git checkout -b my-new-feature`)\n4.  Commit your changes (`git commit -am 'Add some feature'`)\n5.  Publish the branch (`git push origin my-new-feature`)\n6.  Create a new Pull Request\n\n---\n\n## License\n\nThis package is released under [MIT License](./LICENSE).\n\n[npm-image]: https://badge.fury.io/js/%40codekraft-studio%2Fvue-google-map.svg\n[npm-url]: https://npmjs.org/package/@codekraft-studio/vue-google-map\n[daviddm-image]: https://david-dm.org/codekraft-studio/vue-google-map.svg?theme=shields.io\n[daviddm-url]: https://david-dm.org/codekraft-studio/vue-google-map\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcodekraft-studio%2Fvue-google-map","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcodekraft-studio%2Fvue-google-map","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcodekraft-studio%2Fvue-google-map/lists"}