x5-gmaps (Live Demo)

This is a lightweight Google Maps plugin for Vue.

⚠️ This plugin is in development, so please let me know if you find any errors.

Installation

# npm
npm install x5-gmaps

Deployment

This plugin can be installed like any Vue plugin:

import x5GMaps from 'x5-gmaps'
Vue.use(x5GMaps, options)

new Vue({
  el: '#app',
  render: (h) => h(App),
})

Options should be your key, or an object with your key and any additional options you want included in Google Maps:

Vue.use(x5GMaps, 'a987asdfg34h7fklawhlkfha')
// OR with libraries
Vue.use(x5GMaps, { key: 'YOUR_GOOGLE_KEY', libraries: ['places'] })

Usage

This plugin makes available $GMaps() which returns a promise that resolves with windows.google.maps after it has loaded. It will timeout after 5 seconds if it cannot retrieve API access.

const GMaps = await this.$GMaps()
const myInfoWindow = new GMaps.InfoWindow({ ... })

⚠️ This plugin is not transpiled! If you want to include it for use on IE or Edge, you need to add this to your vue.config.js file:

module.exports = {
  transpileDependencies: ['x5-gmaps'],
}

Provided Components

Some pre-built components have been provided for general use, or as examples for those who wish to take them further.

Map

Maps can take many options. zoom is defaulted to 12 and center is defaulted to Brisbane (as these options are required).

This component supports the following events:

• @boundsChanged returns new bounds
• @centerChanged returns new center
• @click returns event
• @doubleClick returns event
• @rightClick returns event
• @mouseover returns event
• @mouseout returns event

<template>
  <gmaps-map :options="mapOptions" />
</template>

<script>
  import { gmapsMap } from 'x5-gmaps'

  export default {
    components: { gmapsMap },
    data: () => ({
      mapOptions: {
        center: { lat: -27.47, lng: 153.025 },
        zoom: 12,
      },
    }),
  }
</script>

Marker

Markers are placed within Maps and can take many options. A position option is required within the options prop or as its own prop.

This component supports the following events:

• @move returns new position { lat, lng }
• @click returns event
• @doubleClick returns event
• @rightClick returns event
• @positionChanged (depreciated) returns new position

* If you want to change values on the fly, use the named props instead of within the options prop. Changing named props will trigger an update.

<template>
  <gmaps-map>
    <gmaps-marker v-for="(item, i) in items" :key="i" :options="item.options" />
  </gmaps-map>
</template>

<script>
  import { gmapsMap, gmapsMarker } from 'x5-gmaps'

  export default {
    components: { gmapsMap, gmapsMarker },
    data: () => ({
      items: [
        { options: { position: { lat: -27.41, lng: 153.01 } } },
        { options: { position: { lat: -27.42, lng: 153.02 } } },
        ...,
        { options: { position: { lat: -27.48, lng: 153.08 } } },
        { options: { position: { lat: -27.49, lng: 153.09 } } },
      ],
    }),
  }
</script>

InfoWindow

InfoWindows are placed with Maps can take a few options. A position option is required.

They are used to put HTML in and have a close/dismiss button built-in.

This component only supports a @closed event (for when someone closes the window)

<template>
  <gmaps-map :options="mapOptions">
    <gmaps-info-window :options="options">
      <p>Example Text</p>
    </gmaps-info-window>
  </gmaps-map>
</template>

<script>
  import { gmapsMap, gmapsInfoWindow } from 'x5-gmaps'

  export default {
    components: { gmapsMap, gmapsInfoWindow },
    data: () => ({
      options: {
        position: { lat: -27.46, lng: 153.02 },
      },
      mapOptions: {
        center: { lat: -27.47, lng: 153.025 },
        zoom: 12,
      },
    }),
  }
</script>

Popup

A Popup is a custom DOM Element. It is here primarily as an example of what is needed when creating your own map objects, but serves as a cleaner InfoWindow for Vue.

It takes the following props:

• position (req'd)
• background (style)
• height (style)
• width (style)

All events are registered from the markup/component you place inside it rather than the popup itself.

<template>
  <gmaps-map :options="mapOptions">
    <gmaps-popup :position="position" background="#BBF0FF">
      <span @click="doSomething()">Do Something</span>
    </gmaps-popup>
  </gmaps-map>
</template>

<script>
  import { gmapsMap, gmapsPopup } from 'x5-gmaps'

  export default {
    components: { gmapsMap, gmapsPopup },
    data: () => ({
      position: { lat: -27.46, lng: 153.02 },
      mapOptions: {
        center: { lat: -27.47, lng: 153.025 },
        zoom: 12,
      },
    }),
  }
</script>

Heatmap

Heatmaps are placed within Maps and have several props which are derived from the GoogleMaps Heatmap Options. Some are named differently as they have been enhanced/simplified.

This component does not have any events.

** Note require to include the "visualization" library as described in Deployment

<template>
  <gmaps-map>
    <gmaps-heatmap :data="items" :opacity="0.8" />
  </gmaps-map>
</template>

<script>
  import { gmapsMap, gmapsHeatmap } from 'x5-gmaps'

  export default {
    components: { gmapsMap, gmapsHeatmap },
    data: () => ({
      items: [
        { lat: -27.41, lng: 153.01 },
        { lat: -27.42, lng: 153.02 },
        ...,
        { lat: -27.48, lng: 153.08 },
        { lat: -27.49, lng: 153.09 },
      ],
    }),
  }
</script>

⚠️ It's highly recommended to check out the demo at the top of this readme to have a play around.

Contributing

Please read CONTRIBUTING.md for the process for submitting pull requests.

Authors

• Keagan Chisnall

License

This project is licensed under the MIT License - see the LICENSE.md file for details