{"id":20393510,"url":"https://github.com/chantouchsek/vuejs-google-maps","last_synced_at":"2025-06-22T03:34:41.841Z","repository":{"id":34305734,"uuid":"176776599","full_name":"chantouchsek/vuejs-google-maps","owner":"chantouchsek","description":"Google maps components for vuejs and nuxtjs.","archived":false,"fork":false,"pushed_at":"2023-03-28T00:59:34.000Z","size":3062,"stargazers_count":25,"open_issues_count":24,"forks_count":13,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-05-16T08:12:33.459Z","etag":null,"topics":["autocomplete","circle","google","google-maps","google-maps-api","map","marker","placedetails","polygon","polyline","rectangle","vuejs"],"latest_commit_sha":null,"homepage":"https://google-maps.chantouch.me/#/","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/chantouchsek.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","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},"funding":{"patreon":"chantouch"}},"created_at":"2019-03-20T16:42:25.000Z","updated_at":"2024-11-25T10:00:54.000Z","dependencies_parsed_at":"2024-06-18T20:05:20.447Z","dependency_job_id":"bd16ee8e-249b-4c70-8b6f-d03bf493a299","html_url":"https://github.com/chantouchsek/vuejs-google-maps","commit_stats":{"total_commits":99,"total_committers":9,"mean_commits":11.0,"dds":0.4949494949494949,"last_synced_commit":"9de714fce16db8f5477a6ee7612d5cb533432eae"},"previous_names":[],"tags_count":8,"template":false,"template_full_name":null,"purl":"pkg:github/chantouchsek/vuejs-google-maps","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chantouchsek%2Fvuejs-google-maps","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chantouchsek%2Fvuejs-google-maps/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chantouchsek%2Fvuejs-google-maps/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chantouchsek%2Fvuejs-google-maps/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/chantouchsek","download_url":"https://codeload.github.com/chantouchsek/vuejs-google-maps/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chantouchsek%2Fvuejs-google-maps/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":260363629,"owners_count":22997955,"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":["autocomplete","circle","google","google-maps","google-maps-api","map","marker","placedetails","polygon","polyline","rectangle","vuejs"],"created_at":"2024-11-15T03:49:09.119Z","updated_at":"2025-06-22T03:34:36.827Z","avatar_url":"https://github.com/chantouchsek.png","language":"JavaScript","funding_links":["https://patreon.com/chantouch"],"categories":[],"sub_categories":[],"readme":"# vuejs-google-map\n\n\u003e Google Map components and integration for VueJs\n\n[![NPM version][npm-image]][npm-url] ![npm](https://img.shields.io/npm/dm/vuejs-google-maps?style=flat-square)\n[![npm](https://img.shields.io/npm/dt/vuejs-google-maps.svg?style=flat-square)](https://npmjs.com/package/vuejs-google-maps)\n\nThis package is under active development, the documentation is not complete yet, so if is missing something open a\nrequest or look at the [source code](https://github.com/chantouchsek/vuejs-google-map).\n\n## Installation\n\n```\nnpm i vuejs-google-maps\nyarn add vuejs-google-maps\n```\n\n## Usage\n\nBefore starting you need a Google API key from the [developer console](http://console.developers.google.com/), once you\nobtained your key, import the module in your application and register it as plugin:\n\n```js\nimport Vue from 'vue'\nimport VueGoogleMap from 'vuejs-google-maps'\nimport 'vuejs-google-maps/dist/vuejs-google-maps.css'\n\nVue.use(VueGoogleMap, {\n    load: {\n        apiKey: 'your-api-key',\n        libraries: [/* rest of libraries */]\n    }\n})\n```\n\n## ♻️ Usage with Nuxt.js\n\nAdd `vuejs-google-maps/nuxt` to modules section of `nuxt.config.js`\n\n```js\nexport default {\n    modules: [\n        // Simple usage\n        'vuejs-google-maps/nuxt',\n        // Passing options in module configuration\n        ['vuejs-google-maps/nuxt', {apiKey: 'xxxxxx', libraries: [/* rest of libraries */]}]\n    ],\n    // Passing options in module top level configuration\n    googleMaps: {apiKey: 'xxxxxx', libraries: [/* rest of libraries */]}\n}\n```\n\nThis module tries to map GoogleMap with Vue components as much as possible so any of the options available on the\noriginal GoogleMap class will be available as component props and all the events emitted will be mapped to component\nevents.\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\nusage and see examples. If you are interested to see a __real life use__ checkout\nthe [example](https://github.com/chantouchsek/vuejs-google-maps/tree/master/demo) folder which contains the source code\nof the [website](https://google-maps.chantouch.me).\n\n* [Marker](#marker)\n* [AutoComplete](#autocomplete)\n* [PlaceDetails](#placedetails)\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```vue\n\n\u003ctemplate\u003e\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\n\u003c/template\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\napp. It display an input and optionally the autocomplete controls, when a place is selected the __place-changed__ event\nis triggered with the result.\n\n```vue\n\n\u003ctemplate\u003e\n  \u003cgoogle-map-autocomplete\n      model=\"String\"\n      types=\"Array\"\n      controls=\"Boolean\"\n      update-map=\"Boolean\"\n      place-changed=\"Function\"\n  /\u003e\n\u003c/template\u003e\n```\n\n### Autocomplete props\n - Example:\n```js\nconst center = { lat: 50.064192, lng: -130.605469 };\n// Create a bounding box with sides ~10km away from the center point\nconst defaultBounds = {\n  north: center.lat + 0.1,\n  south: center.lat - 0.1,\n  east: center.lng + 0.1,\n  west: center.lng - 0.1,\n};\nconst options = {\n  bounds: defaultBounds,\n  componentRestrictions: { country: \"us\" },\n  fields: [\"address_components\", \"geometry\", \"icon\", \"name\"],\n  strictBounds: false,\n  types: [\"establishment\"],\n};\n```\n\n````vue\n\n\u003ctemplate\u003e\n  \u003cdiv class=\"info-windows\"\u003e\n    \u003cgoogle-map id=\"map\" ref=\"Map\"\u003e\n      \u003cgoogle-map-marker\n          :key=\"index\"\n          v-for=\"(infoWindow, index) in infoWindowsList\"\n          :position=\"infoWindow.position\"\n          :key=\"index\"\n          @click=\"toggleInfoWindow(infoWindow)\"\n      /\u003e\n      \u003cgoogle-map-infowindow\n          :position=\"infoWIndowContext.position\"\n          :show.sync=\"showInfo\"\n          :options=\"{maxWidth: 300}\"\n          @info-window-clicked=\"infoClicked\"\n      \u003e\n        \u003ch4\u003e{{infoWindowContext.title}}\u003c/h4\u003e\n        \u003cp\u003e{{infoWindowContext.description}}\u003c/p\u003e\n      \u003c/google-map-infowindow\u003e\n    \u003c/google-map\u003e\n  \u003c/div\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\nimport cities from '~/assets/cities.json'\n\nexport default {\n  data() {\n    return {\n      showInfo: false,\n      infoWindowContext: {\n        position: {\n          lat: 44.2899,\n          lng: 11.8774\n        }\n      },\n      infoWindowsList: cities\n    }\n  },\n  methods: {\n    toggleInfoWindow(context) {\n      this.infoWIndowContext = context\n      this.showInfo = true\n    },\n    infoClicked(context) {\n      console.log(context)\n    }\n  }\n}\n\u003c/script\u003e\n````\n\n## Added\n\n### @info-window-clicked($event) to info-windows\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\nyarn install\n```\n\nCreate a `.env` file containing the __VUE_APP_GOOGLE_APIKEY__ variable with your valid API key:\n\n```env\nVUE_APP_GOOGLE_APIKEY=my-apy-key\n```\n\n---\n\n## License\n\nThis package is under the [MIT License](LICENSE).\n\n[npm-image]: https://badge.fury.io/js/vuejs-google-maps.svg\n\n[npm-url]: https://npmjs.org/package/vuejs-google-maps\n\n[daviddm-image]: https://david-dm.org/chantouchsek/vuejs-google-maps.svg?theme=shields.io\n\n[daviddm-url]: https://david-dm.org/chantouchsek/vuejs-google-maps.svg\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fchantouchsek%2Fvuejs-google-maps","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fchantouchsek%2Fvuejs-google-maps","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fchantouchsek%2Fvuejs-google-maps/lists"}