Vue Google Maps

Posted on  by admin

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 , you need to write .

Example (Source code). Generating an Google Maps API key.

  1. If you are using Webpack and Vue file components, just add the following to your code!
  2. In your main.js or inside a Nuxt plugin:. If you need to gain access to the Map instance (e.g.
  3. to call panToBounds, panTo):. If you need to gain access to the google object:.
  4. Control the options of the map with the options property:. Example of MapOptions:. Add region and language localization:.
  5. Example for Localization:. Add the following to your nuxt.config.js's build.extend():.
  6. 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.

Prerequisites

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.

Installation

Some familiarity with setting up a Vue.js project and using Vue.js components may be beneficial. A Google Maps JavasScript API Key.This will require a Google account.Signing in to the Google Cloud Platform Console.Creating a new project.Enabling the Google Maps JavaScript API and Places API for the project.And creating credentials for an API Key.

Conclusion

This will require a Google account. Signing in to the Google Cloud Platform Console.
Creating a new project. Enabling the Google Maps JavaScript API and Places API for the project.
And creating credentials for an API Key. Warning: To avoid the “For development purposes only” messages when using the Google Maps API, you will need to provide a valid credit card and associate with a Billing account for the Google Cloud Project.
Please be aware of the fees that are associated with using these APIs.
This tutorial was verified with Node v14.13.1, npm v6.14.8, vue v2.6.11, and vue2-google-maps v0.10.7.
You can use @vue/cli to create a new Vue.js project.
In your terminal window, use the following command:. This will use the default configurations for creating a Vue.js Project.
Navigate to the newly created project directory:. Start the project to verify that there are no errors.
If you visit the local app (typically at localhost:8080) in your web browser, you will see a "Welcome to Your Vue.js App" message.
With this scaffolding set in place, you can install the vue2-google-maps package.