{"_id":"@busability/vue2-google-maps","_rev":"3-751d50917a41e862f415748ad9ac9854","name":"@busability/vue2-google-maps","dist-tags":{"latest":"1.0.0"},"versions":{"0.0.1":{"name":"@busability/vue2-google-maps","version":"0.0.1","description":"This is a google map component for Vue.js, updated for Vue 2 compatibility","main":"dist/main.js","scripts":{"build":"npm run build:babel && npm run build:webpack","build:babel":"shx mkdir -p dist && shx rm -r dist && cross-env BUILD_DEV=1 babel src -D --out-dir dist && echo {} > dist/.babelrc","build:webpack":"cross-env NODE_ENV=production webpack --progress --hide-modules","build:examples":"npm run build:examples:before && npm run build:examples:webpack","build:examples:before":"npm run build && shx cp dist/vue-google-maps.js examples","build:examples:webpack":"cd examples && cross-env NODE_ENV=production webpack","lab:tests":"lab -T test/test-setup/babel-transform.js -l -S test","lint":"eslint --ext .vue,.js src && eslint --ext .vue,.html,.js test","lint:fix":"eslint --fix --ext .vue,.js src && eslint --ext .vue,.html,.js test","test":"npm run lab:tests && npm run lint","deploy":"npm run build:examples && gh-pages -d examples","prepare":"npm run build"},"repository":{"type":"git","url":"git+https://github.com/xkjyeah/vue-google-maps.git"},"bugs":{"url":"https://github.com/xkjyeah/vue-google-maps/issues"},"homepage":"https://github.com/xkjyeah/vue-google-maps#readme","dependencies":{"marker-clusterer-plus":"^2.1.4"},"peerDependencies":{"vue":"^2.6.10"},"devDependencies":{"@babel/cli":"^7.6.4","@babel/core":"^7.6.4","@babel/polyfill":"^7.6.0","@babel/preset-env":"^7.6.3","@hapi/lab":"^20.4.0","babel-eslint":"^10.0.3","babel-loader":"^8.0.6","babel-plugin-minify-dead-code-elimination":"^0.5.1","babel-plugin-transform-inline-environment-variables":"^0.4.3","consolidate":"^0.15.1","cross-env":"^6.0.3","css-loader":"^3.2.0","eslint":"^6.5.1","eslint-config-standard":"^14.1.0","eslint-plugin-html":"^6.0.0","eslint-plugin-import":"^2.18.2","eslint-plugin-node":"^10.0.0","eslint-plugin-promise":"^4.2.1","eslint-plugin-standard":"^4.0.1","eslint-plugin-vue":"^5.2.3","file-loader":"^4.2.0","gh-pages":"^2.1.1","json-loader":"^0.5.7","optimize-css-assets-webpack-plugin":"^5.0.3","puppeteer":"^1.20.0","raw-loader":"^3.1.0","shx":"^0.3.2","style-loader":"^1.0.0","template-html-loader":"1.0.0","uglifyjs-webpack-plugin":"^2.2.0","vue":"^2.6.10","vue-loader":"^15.7.1","vue-router":"^3.1.3","vue-template-compiler":"^2.6.10","webpack":"^4.41.1","webpack-cli":"^3.3.9","yaml-loader":"^0.5.0"},"author":{"name":"Daniel Sim, Guillaume Leclerc"},"license":"MIT","gitHead":"965c05db4a68634d69b3c30b98ee23725ba7a686","_id":"@busability/vue2-google-maps@0.0.1","_nodeVersion":"16.4.0","_npmVersion":"7.18.1","dist":{"integrity":"sha512-RYDBqBVw5NAz0r6U/9AF7q+iVCuJtJlh8ehDI5IZgJNg3AfmH8/ByWOOOBlTdpjARL7xeW6ES6K9dT2fesiVGw==","shasum":"845a0afc02382f67822fc48b2efc57c5cf67085e","tarball":"https://registry.npmjs.org/@busability/vue2-google-maps/-/vue2-google-maps-0.0.1.tgz","fileCount":138,"unpackedSize":2233406,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg4CR1CRA9TVsSAnZWagAANakP/iZ7INaeupcwUwIDcdEY\nYF7XQxJRU5bUoGK05QMIH7BXU4vannqgfq+SwPiolEDmLeRQK+HySkcqfNIB\nS4zeuJXUPI9/NTwpo582i/cYkSPf/HnY0D3LuoYcmNuZ6yf4dZLeCEmapZNo\nQkofBfC3ZSVjbIYaLb+5zE7c0EXtms8TsjBiWUuiKlxa4pC2Az3qp/sf8GW+\nLhDBHzVTMChOxUhdG8gLqVscD2sJCyioKJEAKKoa6VsoDR99Z7wcMI6kV7eO\noOHMu4W3Q+cJR+/URgZzgBpsOaCYAwEriDe1Viu7wVMRSLzaQOMV7/yDnMcf\noVFzwp0IhLYj9LBk7QQeZjfdSh2ZTzIdDNWVpAiTt6DX5/8r/hYQfcoA6wsF\nd5sKnSAIthFzfxVRv+w4rNrm2wlp+aYNmY6ntgkHoE/uu1SvTRf4Hz/OzKcc\nY5OSHHBMS7saMPKRqu6i4T+mXru0Wq7OAtYJga/92PXDIAWbR0bbgi4IMMFO\nseef4GooPCDBk9NvTMyd73/F44ADnI6uZ8xvNDuN8lahN5fQPSlXzjNrYa7A\n6VxvxJ7hghlKZDFAfrrOfViAjbh+33QN941Qo+ucbmRbC6RLhQJXmdrSsLAy\n5zNZh0esfNPQuiajRcsQZdHO5x+IYY7FvB99ZoTq8aSrqYmRpCzT9RQYl4y5\nhTQ4\r\n=3Jj4\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCHV33fdO5S1RoNIPICEe9WADnLCquNx8zSDqNr9+GPnQIgO8R1y7aHS1GBrpMQmLdjL92XQVoo6KUL06VGWEpKGhk="}]},"_npmUser":{"name":"paunovic","email":"paun992@hotmail.com"},"directories":{},"maintainers":[{"name":"paunovic","email":"paun992@hotmail.com"},{"name":"iaksentijevic.busability","email":"ivan@busability.com"},{"name":"branimir","email":"branimir.momcilovic@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vue2-google-maps_0.0.1_1625302132535_0.14757386428955144"},"_hasShrinkwrap":false},"0.0.2":{"name":"@busability/vue2-google-maps","version":"0.0.2","description":"This is a google map component for Vue.js, updated for Vue 2 compatibility","main":"dist/main.js","scripts":{"build":"npm run build:babel && npm run build:webpack","build:babel":"shx mkdir -p dist && shx rm -r dist && cross-env BUILD_DEV=1 babel src -D --out-dir dist && echo {} > dist/.babelrc","build:webpack":"cross-env NODE_ENV=production webpack --progress --hide-modules","build:examples":"npm run build:examples:before && npm run build:examples:webpack","build:examples:before":"npm run build && shx cp dist/vue-google-maps.js examples","build:examples:webpack":"cd examples && cross-env NODE_ENV=production webpack","lab:tests":"lab -T test/test-setup/babel-transform.js -l -S test","lint":"eslint --ext .vue,.js src && eslint --ext .vue,.html,.js test","lint:fix":"eslint --fix --ext .vue,.js src && eslint --ext .vue,.html,.js test","test":"npm run lab:tests && npm run lint","deploy":"npm run build:examples && gh-pages -d examples","prepare":"npm run build"},"repository":{"type":"git","url":"git+https://github.com/Busability/vue2-google-maps.git"},"bugs":{"url":"https://github.com/Busability/vue2-google-maps/issues"},"homepage":"https://github.com/Busability/vue2-google-maps#readme","dependencies":{"marker-clusterer-plus":"^2.1.4"},"peerDependencies":{"vue":"^2.6.10"},"devDependencies":{"@babel/cli":"^7.6.4","@babel/core":"^7.6.4","@babel/polyfill":"^7.6.0","@babel/preset-env":"^7.6.3","@hapi/lab":"^20.4.0","babel-eslint":"^10.0.3","babel-loader":"^8.0.6","babel-plugin-minify-dead-code-elimination":"^0.5.1","babel-plugin-transform-inline-environment-variables":"^0.4.3","consolidate":"^0.15.1","cross-env":"^6.0.3","css-loader":"^3.2.0","eslint":"^6.5.1","eslint-config-standard":"^14.1.0","eslint-plugin-html":"^6.0.0","eslint-plugin-import":"^2.18.2","eslint-plugin-node":"^10.0.0","eslint-plugin-promise":"^4.2.1","eslint-plugin-standard":"^4.0.1","eslint-plugin-vue":"^5.2.3","file-loader":"^4.2.0","gh-pages":"^2.1.1","json-loader":"^0.5.7","optimize-css-assets-webpack-plugin":"^5.0.3","puppeteer":"^1.20.0","raw-loader":"^3.1.0","shx":"^0.3.2","style-loader":"^1.0.0","template-html-loader":"1.0.0","uglifyjs-webpack-plugin":"^2.2.0","vue":"^2.6.10","vue-loader":"^15.7.1","vue-router":"^3.1.3","vue-template-compiler":"^2.6.10","webpack":"^4.41.1","webpack-cli":"^3.3.9","yaml-loader":"^0.5.0"},"author":{"name":"Daniel Sim, Guillaume Leclerc"},"license":"MIT","gitHead":"bca93a0af93dc545ed0a26f9f8cb7aae66869600","_id":"@busability/vue2-google-maps@0.0.2","_nodeVersion":"16.4.0","_npmVersion":"7.18.1","dist":{"integrity":"sha512-QY9S7OsAbvZ9MNjAHWnZh1vDB9HBUvBTrsshL1/25dG9/cGfe6s2OH30t5RqKmMeJit72K2+YvDYZkNYW1zbvQ==","shasum":"8d9dea0da88692d155cc31686c212f6ae857aa5b","tarball":"https://registry.npmjs.org/@busability/vue2-google-maps/-/vue2-google-maps-0.0.2.tgz","fileCount":138,"unpackedSize":2233418,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg4CXoCRA9TVsSAnZWagAA/l0P+QAtg3rLB1n8n6fGKy6x\nB7jeNyS+fTYN80Q1Zo+sVLP2GT4nU2Ya+0ovsgOxzGMykxg/Z6keQrJUqnd7\n4XKsreMjdRdtdqAr+evpPPfTgbwdb8q0NP7zSwMa5zuRLVN8znt70d6c9xhw\ndcUwm8dKQZxsOM0fHiT/yZC6xvLL/aht/RclYKC8YVYkSMPW2DVgml/5LDQI\nDzYuk3AcYvdWYSef99/pfQiq91nwd4bllQiUxvbAe2F8x9X4Dyj7PflIBTxY\n8nYGcoWVq5F3357FKpzyHKGf2vuBhJWAqVeoNpM/CBCNSB3vqklvDJf8uN6z\nKB2KqK+jof9tDQOJKuZyhAag+kh5X/gU/mM9oWm12otzk8AgY/8RZZKPq41J\nUiFIu3z1+av9IP40QVKdb2Q5fsBCRyi4NSsVd0QpTsEBN8o7V5apUq9PbuNl\nZX+Tl1/1ut8Y2YdoxK/XL0YBFfkVuxAJoZyzJ1Z661BfKZMFNRqOLguEtMaC\nPtF5fPtAfzEQu2C9DGhfo30crW4S8DMN47CNfvfd5ESMr7e/IOy88X03eMTU\nFa4e2CGb/yewt1RROKV/omNGBfWpUBSEm0qbXU3TJTC2mxGokd8WWooE3bNu\nFDN1zEI+lZZNBdSrZPqeKl0AmYil5XD5r+39X/hNvEErxd4h5vSOK2t2cybX\nCe93\r\n=46IQ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC4CFSSSbRDSZB745MYLzYuq563ZnsCBu/hZ2cF87JReQIhAMhoEz3C7Ah2JiYWj6wvSuTHLIfKvSRt+X5Y3CgNMPpu"}]},"_npmUser":{"name":"paunovic","email":"paun992@hotmail.com"},"directories":{},"maintainers":[{"name":"paunovic","email":"paun992@hotmail.com"},{"name":"iaksentijevic.busability","email":"ivan@busability.com"},{"name":"branimir","email":"branimir.momcilovic@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vue2-google-maps_0.0.2_1625302503787_0.3251572658063826"},"_hasShrinkwrap":false},"1.0.0":{"name":"@busability/vue2-google-maps","version":"1.0.0","description":"This is a google map component for Vue.js, updated for Vue 2 compatibility","main":"dist/main.js","scripts":{"build":"npm run build:babel && npm run build:webpack","build:babel":"shx mkdir -p dist && shx rm -r dist && cross-env BUILD_DEV=1 babel src -D --out-dir dist && echo {} > dist/.babelrc","build:webpack":"cross-env NODE_ENV=production webpack --progress --hide-modules","build:examples":"npm run build:examples:before && npm run build:examples:webpack","build:examples:before":"npm run build && shx cp dist/vue-google-maps.js examples","build:examples:webpack":"cd examples && cross-env NODE_ENV=production webpack","lab:tests":"lab -T test/test-setup/babel-transform.js -l -S test","lint":"eslint --ext .vue,.js src && eslint --ext .vue,.html,.js test","lint:fix":"eslint --fix --ext .vue,.js src && eslint --ext .vue,.html,.js test","test":"npm run lab:tests && npm run lint","deploy":"npm run build:examples && gh-pages -d examples","prepare":"npm run build"},"repository":{"type":"git","url":"git+https://github.com/Busability/vue2-google-maps.git"},"bugs":{"url":"https://github.com/Busability/vue2-google-maps/issues"},"homepage":"https://github.com/Busability/vue2-google-maps#readme","dependencies":{"marker-clusterer-plus":"^2.1.4"},"peerDependencies":{"vue":"^2.6.10"},"devDependencies":{"@babel/cli":"^7.6.4","@babel/core":"^7.6.4","@babel/polyfill":"^7.6.0","@babel/preset-env":"^7.6.3","@hapi/lab":"^20.4.0","babel-eslint":"^10.0.3","babel-loader":"^8.0.6","babel-plugin-minify-dead-code-elimination":"^0.5.1","babel-plugin-transform-inline-environment-variables":"^0.4.3","consolidate":"^0.15.1","cross-env":"^6.0.3","css-loader":"^3.2.0","eslint":"^6.5.1","eslint-config-standard":"^14.1.0","eslint-plugin-html":"^6.0.0","eslint-plugin-import":"^2.18.2","eslint-plugin-node":"^10.0.0","eslint-plugin-promise":"^4.2.1","eslint-plugin-standard":"^4.0.1","eslint-plugin-vue":"^5.2.3","file-loader":"^4.2.0","gh-pages":"^2.1.1","json-loader":"^0.5.7","optimize-css-assets-webpack-plugin":"^5.0.3","puppeteer":"^1.20.0","raw-loader":"^3.1.0","shx":"^0.3.2","style-loader":"^1.0.0","template-html-loader":"1.0.0","uglifyjs-webpack-plugin":"^2.2.0","vue":"^2.6.10","vue-loader":"^15.7.1","vue-router":"^3.1.3","vue-template-compiler":"^2.6.10","webpack":"^4.41.1","webpack-cli":"^3.3.9","yaml-loader":"^0.5.0"},"author":{"name":"Daniel Sim, Guillaume Leclerc"},"license":"MIT","gitHead":"e6eaafad1f3f16db48a9d2f36725229af42706ad","_id":"@busability/vue2-google-maps@1.0.0","_nodeVersion":"16.5.0","_npmVersion":"7.19.1","dist":{"integrity":"sha512-fjMPWTJF2JP+Tf3b3vvpkBkhmw8u3HFb8ty6VhA4Mxh6ftUw4Q5zdQIJdhhhbPA8Xn2+H45Ukw85uXLMdwRjxA==","shasum":"3962956d531eb8e8ed88adf6f309cf703025ff28","tarball":"https://registry.npmjs.org/@busability/vue2-google-maps/-/vue2-google-maps-1.0.0.tgz","fileCount":139,"unpackedSize":2234139,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg+DP+CRA9TVsSAnZWagAAtbAP/jI3oiyjcAGIR1nBiKDK\nShzBtTk0XYJtt4qcCl5xfTHHfwfvbbYGDdzPMUOXGe59gEsQxO3uto5n2dpy\nau0v4LcASUQiJgYziI6zfkMmPXADz6Fe6rPXbodx8YgZvaPgKnTseZMMPsQN\nz+aVsKfbsCNxIXCJ5tplYj23a4oCZbwMbHUFyYNT2zdIOZmauwfD8HyD1GmS\n7WRtJg6YUTzvUMp3iJGKqzCbv0C7s8iX2ONdeXmeren6HBZNpdf+sFFPdRRH\n5lmhMEc5zFbfnp3sap2xTIM8rZkPQE6tDlcynHplihfMqggCWHf0e3PXmBUA\n7VOsApFAOQw6t0Qn5NKqjUCmtWIOSQKhXiKQTFcBPOAUAsxFovRG7G0hQjKH\nQhto3fPKNsp1J24jJ8rT+SRElqR4J3Cq3Mc0XH2ZC6oI27hE698W9KivtyRo\n+xrYOs6vBgCYP4Tz/jJmqjeGgvkzI1l2B5l3GS02fduC8/f33woFkAp3o3Y4\nbNphiIgRPCeBkEaN+8ePW026Tm9R2JKmrZJ+AKZuS6D9SH+k6drgeWvv3x4t\nQpffpHoC+aUeuxhvWdUFk/C7riYZhOt1pbjSXgsoyLj67x07Tt5W5iP+qSw0\nC+6oL5k2AMbTlWQMCr3bhw8YIeamyWQu33nzuKUmMwEFuz9K6IZ6VBw/mDpC\n2OY+\r\n=8N2p\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDO1mim1MzySBva8CMqeNZvcGJlumvjPGUhx2LDllqb3AiAUfd3wsnJ6BpbQzZWv32PDhwJzzcQ6+54wAZRt88tauw=="}]},"_npmUser":{"name":"paunovic","email":"paun992@hotmail.com"},"directories":{},"maintainers":[{"name":"branimir","email":"branimir.momcilovic@gmail.com"},{"name":"iaksentijevic.busability","email":"ivan@busability.com"},{"name":"paunovic","email":"paun992@hotmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vue2-google-maps_1.0.0_1626878974279_0.10619847570027074"},"_hasShrinkwrap":false}},"time":{"created":"2021-07-03T08:48:52.167Z","0.0.1":"2021-07-03T08:48:52.821Z","modified":"2022-04-04T21:08:12.613Z","0.0.2":"2021-07-03T08:55:03.993Z","1.0.0":"2021-07-21T14:49:34.489Z"},"maintainers":[{"name":"branimir","email":"branimir.momcilovic@gmail.com"},{"name":"iaksentijevic.busability","email":"ivan@busability.com"},{"name":"paunovic","email":"paun992@hotmail.com"}],"description":"This is a google map component for Vue.js, updated for Vue 2 compatibility","homepage":"https://github.com/Busability/vue2-google-maps#readme","repository":{"type":"git","url":"git+https://github.com/Busability/vue2-google-maps.git"},"author":{"name":"Daniel Sim, Guillaume Leclerc"},"bugs":{"url":"https://github.com/Busability/vue2-google-maps/issues"},"license":"MIT","readme":"# vue-google-maps\n\n\n### Manual package publishing on NPM registry\n\nThis should be avoided - there is an automated workflow which will publish a new version of the package on every push to main branch.\n\n```bash\nnpm login # using your own credentials\nnpm publish --access public\n```\n\n### Installation\n\n```\nnpm i @busability/vue2-google-maps\n```\n\n### Manually\n\nJust download `dist/vue-google-maps.js` file and include it from your HTML.\n\nBe aware that if you use this method, you cannot use TitleCase for your components and your attributes.\nThat is, instead of writing `<GmapMap>`, you need to write `<gmap-map>`.\n\n[Example](http://xkjyeah.github.io/vue-google-maps/overlay.html) ([Source code](https://github.com/xkjyeah/vue-google-maps/blob/no-deferred-ready/examples/overlay.html)).\n\n## Basic usage / Documentation\n\n### Get an API key from Google\n\n[Generating an Google Maps API key](https://developers.google.com/maps/documentation/javascript/get-api-key).\n\n### Quickstart (Webpack, Nuxt):\n\nIf you are using Webpack and Vue file components, just add the following to your code!\n\n```vue\n<GmapMap\n  :center=\"{lat:10, lng:10}\"\n  :zoom=\"7\"\n  map-type-id=\"terrain\"\n  style=\"width: 500px; height: 300px\"\n>\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</GmapMap>\n```\n\nIn your `main.js` or inside a Nuxt plugin:\n\n```js\nimport Vue from 'vue'\nimport * as VueGoogleMaps from '@busability/vue2-google-maps'\n\nVue.use(VueGoogleMaps, {\n  load: {\n    key: 'YOUR_API_TOKEN',\n    libraries: 'places', // This is required if you use the Autocomplete plugin\n    // OR: libraries: 'places,drawing'\n    // OR: libraries: 'places,drawing,visualization'\n    // (as you require)\n\n    //// If you want to set the version, you can do so:\n    // v: '3.26',\n  },\n\n  //// If you intend to programmatically custom event listener code\n  //// (e.g. `this.$refs.gmap.$on('zoom_changed', someFunc)`)\n  //// instead of going through Vue templates (e.g. `<GmapMap @zoom_changed=\"someFunc\">`)\n  //// you might need to turn this on.\n  // autobindAllEvents: false,\n\n  //// If you want to manually install components, e.g.\n  //// import {GmapMarker} from '@busability/vue2-google-maps/src/components/marker'\n  //// Vue.component('GmapMarker', GmapMarker)\n  //// then set installComponents to 'false'.\n  //// If you want to automatically install all the components this property must be set to 'true':\n  installComponents: true\n})\n```\n\nIf you need to gain access to the `Map` instance (e.g. to call `panToBounds`, `panTo`):\n```vue\n<template>\n<GmapMap ref=\"mapRef\" ...>\n</GmapMap>\n</template>\n<script>\nexport default {\n  mounted () {\n    // At this point, the child GmapMap has been mounted, but\n    // its map has not been initialized.\n    // Therefore we need to write mapRef.$mapPromise.then(() => ...)\n\n    this.$refs.mapRef.$mapPromise.then((map) => {\n      map.panTo({lat: 1.38, lng: 103.80})\n    })\n  }\n}\n```\n\nIf you need to gain access to the `google` object:\n```vue\n<template>\n  <GmapMarker ref=\"myMarker\"\n    :position=\"google && new google.maps.LatLng(1.38, 103.8)\" />\n</template>\n<script>\nimport {gmapApi} from '@busability/vue2-google-maps'\n\nexport default {\n  computed: {\n    google: gmapApi\n  }\n}\n</script>\n```\n\nControl the options of the map with the options property:\n\nExample of [MapOptions](https://developers.google.com/maps/documentation/javascript/reference/map#MapOptions):\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\nAdd region and language localization:\n\nExample for [Localization](https://developers.google.com/maps/documentation/javascript/localization):\n```vue\nVue.use(VueGoogleMaps, {\n  load: {\n    region: 'VI',\n    language: 'vi',\n  },\n})\n```\n\n### Autocomplete slot\n\nThe autocomplete supports custom text field via scoped slot\n\n```html\n<gmap-autocomplete class=\"introInput\" >\n  <template v-slot:input=\"slotProps\">\n    <v-text-field outlined\n      prepend-inner-icon=\"place\"\n      placeholder=\"Location Of Event\"\n      ref=\"input\"\n      v-on:listeners=\"slotProps.listeners\"\n      v-on:attrs=\"slotProps.attrs\">\n    </v-text-field>\n  </template>\n</gmap-autocomplete>\n```\nThe ref on the element must be called input, if the element is a vue component then it must have a child ref called input (like in vuetify text-field) or speciy a custom name via childRefName property (only works one level deep into a component).\n\nThe v-on:listeners is rquired, v-on:attrs may or may not be required depending on your implementation.\n\nThis requires vue 2.6 or higher for the new slot support.\n\n### Nuxt.js config\n\nFor Nuxt.js projects, please import VueGoogleMaps in the following manner:\n\n```js\nimport * as VueGoogleMaps from '~/node_modules/@busability/vue2-google-maps'\n```\n\nAdd the following to your `nuxt.config.js`'s `build.extend()`:\n\n```js\ntranspile: [/^@busability/vue2-google-maps($|\\/)/]\n```\n\n### Officially supported components:\n\nThe list of officially support components are:\n\n- Rectangle, Circle\n- Polygon, Polyline\n- KML Layer\n- Marker\n- InfoWindow\n- Autocomplete\n- Cluster* (via `marker-clusterer-plus`)\n\nYou can find examples of this [on the website](http://xkjyeah.github.io/vue-google-maps/).\nAuto-generated API documentation for these components are [here](http://xkjyeah.github.io/vue-google-maps/autoapi.html).\n\nFor `Cluster`, you **must** import the class specifically, e.g.\n```js\nimport GmapCluster from '@busability/vue2-google-maps/dist/components/cluster' // replace src with dist if you have Babel issues\n\nVue.component('GmapCluster', GmapCluster)\n```\nInconvenient, but this means all other users don't have to bundle the marker clusterer package\nin their source code.\n\n### Adding your own components\n\nIt should be relatively easy to add your own components (e.g. Heatmap, GroundOverlay). please refer to the\n[source code for `MapElementFactory`](https://github.com/xkjyeah/vue-google-maps/blob/vue2/src/components/mapElementFactory.js).\n\nExample for [DirectionsRenderer](https://developers.google.com/maps/documentation/javascript/reference/3/#DirectionsRenderer):\n```js\n// DirectionsRenderer.js\nimport {MapElementFactory} from '@busability/vue2-google-maps'\n\nexport default MapElementFactory({\n  name: 'directionsRenderer',\n  ctr: () => google.maps.DirectionsRenderer,\n  //// The following is optional, but necessary if the constructor takes multiple arguments\n  //// e.g. for GroundOverlay\n  // ctrArgs: (options, otherProps) => [options],\n  events: ['directions_changed'],\n\n  // Mapped Props will automatically set up\n  //   this.$watch('propertyName', (v) => instance.setPropertyName(v))\n  //\n  // If you specify `twoWay`, then it also sets up:\n  //   google.maps.event.addListener(instance, 'propertyName_changed', () => {\n  //     this.$emit('propertyName_changed', instance.getPropertyName())\n  //   })\n  //\n  // If you specify `noBind`, then neither will be set up. You should manually\n  // create your watchers in `afterCreate()`.\n  mappedProps: {\n    routeIndex: { type: Number },\n    options: { type: Object },\n    panel: { },\n    directions: { type: Object },\n    //// If you have a property that comes with a `_changed` event,\n    //// you can specify `twoWay` to automatically bind the event, e.g. Map's `zoom`:\n    // zoom: {type: Number, twoWay: true}\n  },\n  // Any other properties you want to bind. Note: Must be in Object notation\n  props: {},\n  // Actions you want to perform before creating the object instance using the\n  // provided constructor (for example, you can modify the `options` object).\n  // If you return a promise, execution will suspend until the promise resolves\n  beforeCreate (options) {},\n  // Actions to perform after creating the object instance.\n  afterCreate (directionsRendererInstance) {},\n})\n```\n\nThereafter, it's easy to use the newly-minted component!\n```vue\n<template>\n  <GmapMap :zoom=\"...\" :center=\"...\">\n    <DirectionsRenderer />\n  </GmapMap>\n</template>\n<script>\nimport DirectionsRenderer from './DirectionsRenderer.js'\n\nexport default {\n  components: {DirectionsRenderer}\n}\n</script>\n```\n\n## Testing\n\nMore automated tests should be written to help new contributors.\n\nMeanwhile, please test your changes against the suite of [examples](examples).\n\nImprovements to the tests are welcome :)\n","readmeFilename":"README.md"}