[go: up one dir, main page]
❤
npm
Sign UpSign In

vue-googlemaps

0.1.2 • Public • Published

vue-googlemaps

npm npm vue2

Integrate Google Maps in your Vue application in a "Vue-way".

This library is Work In Progress. More components will be available in the 1.0 release.

Live demo

The 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...).

Become a Patreon

Sponsors

Silver

VueSchool logo

Bronze


Table of Contents

Installation

npm i -S vue-googlemaps

yarn add vue-googlemaps

You need to polyfill some ES2015 features in old browsers.

Usage

You need a Google API key from the developer console.

import 'vue-googlemaps/dist/vue-googlemaps.css'
import VueGoogleMaps from 'vue-googlemaps'
 
Vue.use(VueGoogleMaps, {
  load: {
    // Google API key
    apiKey: 'your-google-api-key',
    // Enable more Google Maps libraries here
    libraries: ['places'],
    // Use new renderer
    useBetaRenderer: false,
  },
})

Builtin components

(Documentation is work-in-progress)

  • Circle
  • Geocoder
  • Map
  • Marker
  • NearbyPlaces
  • PlaceDetails
  • UserPosition
  • More to come!

Create you own components

Here is an example of what a Marker component would look like:

import { MapElement } from 'vue-googlemaps'
 
// Those Vue props will update automatically
// (Two-way binding with .sync modifier)
const boundProps = [
  'animation',
  'clickable',
  'cursor',
  'draggable',
  // ...
]
 
// Events from Google Maps emitted as Vue events
const redirectedEvents = [
  'click',
  'rightclick',
  'dblclick',
  'drag',
  // ...
]
 
export default {
  mixins: [
    // You need to use this mixin
    MapElement,
  ],
 
  // When Google Maps is ready
  googleMapsReady () {
    const options = Object.assign({}, this.$props)
    options.map = this.$_map
 
    // Create Google Maps objects
    this.$_marker = new window.google.maps.Marker(options)
    // Bind the Vue props
    this.bindProps(this.$_marker, boundProps)
    // Emit the events from Google Maps
    this.redirectEvents(this.$_marker, redirectedEvents)
  },
 
  beforeDestroy () {
    // Teardown
    if (this.$_marker) {
      this.$_marker.setMap(null)
    }
  },
}

Quick Examples

Map with markers

<googlemaps-map
  :center.sync="center"
  :zoom.sync="zoom"
  :options="mapOptions"
  @idle="onIdle"
  @click="onMapClick">
 
  <!-- User Position -->
  <googlemaps-user-position
    @update:position="setUserPosition"
  />
 
  <googlemaps-marker
    v-for="marker of markers"
    :key="marker._id"
    :label="{
      color: marker === currentmarker ? 'white' : 'black',
      fontFamily: 'Material Icons',
      fontSize: '20px',
      text: 'star_rate',
    }"
    :position="marker.position"
    @click="selectMarker(marker._id)"
  />
</googlemaps-map>

Place Details

<googlemaps-place-details
  :request="{
    placeId: placeId
  }"
  @results="results => ..."
>
  <template slot-scope="props">
    <div class="name">{{ props.results.name }}</div>
    <div class="address">{{ props.results.formatted_address }}</div>
  </template>
</googlemaps-place-details>

Geocoder

<googlemaps-geocoder
  :request="{
    location: latLng,
  }"
  @results="results => ..."
>
  <template slot-scope="props">
    <div class="name">{{ props.results[1].name }}</div>
    <div class="address">{{ props.results[0].formatted_address }}</div>
  </template>
</googlemaps-geocoder>

Nearby places

<googlemaps-map
  @idle="map => mapBounds = map.getBounds()"
/>
 
<googlemaps-nearby-places
  :request="{
    bounds: mapBounds
  }"
  :filter="result => !result.types.includes('locality')"
  @results="results => ..."
>
  <template slot-scope="props">
    <div v-if="props.loading">Loading...</div>
 
    <div v-for="result of props.result">
      <div>
        <img
          v-if="result.photos"
          :src="result.photos[0].getUrl({ maxWidth: 80, maxHeight: 80 })"
        />
        {{ result.name }}
      </div>
      <div>{{ result.vicinity }}</div>
    </div>
  </template>
</googlemaps-nearby-places>

Readme

Keywords

none

Package Sidebar

Install

npm i vue-googlemaps

Repository

github.com/Akryum/vue-googlemaps

Homepage

github.com/Akryum/vue-googlemaps#readme

Weekly Downloads

570

Version

0.1.2

License

MIT

Unpacked Size

386 kB

Total Files

10

Last publish

Collaborators

  • akryum
Try on RunKit
Report malware