Skip to main content

GmapVue for Vue 3

warning

This documentation is under development, it contains the main points and examples but we continue working on it. Please if you find a bug or something that is not correct, feel free to report it or send a PR to improve it. Thank you.

Installation​

npm install @gmap-vue/v3 --save

Using a CDN​

You can use a free CDN like jsdelivr to include this plugin in your html file

<script src="https://cdn.jsdelivr.net/npm/@gmap-vue/v3/dist/main.umd.js"></script>
warning

Be aware that if you use this method, you cannot use TitleCase for your components and your attributes. That is, instead of writing <GmvMap>, you need to write <gmv-map>.

Global styles​

The plugin exports a simple css file to add minimum styles to the main GmvMap component.

main.ts
import { createGmapVuePlugin } from '@gmap-vue/v3';
import { createApp } from 'vue';
import '@gmap-vue/v3/dist/style.css';
import App from './App.vue';
import './style.css';

const app = createApp(App);
app.use(createGmapVuePlugin({
  load: { key: '...' },
}));
app.mount('#app');

Dynamic Library Import​

We follow the recommendation of the Google Maps team, who encourages to tuse the dynamic load of the library. For more information please follow this link.

Migrating from version for Vue 2​

  • You can import the package from '@gmap-vue/v3' instead of 'gmap-vue'
  • The install fucntion of the plugin now is not exported by default, it is exported by name as we show below
import { createGmapVuePlugin } from '@gmap-vue/v3';
  • All components now are lazy loaded, that means if you don't use it in your code they are not include in your final bundle. This change makes the installComponents property unuseful.
  • The config proerty installComponents was removed.
  • The $gmapDefaultResizeBus global property was removed.
  • The customCallback option is deprecated
  • We add a new global property $gmapOptions it contains the final options object received by the plugin.
  • All components now are prefixed with Gmv, eg: GmvMap in the case of the Map component.
  • The initGoogleMapsApi now is called googleMapsApiInitializer
  • The MapElementFactory now is called pluginComponentBuilder
  • The GoogleMapsApi now is only a global variable attached to the window object
  • All mixins were removed, now they are composable functions
  • Many of the old factories and helpers now are internal composable functions and they are not exposed by the plugin because, is not intended to be used.
  • The createGoogleMapsAPIInitializer now is called googleMapsAPIInitializerFactory, and it is an internal function of the plugin.
  • The mapped-props concept was removed from the plugin and now every component has its props defined on it.
note

If we missed some of the bracking changes, feel free to open a PR to add them to this list.