{"id":13424024,"url":"https://github.com/GuillaumeLeclerc/vue-google-maps","last_synced_at":"2025-03-15T17:32:55.549Z","repository":{"id":45156998,"uuid":"48057155","full_name":"GuillaumeLeclerc/vue-google-maps","owner":"GuillaumeLeclerc","description":"Google maps component for vue with 2-way data binding","archived":false,"fork":false,"pushed_at":"2018-08-15T13:10:54.000Z","size":2554,"stargazers_count":557,"open_issues_count":51,"forks_count":644,"subscribers_count":22,"default_branch":"master","last_synced_at":"2024-04-12T09:33:39.220Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"Vue","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/GuillaumeLeclerc.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2015-12-15T17:01:41.000Z","updated_at":"2024-03-04T06:58:17.000Z","dependencies_parsed_at":"2022-07-13T16:50:29.521Z","dependency_job_id":null,"html_url":"https://github.com/GuillaumeLeclerc/vue-google-maps","commit_stats":null,"previous_names":[],"tags_count":33,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/GuillaumeLeclerc%2Fvue-google-maps","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/GuillaumeLeclerc%2Fvue-google-maps/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/GuillaumeLeclerc%2Fvue-google-maps/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/GuillaumeLeclerc%2Fvue-google-maps/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/GuillaumeLeclerc","download_url":"https://codeload.github.com/GuillaumeLeclerc/vue-google-maps/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":221593468,"owners_count":16849125,"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":[],"created_at":"2024-07-31T00:00:46.955Z","updated_at":"2024-10-26T22:32:31.214Z","avatar_url":"https://github.com/GuillaumeLeclerc.png","language":"Vue","funding_links":[],"categories":["Awesome Vue.js [![Awesome](https://cdn.rawgit.com/sindresorhus/awesome/d7305f38d29fed78fa85652e3a63e154dd8e8829/media/badge.svg)](https://github.com/sindresorhus/awesome)","Vue","UI组件"],"sub_categories":["Libraries \u0026 Plugins"],"readme":"# vue-google-maps\n\n## Demo:\n\n[Demo in production](http://en.papayapods.com/?utm_source=GtHub\u0026utm_medium=LnK\u0026utm_campaign=V.JS%20Map%20Cmpnt.#!/search/map?city=Lausanne)\n\n[Showcase with a lot of features](http://guillaumeleclerc.github.io/vue-google-maps-example/)\n\n## Presentation\n\nIf you want to write google map this way : \n\n```html\n\u003cmap\n  :center=\"{lat:10, lng:10}\"\n  :map-type-id=\"terrain\"\n  :zoom=\"7\"\n\u003e\u003c/map\u003e\n```\n\nOr use the power of Vue.js within a google map like this:\n```html\n\u003ctemplate\u003e\n  \u003cmap\n    :center=\"center\"\n    :zoom=\"7\"\n  \u003e\n    \u003cmarker \n      v-for=\"m in markers\"\n      :position.sync=\"m.position\"\n      :clickable=\"true\"\n      :draggable=\"true\"\n      @g-click=\"center=m.position\"\n    \u003e\u003c/marker\u003e\n  \u003c/map\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\n  import {load, Map, Marker} from 'vue-google-maps'\n  \n  load('YOUR_API_TOKEN','OPTIONAL VERSION NUMBER')\n  \n  export default {\n    data () {\n      return {\n        center: {lat: 10.0, lng: 10.0},\n        markers: [{\n          position: {lat: 10.0, lng: 10.0}\n        }, {\n          position: {lat: 11.0, lng: 11.0}\n        }]\n      }\n    }\n  }\n\u003c/script\u003e\n```\n\n## Example Project \n\nYou can see an project example [here](https://github.com/GuillaumeLeclerc/vue-google-maps-example).\n\nIt uses webpack and vue-loader and was \"forked\" from the vue-loader-example project\n\n## Installation\n\n### With npm (Recommended)\n\n```\nnpm install vue-google-maps\n```\n\nYou can append `--save` or `--save-dev` to add it to your depency (if yor project also uses npm)\n\n### Manually\n\nJust download the `index.js` file on the root directory of this repository\n\n### Basic usage\n\n#### Reference `vue-google-maps` into your project\n\nIf you are using a cool bundler (recommended) you can just do : \n\n```javascript\nimport {load, Map, Marker} from 'vue-google-maps'\n```\n\nOr if you prefer the older ES5 syntax:\n\n```javascript\nconst VueGoogleMap = require('vue-google-maps')\n```\n\n#### Standalone / CDN\n\nIf you are not using any bundler (and you should feel bad). You can just reference the file in a script tag.\nThe library will be available in a global object called `VueGoogleMap`.\nHowever you will need to include Vue and Lodash beforehand:\n\n```html\n\u003chead\u003e\n\u003cscript src=\"https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.17/vue.min.js\"\u003e\u003c/script\u003e\n\u003cscript src=\"https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.6.1/lodash.min.js\"\u003e\u003c/script\u003e\n\u003cscript src=\"dist/vue-google-maps.js\"\u003e\u003c/script\u003e\n\n\u003c/head\u003e\n\u003cbody\u003e\n\n\u003cgoogle-map style=\"width: 100%; height: 100%; position: absolute; left:0; top:0\"\n    :center=\"{lat: 1.38, lng: 103.8}\"\n    :zoom=\"12\"\n\u003e\n\n\u003c/google-map\u003e\n\n\u003cscript\u003e\nVueGoogleMap.load({\n    'key': 'YOUR_API_KEY',\n})\nVue.component('google-map', VueGoogleMap.Map);\nnew Vue({\n    el: 'body',\n});\n\n\u003c/script\u003e\n\n\u003c/body\u003e\n```\n\n#### Set your api key\n\nTo enable any `vue-google-maps` components you need to set your api token:\n\n```javascript\nload({\n  key: 'YOUR_API_TOKEN',\n  v: '3.24',                // Google Maps API version\n  // libraries: 'places',   // If you want to use places input\n})\n// OR (depending on how you refereced it)\nVueGoogleMap.load({ ... })\n```\n\nThe parameters are passed in the query string to the Google Maps API, e.g. to set the [version](https://developers.google.com/maps/documentation/javascript/versions#version-rollover-and-version-types),\n[libraries](https://developers.google.com/maps/documentation/javascript/libraries),\nor for [localisation](https://developers.google.com/maps/documentation/javascript/basics).\n\n## Full documentation\n\n### Note on events\n\n__All events are prefixed with `g-`. Example : `g-click` so it does not interfere with DOM events.__\n\n__Documentation is up to date__: take a look at the wiki\n\n## Sponsor\n\nThis component is sponsored by [PapayaPods](http://en.papayapods.com). Feel free to check out `vue-google-maps` in production !!\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FGuillaumeLeclerc%2Fvue-google-maps","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FGuillaumeLeclerc%2Fvue-google-maps","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FGuillaumeLeclerc%2Fvue-google-maps/lists"}