{"id":13403302,"url":"https://github.com/Akryum/vue-googlemaps","last_synced_at":"2025-03-14T08:31:34.910Z","repository":{"id":40685797,"uuid":"102463520","full_name":"Akryum/vue-googlemaps","owner":"Akryum","description":"Integrate Google Maps in your Vue application","archived":false,"fork":false,"pushed_at":"2021-08-02T04:20:11.000Z","size":2901,"stargazers_count":531,"open_issues_count":46,"forks_count":60,"subscribers_count":14,"default_branch":"master","last_synced_at":"2025-03-11T12:38:17.238Z","etag":null,"topics":["google-maps","vuejs","vuejs2"],"latest_commit_sha":null,"homepage":"https://akryum.github.io/vue-googlemaps/","language":"JavaScript","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/Akryum.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null},"funding":{"github":"Akryum"}},"created_at":"2017-09-05T09:41:42.000Z","updated_at":"2025-03-07T02:39:31.000Z","dependencies_parsed_at":"2022-09-18T12:03:56.256Z","dependency_job_id":null,"html_url":"https://github.com/Akryum/vue-googlemaps","commit_stats":null,"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Akryum%2Fvue-googlemaps","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Akryum%2Fvue-googlemaps/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Akryum%2Fvue-googlemaps/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Akryum%2Fvue-googlemaps/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Akryum","download_url":"https://codeload.github.com/Akryum/vue-googlemaps/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243547380,"owners_count":20308696,"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":["google-maps","vuejs","vuejs2"],"created_at":"2024-07-30T19:01:28.096Z","updated_at":"2025-03-14T08:31:34.885Z","avatar_url":"https://github.com/Akryum.png","language":"JavaScript","funding_links":["https://github.com/sponsors/Akryum","https://www.patreon.com/akryum"],"categories":["JavaScript","UI组件","Components \u0026 Libraries","UI Components","UI Components [🔝](#readme)"],"sub_categories":["地图","UI Components","Map"],"readme":"# vue-googlemaps\n\n[![npm](https://img.shields.io/npm/v/vue-googlemaps.svg) ![npm](https://img.shields.io/npm/dm/vue-googlemaps.svg)](https://www.npmjs.com/package/vue-googlemaps)\n[![vue2](https://img.shields.io/badge/vue-2.x-brightgreen.svg)](https://vuejs.org/)\n\nIntegrate Google Maps in your Vue application in a \"Vue-way\".\n\n\u003e This library is Work In Progress.\n\u003e More components will be available in the 1.0 release.\n\n[Live demo](https://akryum.github.io/vue-googlemaps/)\n\nThe main objective of the library is to use Google Maps using Vue components in a way that feels natural to Vue developpers (with props, events, slots...).\n\n\n\u003cp\u003e\n  \u003ca href=\"https://www.patreon.com/akryum\" target=\"_blank\"\u003e\n    \u003cimg src=\"https://c5.patreon.com/external/logo/become_a_patron_button.png\" alt=\"Become a Patreon\"\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\n## Sponsors\n\n### Gold\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://www.sumcumo.com/en/\" target=\"_blank\"\u003e\n    \u003cimg src=\"https://cdn.discordapp.com/attachments/258614093362102272/570728242399674380/logo-sumcumo.png\" alt=\"sum.cumo logo\" width=\"400px\"\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\n### Silver\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://vueschool.io/\" target=\"_blank\"\u003e\n    \u003cimg src=\"https://vueschool.io/img/logo/vueschool_logo_multicolor.svg\" alt=\"VueSchool logo\" width=\"200px\"\u003e\n  \u003c/a\u003e\n\n  \u003ca href=\"https://www.vuemastery.com/\" target=\"_blank\"\u003e\n    \u003cimg src=\"https://cdn.discordapp.com/attachments/258614093362102272/557267759130607630/Vue-Mastery-Big.png\" alt=\"Vue Mastery logo\" width=\"200px\"\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\n### Bronze\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://vuetifyjs.com\" target=\"_blank\"\u003e\n    \u003cimg src=\"https://cdn.discordapp.com/attachments/537832759985700914/537832771691872267/Horizontal_Logo_-_Dark.png\" width=\"100\"\u003e\n  \u003c/a\u003e\n\n  \u003ca href=\"https://www.frontenddeveloperlove.com/\" target=\"_blank\" title=\"Frontend Developer Love\"\u003e\n    \u003cimg src=\"https://cdn.discordapp.com/attachments/258614093362102272/557267744249085953/frontend_love-logo.png\" width=\"56\"\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\n\u003cbr\u003e\n\n## Table of Contents\n\n- [Installation](#installation)\n- [Usage](#usage)\n- [Builtin components](#builtin-components)\n- [Create you own components](#create-you-own-components)\n- [Quick Examples](#quick-examples)\n\n## Installation\n\n```\nnpm i -S vue-googlemaps\n```\n\n```\nyarn add vue-googlemaps\n```\n\n*You need to [polyfill](https://babeljs.io/docs/usage/polyfill/) some ES2015 features in old browsers.*\n\n## Usage\n\nYou need a Google API key from the [developer console](http://console.developers.google.com/).\n\n```js\nimport 'vue-googlemaps/dist/vue-googlemaps.css'\nimport VueGoogleMaps from 'vue-googlemaps'\n\nVue.use(VueGoogleMaps, {\n  load: {\n    // Google API key\n    apiKey: 'your-google-api-key',\n    // Enable more Google Maps libraries here\n    libraries: ['places'],\n    // Use new renderer\n    useBetaRenderer: false,\n  },\n})\n```\n\n## Builtin components\n\n(Documentation is work-in-progress)\n\n- Circle\n- Geocoder\n- Map\n- Marker\n- NearbyPlaces\n- PlaceDetails\n- UserPosition\n- *More to come!*\n\n## Create you own components\n\nHere is an example of what a `Marker` component would look like:\n\n```js\nimport { MapElement } from 'vue-googlemaps'\n\n// Those Vue props will update automatically\n// (Two-way binding with .sync modifier)\nconst boundProps = [\n  'animation',\n  'clickable',\n  'cursor',\n  'draggable',\n  // ...\n]\n\n// Events from Google Maps emitted as Vue events\nconst redirectedEvents = [\n  'click',\n  'rightclick',\n  'dblclick',\n  'drag',\n  // ...\n]\n\nexport default {\n  mixins: [\n    // You need to use this mixin\n    MapElement,\n  ],\n\n  // When Google Maps is ready\n  googleMapsReady () {\n    const options = Object.assign({}, this.$props)\n    options.map = this.$_map\n\n    // Create Google Maps objects\n    this.$_marker = new window.google.maps.Marker(options)\n    // Bind the Vue props\n    this.bindProps(this.$_marker, boundProps)\n    // Emit the events from Google Maps\n    this.redirectEvents(this.$_marker, redirectedEvents)\n  },\n\n  beforeDestroy () {\n    // Teardown\n    if (this.$_marker) {\n      this.$_marker.setMap(null)\n    }\n  },\n}\n```\n\n## Quick Examples\n\n### Map with markers\n\n```html\n\u003cgooglemaps-map\n  :center.sync=\"center\"\n  :zoom.sync=\"zoom\"\n  :options=\"mapOptions\"\n  @idle=\"onIdle\"\n  @click=\"onMapClick\"\u003e\n\n  \u003c!-- User Position --\u003e\n  \u003cgooglemaps-user-position\n    @update:position=\"setUserPosition\"\n  /\u003e\n\n  \u003cgooglemaps-marker\n    v-for=\"marker of markers\"\n    :key=\"marker._id\"\n    :label=\"{\n      color: marker === currentmarker ? 'white' : 'black',\n      fontFamily: 'Material Icons',\n      fontSize: '20px',\n      text: 'star_rate',\n    }\"\n    :position=\"marker.position\"\n    @click=\"selectMarker(marker._id)\"\n  /\u003e\n\u003c/googlemaps-map\u003e\n```\n\n### Place Details\n\n```html\n\u003cgooglemaps-place-details\n  :request=\"{\n    placeId: placeId\n  }\"\n  @results=\"results =\u003e ...\"\n\u003e\n  \u003ctemplate slot-scope=\"props\"\u003e\n    \u003cdiv class=\"name\"\u003e{{ props.results.name }}\u003c/div\u003e\n    \u003cdiv class=\"address\"\u003e{{ props.results.formatted_address }}\u003c/div\u003e\n  \u003c/template\u003e\n\u003c/googlemaps-place-details\u003e\n```\n\n### Geocoder\n\n```html\n\u003cgooglemaps-geocoder\n  :request=\"{\n    location: latLng,\n  }\"\n  @results=\"results =\u003e ...\"\n\u003e\n  \u003ctemplate slot-scope=\"props\"\u003e\n    \u003cdiv class=\"name\"\u003e{{ props.results[1].name }}\u003c/div\u003e\n    \u003cdiv class=\"address\"\u003e{{ props.results[0].formatted_address }}\u003c/div\u003e\n  \u003c/template\u003e\n\u003c/googlemaps-geocoder\u003e\n```\n\n### Nearby places\n\n```html\n\u003cgooglemaps-map\n  @idle=\"map =\u003e mapBounds = map.getBounds()\"\n/\u003e\n\n\u003cgooglemaps-nearby-places\n  :request=\"{\n    bounds: mapBounds\n  }\"\n  :filter=\"result =\u003e !result.types.includes('locality')\"\n  @results=\"results =\u003e ...\"\n\u003e\n  \u003ctemplate slot-scope=\"props\"\u003e\n    \u003cdiv v-if=\"props.loading\"\u003eLoading...\u003c/div\u003e\n\n    \u003cdiv v-for=\"result of props.result\"\u003e\n      \u003cdiv\u003e\n        \u003cimg\n          v-if=\"result.photos\"\n          :src=\"result.photos[0].getUrl({ maxWidth: 80, maxHeight: 80 })\"\n        /\u003e\n        {{ result.name }}\n      \u003c/div\u003e\n      \u003cdiv\u003e{{ result.vicinity }}\u003c/div\u003e\n    \u003c/div\u003e\n  \u003c/template\u003e\n\u003c/googlemaps-nearby-places\u003e\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FAkryum%2Fvue-googlemaps","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FAkryum%2Fvue-googlemaps","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FAkryum%2Fvue-googlemaps/lists"}