{"id":14108778,"url":"https://github.com/fawmi/vue-google-maps","last_synced_at":"2025-04-12T15:36:21.648Z","repository":{"id":37998982,"uuid":"304654583","full_name":"fawmi/vue-google-maps","owner":"fawmi","description":"Reactive Vue 3 components for Google maps","archived":false,"fork":false,"pushed_at":"2024-03-01T15:12:24.000Z","size":1162,"stargazers_count":203,"open_issues_count":73,"forks_count":103,"subscribers_count":5,"default_branch":"main","last_synced_at":"2025-04-03T15:09:22.892Z","etag":null,"topics":["googlemaps","markers","vue","vuejs","vuejs3"],"latest_commit_sha":null,"homepage":"https://vue-map.netlify.app","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/fawmi.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","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":"2020-10-16T14:42:00.000Z","updated_at":"2025-03-14T21:02:09.000Z","dependencies_parsed_at":"2024-06-18T13:53:15.309Z","dependency_job_id":null,"html_url":"https://github.com/fawmi/vue-google-maps","commit_stats":{"total_commits":160,"total_committers":12,"mean_commits":"13.333333333333334","dds":0.38125,"last_synced_commit":"7e482b9b1d73ccfe3dab3cb404bf14e02e5ed3c9"},"previous_names":[],"tags_count":3,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fawmi%2Fvue-google-maps","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fawmi%2Fvue-google-maps/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fawmi%2Fvue-google-maps/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fawmi%2Fvue-google-maps/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/fawmi","download_url":"https://codeload.github.com/fawmi/vue-google-maps/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248590315,"owners_count":21129783,"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":["googlemaps","markers","vue","vuejs","vuejs3"],"created_at":"2024-08-14T10:01:46.246Z","updated_at":"2025-04-12T15:36:21.622Z","avatar_url":"https://github.com/fawmi.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"# Vue 3 Google maps Components\n\nSet of mostly used Google Maps components for Vue.js.\n\n#### Why this library exists?\nWe heavily use Google Maps in our projects, so I wanted to have a well maintained Google Maps library.\n\n## Documentation\nCheckout [vue-map.netlify.app](https://vue-map.netlify.app) for a detailed documentation or [codesandbox for an example](https://codesandbox.io/s/vue-3-google-maps-ygpr4?file=/src/main.js)\n\n## Installation\nYou can install it using npm\n```\nnpm install -S @fawmi/vue-google-maps\n```\n\n## Basic usage\nYou need an API Key. Learn how to [get an Api key ](https://developers.google.com/maps/documentation/javascript/get-api-key).\n\n### Configure Vue to use the Components\n\nIn your `main.js`\n\n```js\nimport { createApp } from 'vue'\nimport  VueGoogleMaps from '@fawmi/vue-google-maps'\n\nconst app = createApp(App);\napp.use(VueGoogleMaps, {\n    load: {\n        key: 'YOUR_API_KEY_COMES_HERE',\n    },\n}).mount('#app')\n\n```\n### Use it anywhere in your components\n\n```vue\n\u003ctemplate\u003e\n  \u003cGMapMap\n      :center=\"center\"\n      :zoom=\"7\"\n      map-type-id=\"terrain\"\n      style=\"width: 100vw; height: 900px\"\n  \u003e\n  \u003c/GMapMap\u003e\n\u003c/template\u003e\n\n\u003cscript \u003e\nexport default {\n  name: 'App',\n  data() {\n    return {\n      center: {lat: 51.093048, lng: 6.842120},\n    }\n  }\n}\n\u003c/script\u003e\n```\n## Components\n\n### Markers\n\nIf you need to add markers to the `Map`, add `GMapMarker` as child of `GMapMap` component.\n```vue\n\u003ctemplate\u003e\n  \u003cGMapMap\n      :center=\"center\"\n      :zoom=\"7\"\n      map-type-id=\"terrain\"\n      style=\"width: 500px; height: 300px\"\n  \u003e\n    \u003cGMapMarker\n        :key=\"marker.id\"\n        v-for=\"marker in markers\"\n        :position=\"marker.position\"\n    /\u003e\n  \u003c/GMapMap\u003e\n\u003c/template\u003e\n\u003cscript\u003e\nexport default {\n  name: 'App',\n  data() {\n    return {\n      center: {lat: 51.093048, lng: 6.842120},\n      markers: [\n        {\n          id: 'dfsldjl3r',\n          position: {\n            lat: 51.093048, lng: 6.842120\n          },\n        }\n      ]\n    }\n  }\n}\n\u003c/script\u003e\n```\n\n### Cluster\nIf you have too many markers, it is helpful to cluster markers. You can easily cluster markers by wrapping your markers with `GMapCluster` component.\n\n\n```vue\n\u003ctemplate\u003e\n  \u003cGMapMap\n      :center=\"center\"\n      :zoom=\"7\"\n      map-type-id=\"terrain\"\n      style=\"width: 500px; height: 300px\"\n  \u003e\n    \u003cGMapCluster\u003e\n      \u003cGMapMarker\n          :key=\"index\"\n          v-for=\"(m, index) in markers\"\n          :position=\"m.position\"\n          :clickable=\"true\"\n          :draggable=\"true\"\n          @click=\"center=m.position\"\n      /\u003e\n    \u003c/GMapCluster\u003e\n  \u003c/GMapMap\u003e\n\u003c/template\u003e\n\u003cscript\u003e\nexport default {\n  name: 'App',\n  data() {\n    return {\n      center: {lat: 51.093048, lng: 6.842120},\n      markers: [\n        {\n          position: {\n            lat: 51.093048, lng: 6.842120\n          },\n        }\n        , // Along list of clusters\n      ]\n    }\n  }\n}\n\u003c/script\u003e\n```\n\n### Heatmap\nIf you need to add heatmap layer to the Map, add visualization library in load config and add GMapHeatmap as child of GMapMap component.\n\n```js\nimport { createApp } from 'vue'\nimport  VueGoogleMaps from '@fawmi/vue-google-maps'\n\nconst app = createApp(App);\napp.use(VueGoogleMaps, {\n  load: {\n    key: 'YOUR_API_KEY_COMES_HERE',\n    libraries: \"visualization\"\n  },\n}).mount('#app')\n\n```\n\n```vue\n\u003ctemplate\u003e\n  \u003cGMapMap\n    ref=\"myMapRef\"\n    :center=\"center\"\n    :zoom=\"zoom\"\n    style=\"width: 100%; height: 600px\"\n  \u003e\n    \u003cGMapHeatmap :data=\"heatData\"\u003e\u003c/GMapHeatmap\u003e\n  \u003c/GMapMap\u003e\n\u003c/template\u003e\n\u003cscript\u003e\nexport default {\n  name: 'App',\n  setup() {\n    const center = {lat: 52.2985593, lng: 104.2455337}\n    const zoom = 12\n    const myMapRef = ref();\n    const heatData = ref([])\n\n    watch(myMapRef, googleMap =\u003e {\n      if (googleMap) {\n        googleMap.$mapPromise.then(map=\u003e {\n          heatData.value = [\n            {location: new google.maps.LatLng({lat: 52.2985593, lng: 104.2455337})},\n          ];\n        })\n      }\n    });\n\n    return {\n      center,\n      zoom,\n      heatData,\n      myMapRef\n    }\n  },\n}\n\u003c/script\u003e\n```\n\nCheckout docs for more component\n\n## Access map object\nIf you want to access `google map` object, you can access it by getting ref of the map object.\n```vue\n\u003ctemplate\u003e\n  \u003cGMapMap ref=\"myMapRef\" /\u003e\n\u003c/template\u003e\n\u003cscript\u003e\nexport default {\n  mounted() {\n    console.log(this.$refs.myMapRef)\n  }\n}\n\u003c/script\u003e\n```\n### Map options\nYou can pass Map options using options property:\n\nSee [MapOptions](https://developers.google.com/maps/documentation/javascript/reference/map#MapOptions) for a complete list of available options.\n ```vue\n \u003cGMapMap\n  :options=\"{\n    zoomControl: true,\n    mapTypeControl: false,\n    scaleControl: false,\n    streetViewControl: false,\n    rotateControl: false,\n    fullscreenControl: true,\n    disableDefaultUi: false\n  }\"\n\u003e\n\u003c/GMapMap\u003e\n```\n\n## More components\n\nMany other components are also supported. Checkout [docs](https://vue-map.netlify.app) for more.\n\n## Nuxt 3 usage\n\nFirst add `@fawmi/vue-google-maps` to `build.transpile` property in your `nuxt.config.ts`.\n\n ```ts\nexport default defineNuxtConfig({\n  build: {\n    transpile: ['@fawmi/vue-google-maps']\n  },\n})\n ```\n\nThen create a plugin `~/plugin/vueGoogleMaps.ts`.\n\n```ts\nimport { defineNuxtPlugin } from '#app'\nimport  VueGoogleMaps from '@fawmi/vue-google-maps'\n\nexport default defineNuxtPlugin((nuxtApp) =\u003e {\n  nuxtApp.vueApp.use(VueGoogleMaps, {\n    load: {\n      key: 'YOUR_GOOGLE_API_KEY',\n    },\n  })\n})\n```\n\n\n## Contributions\nThe best way to contribute is to report reproducible bugs, but feature requests and improvement suggestions are always welcome too. And definitely bug fixes and PR are welcome.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffawmi%2Fvue-google-maps","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffawmi%2Fvue-google-maps","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffawmi%2Fvue-google-maps/lists"}