It's been increasingly difficult for me to make time to maintain this project.My projects at work have also gradually migrated away from Google Maps (but still on Vue -- Vue's awesome!),so there's less and less incentive to maintain.
If you have time to contribute to a rather frequently used library, feel free to make a PR!For more background, please refer to this issue. What's urgently needed are:. Better automated tests.
Better integration tests with the popular frameworks, especially Nuxt and Vue template. Better documentation (examples, recommendations). The above three will go a long way to keeping the project maintainable and contributable, and will address many of the open issues.
This is the Vue 2.x port of vue-google-maps! Just download dist/vue-google-maps.js file and include it from your HTML.
Be aware that if you use this method, you cannot use TitleCase for your components and your attributes.That is, instead of writing
Example (Source code). Generating an Google Maps API key.
- If you are using Webpack and Vue file components, just add the following to your code!
- In your main.js or inside a Nuxt plugin:. If you need to gain access to the Map instance (e.g.
- to call panToBounds, panTo):. If you need to gain access to the google object:.
- Control the options of the map with the options property:. Example of MapOptions:. Add region and language localization:.
- Example for Localization:. Add the following to your nuxt.config.js's build.extend():.
- Example project by Alexander Lichter: https://codesandbox.io/s/31j9l75xjm.
Get Google Maps API Key
The list of officially support components are:. Rectangle, Circle. Polygon, Polyline.
- Cluster* (via marker-clusterer-plus).
- You can find examples of this on the website.Auto-generated API documentation for these components are here.
- For Cluster, you must import the class specifically, e.g.
- Inconvenient, but this means all other users don't have to bundle the marker clusterer packagein their source code.
- It should be relatively easy to add your own components (e.g.
Step 3 — Building the Map Search Component
Heatmap, GroundOverlay). please refer to thesource code for MapElementFactory.
Vue-2 port of vue-google-maps
Example for DirectionsRenderer:. Thereafter, it's easy to use the newly-minted component! More automated tests should be written to help new contributors.
Install Vue2 Google Maps Library
Meanwhile, please test your changes against the suite of examples. Improvements to the tests are welcome :). Google Maps presents a robust set of APIs for building and interacting with maps, visualizing location data, and searching via autocomplete, to name but a few.
vue-google-maps, which has been updated for Vue.js 2, provides Vue.js applications with tools to utilize these APIs. It comes with a well-rounded set of components for interacting with Google Maps as well as two-way data binding.
In this tutorial, you will use the vue2-google-maps library and create a map that uses autocomplete to display a location.
Basic usage / Documentation
To complete this tutorial, you will need:. Node.js installed locally, which you can do by following How to Install Node.js and Create a Local Development Environment.