{"_id":"@appbaseio/vue-google-maps-community-fork","name":"@appbaseio/vue-google-maps-community-fork","dist-tags":{"latest":"1.0.0-alpha.1"},"versions":{"1.0.0-alpha.1":{"name":"@appbaseio/vue-google-maps-community-fork","description":"Google Maps components for VueJS 3 maintained by the community","version":"1.0.0-alpha.1","private":false,"main":"src/main.js","publishConfig":{"access":"public"},"keywords":["Vue","Vue.js","Google Maps","Vue 3 Google maps"],"bugs":{"url":"https://github.com/NathanAP/vue-google-maps-community-fork/issues"},"scripts":{"build":"node service/commands/build.js","lint":"eslint --ext .js,.vue src"},"devDependencies":{"@babel/core":"^7.19.3","@babel/plugin-transform-runtime":"^7.19.1","@babel/preset-env":"^7.19.4","@babel/runtime":"^7.19.4","@vue/compiler-sfc":"^3.2.40","babel-loader":"^8.2.5","core-js":"^3.25.5","css-loader":"^6.7.1","eslint":"^8.25.0","eslint-config-prettier":"^8.5.0","eslint-formatter-friendly":"^7.0.0","eslint-plugin-prettier":"^4.2.1","eslint-plugin-vue":"^9.6.0","eslint-webpack-plugin":"^3.2.0","mini-css-extract-plugin":"^2.6.1","prettier":"^2.8.1","rimraf":"^3.0.2","style-loader":"^3.3.1","vue":"^3.2.40","vue-eslint-parser":"^9.1.0","vue-loader":"^17.0.0","vue-style-loader":"^4.1.3","webpack":"^5.74.0","webpack-merge":"^5.8.0"},"homepage":"https://vue-google-maps-community-fork.netlify.app","license":"MIT","repository":{"type":"git","url":"git+https://github.com/NathanAP/vue-google-maps-community-fork.git"},"types":"types/index.d.ts","dependencies":{"@appbaseio/googlemaps-markerclusterer":"^1.0.0-alpha.1"},"directories":{"doc":"docs","test":"test"},"author":{"name":"Nathan A Paludo"},"gitHead":"c9db7a26d6aec7511f905f5c74888a7bbc41494f","_id":"@appbaseio/vue-google-maps-community-fork@1.0.0-alpha.1","_nodeVersion":"18.12.1","_npmVersion":"9.1.1","dist":{"integrity":"sha512-YSGZ9FtvD/vNIQjytXnJWKgsVVIRc9pI+405fkKFZMy2uylYB+mBHblcDVPJHB9BAI+fJtvOf9L/jYrgdqVhvg==","shasum":"c4cec3a9fd5d37a58ef97163ab925c0c6251fa45","tarball":"https://registry.npmjs.org/@appbaseio/vue-google-maps-community-fork/-/vue-google-maps-community-fork-1.0.0-alpha.1.tgz","fileCount":35,"unpackedSize":109383,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGyWep2eJD+cUaGBzKfl1IZBwxUu8k66EqciixSEXHG0AiEA7FWLnxRFiMNft+szBddOZvCaZdmU4ONN1LCKlh5fQnk="}]},"_npmUser":{"name":"mohdashraf010897","email":"mohdashraf010897@gmail.com"},"maintainers":[{"name":"savvyshah","email":"shubhamshahrising@gmail.com"},{"name":"siddharthlatest","email":"siddharth@appbase.io"},{"name":"anjuma","email":"kuldepsaxena155@gmail.com"},{"name":"mohdashraf010897","email":"mohdashraf010897@gmail.com"},{"name":"reactivesearch","email":"info@appbase.io"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vue-google-maps-community-fork_1.0.0-alpha.1_1683600121443_0.20448157667763667"},"_hasShrinkwrap":false}},"time":{"created":"2023-05-09T02:42:01.372Z","1.0.0-alpha.1":"2023-05-09T02:42:01.689Z","modified":"2023-05-09T02:42:01.891Z"},"maintainers":[{"name":"savvyshah","email":"shubhamshahrising@gmail.com"},{"name":"siddharthlatest","email":"siddharth@appbase.io"},{"name":"anjuma","email":"kuldepsaxena155@gmail.com"},{"name":"mohdashraf010897","email":"mohdashraf010897@gmail.com"},{"name":"reactivesearch","email":"info@appbase.io"}],"description":"Google Maps components for VueJS 3 maintained by the community","homepage":"https://vue-google-maps-community-fork.netlify.app","keywords":["Vue","Vue.js","Google Maps","Vue 3 Google maps"],"repository":{"type":"git","url":"git+https://github.com/NathanAP/vue-google-maps-community-fork.git"},"author":{"name":"Nathan A Paludo"},"bugs":{"url":"https://github.com/NathanAP/vue-google-maps-community-fork/issues"},"license":"MIT","readme":"## Welcome!\n\nHi! Vue Google Maps Community Fork is a communitary repository. It is a set of the most used Google Maps components made for VueJS 3.\n\n## About this repository\n\nThis repository was forked in October/2022 after the original repository's community decide that it was the best for the project. In [the same discussion](https://github.com/NathanAP/vue-google-maps-community-fork/discussions/1) you will find every information you need about our motivation.\n\nWe have an update! Fawmi answered us, please access the discussion to know more about it!\n\n## Changelog\n\nYou can follow the official changelog [here](https://github.com/NathanAP/vue-google-maps-community-fork/discussions/6)!\n\n## Documentation\n\nYou can find a detailed documentation [here](https://vue-google-maps-community-fork.netlify.app). It will show you how to use every component this library contains and demonstrate some examples for you.\n\nAlso, you can enter in [this discussion](https://github.com/NathanAP/vue-google-maps-community-fork/discussions/9) to talk about or read the documentation changelog.\n\nIt is in our plans to make it better and more detailed, but for now it might help you start using the library.\n\n## Installation\n\nYou can install this library using this command:\n\n```\nnpm install vue-google-maps-community-fork\n```\n\n## Basic usage\n\nTo use this library you will need an API Key. You can learn how to get an API Key [here](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 'vue-google-maps-community-fork'\n\nconst app = createApp(App)\napp\n  .use(VueGoogleMaps, {\n    load: {\n      key: 'YOUR_API_KEY_COMES_HERE',\n    },\n  })\n  .mount('#app')\n```\n\n### If you are configuring your project please notice\n\nYou might be getting the following error:\n\n`Requested module 'fast-deep-equal' does not provide an export named 'default'`\n\nSome notes about this:\n\n- [We are aware of this problem](https://github.com/NathanAP/vue-google-maps-community-fork/issues/4).\n- It doesn't seems that we have control over this, so we hope that it will be fixed soon enough by the responsibles.\n- To avoid it right now, you need to do this configuration in your `vite.config.js`:\n\n```js\n    optimizeDeps: {\n        include: [\n            \"vue-google-maps-community-fork\",\n            \"fast-deep-equal\",\n        ],\n    },\n```\n\n- This **IS NOT** a fix! This is just a hack we are using to avoid the problem.\n- We encourage you to subscribe to that issue to stay in touch with this problem\n\n### Using our components anywhere\n\n```vue\n<template>\n  <GMapMap :center=\"center\" :zoom=\"7\" map-type-id=\"terrain\" style=\"width: 100vw; height: 900px\">\n  </GMapMap>\n</template>\n\n<script>\nexport default {\n  name: 'App',\n  data() {\n    return {\n      center: { lat: 51.093048, lng: 6.84212 },\n    }\n  },\n}\n</script>\n```\n\n## Components\n\n### Markers\n\nIf you need to add markers to the `Map`, add `GMapMarker` as child of `GMapMap` component.\n\n```vue\n<template>\n  <GMapMap :center=\"center\" :zoom=\"7\" map-type-id=\"terrain\" style=\"width: 500px; height: 300px\">\n    <GMapMarker :key=\"marker.id\" v-for=\"marker in markers\" :position=\"marker.position\" />\n  </GMapMap>\n</template>\n<script>\nexport default {\n  name: 'App',\n  data() {\n    return {\n      center: { lat: 51.093048, lng: 6.84212 },\n      markers: [\n        {\n          id: 'dfsldjl3r',\n          position: {\n            lat: 51.093048,\n            lng: 6.84212,\n          },\n        },\n      ],\n    }\n  },\n}\n</script>\n```\n\n### Cluster\n\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\nNote: clusters were not working in the original version of this package. All of the clusters are here because of the community fixes. If you're having trouble with it please [try using the docs](https://vue-google-maps-community-fork.netlify.app/components/cluster.html). Also, feel free to open discussions or issues to get help.\n\n```vue\n<template>\n  <GMapMap :center=\"center\" :zoom=\"7\" map-type-id=\"terrain\" style=\"width: 500px; height: 300px\">\n    <GMapCluster>\n      <GMapMarker\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      />\n    </GMapCluster>\n  </GMapMap>\n</template>\n<script>\nexport default {\n  name: 'App',\n  data() {\n    return {\n      center: { lat: 51.093048, lng: 6.84212 },\n      markers: [\n        {\n          position: {\n            lat: 51.093048,\n            lng: 6.84212,\n          },\n        }, // A long list of clusters\n      ],\n    }\n  },\n}\n</script>\n```\n\n### Heatmap\n\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\n  .use(VueGoogleMaps, {\n    load: {\n      key: 'YOUR_API_KEY_COMES_HERE',\n      libraries: 'visualization',\n    },\n  })\n  .mount('#app')\n```\n\n```vue\n<template>\n  <GMapMap ref=\"myMapRef\" :center=\"center\" :zoom=\"zoom\" style=\"width: 100%; height: 600px\">\n    <GMapHeatmap :data=\"heatData\"></GMapHeatmap>\n  </GMapMap>\n</template>\n<script>\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) => {\n      if (googleMap) {\n        googleMap.$mapPromise.then((map) => {\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</script>\n```\n\nCheckout docs for more component\n\n## Access map object\n\nIf you want to access `google map` object, you can access it by getting ref of the map object.\n\n```vue\n<template>\n  <GMapMap ref=\"myMapRef\" />\n</template>\n<script>\nexport default {\n  mounted() {\n    console.log(this.$refs.myMapRef)\n  },\n}\n</script>\n```\n\n### Map options\n\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\n```vue\n<GMapMap\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>\n</GMapMap>\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\nWarning: this is part of the old documentation and I never used Nuxt, please let me know if it will work properly this way.\n\nIn order to your Nuxt 3 project work properly with this library, you need to add `vue-google-maps-community-fork` to `build.transpile` property in your `nuxt.config.ts`.\n\nAlso, as pointed [here](https://github.com/NathanAP/vue-google-maps-community-fork/issues/14), you will need to add `@googlemaps/markercluster` into it as well for your builded project work properly.\n\nHere is an example:\n\n```ts\nexport default defineNuxtConfig({\n  build: {\n    transpile: ['vue-google-maps-community-fork', '@googlemaps/markercluster'],\n  },\n})\n```\n\nAfter that, you need to configure your plugin `~/plugin/vueGoogleMaps.ts`.\n\n```ts\nimport { defineNuxtPlugin } from '#app'\nimport VueGoogleMaps from 'vue-google-maps-community-fork'\n\nexport default defineNuxtPlugin((nuxtApp) => {\n  nuxtApp.vueApp.use(VueGoogleMaps, {\n    load: {\n      key: 'YOUR_API_KEY_COMES_HERE',\n    },\n  })\n})\n```\n\n## Sponsorship\n\nPlease read [this discussion](https://github.com/NathanAP/vue-google-maps-community-fork/discussions/1) where we talk about sponsorships.\n","readmeFilename":"README.md"}