Integrate Google Maps in your Vue application

Last update: Jun 27, 2022

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

Gold

sum.cumo logo

Silver

VueSchool logo Vue Mastery 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>

GitHub

https://github.com/Akryum/vue-googlemaps
Comments
  • 1. I tried, but don't show anything

    The first, very thanks for this ūüĎć But don't show anything (Meteor + Vue)

    // index startup
    import 'vue-googlemaps/dist/vue-googlemaps.css';
    import VueGoogleMaps from 'vue-googlemaps';
    Vue.use(VueGoogleMaps, {
        load: {
            apiKey: 'my-key',
            // libraries: ['places'],
        },
    });
    ---------------
    // Component
    <template>
        <div>
            <h2>Map</h2>
    
            <googlemaps-map :center.sync="center" :zoom.sync="zoom">
            </googlemaps-map>
        </div>
    </template>
    
    <script>
    export default {
        data() {
            return {
                center: { lat: 13.090618, lng: 103.208516 },
                zoom: 8,
            };
        },
        methods: {
        }
    };
    </script>
    
    <style scoped>
    
    </style>
    
    Reviewed by thearabbit at 2017-09-27 02:29
  • 2. Using with Nuxt.js

    I'm having an issue using this component with Nuxt.js, I wonder if you have any ideas?

    The map loads blank and as soon as I attempt to interact I get the following error in the console:

    Uncaught TypeError: Cannot read property 'x' of undefined
    

    This is the stripped back test case I'm using (modified version of hello world example):

    // pages/index.vue
    
    <script>
    import Vue from 'vue'
    import 'vue-googlemaps/dist/vue-googlemaps.css'
    import VueGoogleMaps from 'vue-googlemaps'
    
    Vue.use(VueGoogleMaps, {
      load: {
        apiKey: API_KEY,
        libraries: []
      }
    })
    
    export default {
      data () {
        return {
          center: { lat: 0, lng: 0 }
        }
      },
      methods: {
        ready () {
          this.$refs.map.resize()
        }
      }
    }
    </script>
    
    <template>
      <div>
        <h1>Welcome!</h1>
        <nuxt-link to="/about">About page</nuxt-link>
        <googlemaps-map ref="map" :center="center" @ready="ready"></googlemaps-map>
      </div>
    </template>
    
    <style>
    .vue-google-map {
      width: 500px;
      height: 400px;
    }
    </style>
    

    I found a suggestion that the element may not be ready when the map is initialised so I added an arbitrary delay in the googleMapsReady() function but this didn't help either.

    Another suggestion was to try calling resize() which you can see I've tried in this test, again no help.

    Thanks in advance!

    Reviewed by homerjam at 2017-10-26 14:02
  • 3. Custom marker dynamically

    Hi ! I would like to custom one marker on click or on hover. It could be by reducing its opacity or changing its icon. I created my own component like this :

    My component markerPlaces.vue

    <template lang="html">
      <div>  </div>
    </template>
    
    <script>
    import { MapElement } from 'vue-googlemaps'
    import markerIcon from '~/assets/img/location-pointer.svg'
    import { EventBus } from '~/plugins/event-bus.js'
    
    // Those Vue props will update automatically
    // (Two-way binding with .sync modifier)
    const boundProps = [
    	'animation',
    	'clickable',
    	'cursor',
    ]
    
    // Events from Google Maps emitted as Vue events
    const redirectedEvents = [
    	'click',
    	'rightclick',
    ]
    
    export default {
      data () {
        return {
          // create new options object with origin property
          // allows reactivity on filtering
          opt: {
            position : {},
            icon: {}
          }
        }
      },
      mixins: [
        MapElement
      ],
      props: ['marker'],
      // When Google Maps is ready
      async googleMapsReady () {
          const options = await Object.assign(this.opt, {
              position: this.marker.position,
              icon: {
                    url: markerIcon,
                    scaledSize: new window.google.maps.Size(25, 32)
              }
        }, 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) {
          // console.log('marker hidden', this.$_marker.marker);
    			this.$_marker.setMap(null)
    		}
    	}
    }
    </script>
    

    My vue

    <template>
      <no-ssr>
        <section style="width: 100%" class="map">
            <googlemaps-map
              ref="mapRef"
              :center.sync="center"
              :zoom.sync="zoom"
              :options="mapOptions"
              @ready="ready"
            >
              <googlemaps-user-position
                :clickable="true"
                @click="centerOnUser"
                :positionStyle="positionStyle"
                @update:position="setUserPosition" />
    
              <markers-places
                v-for="(marker, index) of markers"
                :key="marker.id"
                :marker="marker"
                :class="{activeMarker: marker.id == selected}"
                @click="updateStateMarker(marker, index)"
              >
              </markers-places>
            </googlemaps-map>
          <div class="map__overlay"></div>
        </section>
      </no-ssr>
    </template>
    
    <script>
    import mapStyle from '~/assets/json/mapStyle.json'
    import * as VueGoogleMaps from 'vue-googlemaps'
    import { EventBus } from '~/plugins/event-bus.js'
    import markersPlaces from './markersPlaces.vue'
    import markerUser from './markerUser.vue'
    
    export default {
      name: 'mapComponent',
      data () {
       return {
        center: { lat: 47.218371, lng: -1.553621 },
        zoom: 14,
        mapOptions: {
          gestureHandling: 'greedy',
          draggable: true,
          zoomControl: true,
          mapTypeId: 'roadmap',
          styles: mapStyle
        },
        positionStyle: {
          path: 'M2.1999999999999993,11a8.8,8.8 0 1,0 17.6,0a8.8,8.8 0 1,0 -17.6,0',
    			fillColor: '#2E86DE',
    			fillOpacity: 1,
    			scale: 1,
    			strokeColor: '#8FBBE7',
    			strokeWeight: 5
        },
        userPosition: {lat: 48.8445639, lng: 2.422224},
        selected: undefined
       }
      },
      components: {
        'markers-places': markersPlaces,
        'marker-user': markerUser
      },
      computed: {
        // userCoordinates() {
        //   return this.$store.getters['geolocation/getUserPosition']
        // },
        isLocated() {
          return this.$store.getters['geolocation/getIsLocated']
        },
        markers() {
          // console.log('markers', this.$store.getters['geolocation/getLocations']);
          return this.$store.getters['geolocation/getLocations']
        }
      },
      created () {
        EventBus.$on('i-got-swiped', index => {
          this.panToMarker(index)
        })
      },
      methods: {
        setUserPosition(position) {
          console.log('position', position);
          this.userPosition = position
          // push the last watch position in store
          this.$store.dispatch('geolocation/setUserPosition', this.userPosition )
        },
        ready () {
          this.$refs.mapRef.resize()
        },
        centerOnUser () {
          if (this.userPosition) {
            if (this.zoom <= 12) {
              this.zoom = Math.max(15, 12)
            }
            this.$refs.mapRef.panTo(this.userPosition)
          }
        },
        updateStateMarker (marker, index) {
          if (this.zoom <= 12) {
            this.zoom = Math.max(15, 12)
          }
          if(marker !== undefined) {
            this.selected = marker.id
            this.$refs.mapRef.panTo(marker.position)
          }
          // Send the event on a channel (i-got-clicked) with a payload (index of the clicked marker.)
          EventBus.$emit('i-got-clicked', index)
        },
        panToMarker (index) {
          if (this.zoom <= 12) {
            this.zoom = Math.max(15, 12)
          }
          if(this.markers[index] !== undefined) {
            this.center = this.markers[index].position
          }
        }
      }
    }
    </script>
    
    Reviewed by thanhthaohoang at 2018-06-18 14:26
  • 4. Can Markers support InfoWindow?

    I've attempted to add content when rendering the Marker components, but the "slot" content seems to just be ignored.

    <googlemaps-marker
      :key="..."
      :title="..."
      :position="..."
    >
      <div>Info Window</div>
    </googlemaps-marker>
    

    I see comments in the code about supporting the infowindow inside a Marker, but it doesn't seem to work as I would expect.

    render (h) {
      if (!this.$slots.default || this.$slots.default.length === 0) {
        return ''
      } else if (this.$slots.default.length === 1) {
        // So that infowindows can have a marker parent
        return this.$slots.default[0]
      } else {
        return h(
          'div',
          this.$slots.default
        )
      }
    },
    

    Am I missing something? Thanks for the work you're doing!

    Reviewed by jcartwright at 2018-01-10 04:53
  • 5. How to set `right click prop` option on Map?

    I would like to set right click prop option on Map. Please help me.

    <googlemaps-map id="map" :center.sync="center" :zoom.sync="zoom">
    </googlemaps-map>
    

    image

    Reviewed by thearabbit at 2017-09-27 08:14
  • 6. Can't drag and drop map correctly, marker moves with drag direction

    This issue occurs on the demo page as well (using Chrome/MacOS): If you try to scroll the map by using drag and drop, it only moves by a very small distance, then sticking until you drag and drop again. As this is a little hard to put into words, I've made a GIF:

    feb -15-2018 13-05-01

    In my own case, the marker seems to move with the map if I drag and drop: feb -15-2018 13-07-24

    maps.google.com works fine, as other embedded maps (without this Vue component) do. Any idea what causes this and how to resolve it?

    Reviewed by Radiergummi at 2018-02-15 12:09
  • 7. InvalidValueError: setPosition: not a LatLng or LatLngLiteral: in property lat: not a number

    This was working when I first added everything and then all of a sudden it does not work any more.

    The only error I get is this one:

    InvalidValueError: setPosition: not a LatLng or LatLngLiteral: in property lat: not a number

    I tried to parseFloat the value, I copied exactly what you had in the sample simple map and it did not work. What is going on?

    Reviewed by wahiche at 2017-11-12 18:27
  • 8. Is there slot for marker?

    I want to customize markers. It has two lines of text and each line has different style. And the two lines are wrapped with in a white box with border-radius: 4. How can I achieve this?

    Reviewed by diamond122 at 2019-08-20 12:56
  • 9. The marker is not generated

    Hi I tried to use your plugin in a basic way: basic map and one marker with icon. But I have some problems. The marker is visible in the VueDevtools, but not on the page... I tried both with icon and without it.. I use nuxt.js, but I have already tried both server-side an client-side render, but I had no success.. :-( The map is working, but not the marker.

    It is my code..

    <div class="contacts__map">
    	<googlemaps-map class="map"	:center="{lat: -25.363, lng: 131.044}" :zoom="17">
    		<googlemaps-marker :position="{lat: -25.363, lng: 131.044}"></googlemaps-marker>
    	</googlemaps-map>
    </div>
    

    and devtools image

    Reviewed by AGrinx at 2017-09-28 10:55
  • 10. chore(deps-dev): bump rollup from 0.50.1 to 2.55.0

    Bumps rollup from 0.50.1 to 2.55.0.

    Release notes

    Sourced from rollup's releases.

    v2.55.0

    2021-07-28

    Features

    • Support default export live-bindings when generating ESM output (#4182)

    Bug Fixes

    • Always write ["default"] as computed property when used as named export (#4182)
    • Do not mask default export TDZ errors (#4182)

    v2.54.0

    2021-07-25

    Features

    • Extend UMD import.meta.url polyfill to support web workers (#4186)

    Bug Fixes

    • Resolve an issue where certain uses of classes could lead to an infinite recursion (#4189)

    Pull Requests

    v2.53.3

    2021-07-21

    Bug Fixes

    • Solve an issue that could lead to severe memory issues and crashes when there are a lot of hoisted variables (#4183)

    Pull Requests

    v2.53.2

    2021-07-15

    Bug Fixes

    • Identify additional TDZ situations in functions that are run more than once (#4177)
    • Fix a scoping issue when a variable inside a catch scope matches the scope parameter's name (#4178)

    Pull Requests

    v2.53.1

    2021-07-11

    Bug Fixes

    • Do not omit namespace reexports when treeshake is false (#4175)

    ... (truncated)

    Changelog

    Sourced from rollup's changelog.

    2.55.0

    2021-07-28

    Features

    • Support default export live-bindings when generating ESM output (#4182)

    Bug Fixes

    • Always write ["default"] as computed property when used as named export (#4182)
    • Do not mask default export TDZ errors (#4182)

    Pull Requests

    2.54.0

    2021-07-25

    Features

    • Extend UMD import.meta.url polyfill to support web workers (#4186)

    Bug Fixes

    • Resolve an issue where certain uses of classes could lead to an infinite recursion (#4189)

    Pull Requests

    2.53.3

    2021-07-21

    Bug Fixes

    • Solve an issue that could lead to severe memory issues and crashes when there are a lot of hoisted variables (#4183)

    Pull Requests

    2.53.2

    2021-07-15

    Bug Fixes

    • Identify additional TDZ situations in functions that are run more than once (#4177)
    • Fix a scoping issue when a variable inside a catch scope matches the scope parameter's name (#4178)

    Pull Requests

    2.53.1

    2021-07-11

    ... (truncated)

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language
    • @dependabot badge me will comment on this PR with code to add a "Dependabot enabled" badge to your readme

    Additionally, you can set the following in your Dependabot dashboard:

    • Update frequency (including time of day and day of week)
    • Pull request limits (per update run and/or open at any time)
    • Automerge options (never/patch/minor, and dev/runtime dependencies)
    • Out-of-range updates (receive only lockfile updates, if desired)
    • Security updates (receive only security updates, if desired)
    Reviewed by dependabot-preview[bot] at 2021-07-29 04:16
  • 11. chore(deps-dev): bump rollup from 0.50.1 to 2.54.0

    Bumps rollup from 0.50.1 to 2.54.0.

    Release notes

    Sourced from rollup's releases.

    v2.54.0

    2021-07-25

    Features

    • Extend UMD import.meta.url polyfill to support web workers (#4186)

    Bug Fixes

    • Resolve an issue where certain uses of classes could lead to an infinite recursion (#4189)

    Pull Requests

    v2.53.3

    2021-07-21

    Bug Fixes

    • Solve an issue that could lead to severe memory issues and crashes when there are a lot of hoisted variables (#4183)

    Pull Requests

    v2.53.2

    2021-07-15

    Bug Fixes

    • Identify additional TDZ situations in functions that are run more than once (#4177)
    • Fix a scoping issue when a variable inside a catch scope matches the scope parameter's name (#4178)

    Pull Requests

    v2.53.1

    2021-07-11

    Bug Fixes

    • Do not omit namespace reexports when treeshake is false (#4175)

    Pull Requests

    v2.53.0

    2021-07-09

    Features

    • Add maxParallelFileReads option to limit read operations with a default of 20 (#4170)

    ... (truncated)

    Changelog

    Sourced from rollup's changelog.

    2.54.0

    2021-07-25

    Features

    • Extend UMD import.meta.url polyfill to support web workers (#4186)

    Bug Fixes

    • Resolve an issue where certain uses of classes could lead to an infinite recursion (#4189)

    Pull Requests

    2.53.3

    2021-07-21

    Bug Fixes

    • Solve an issue that could lead to severe memory issues and crashes when there are a lot of hoisted variables (#4183)

    Pull Requests

    2.53.2

    2021-07-15

    Bug Fixes

    • Identify additional TDZ situations in functions that are run more than once (#4177)
    • Fix a scoping issue when a variable inside a catch scope matches the scope parameter's name (#4178)

    Pull Requests

    2.53.1

    2021-07-11

    Bug Fixes

    • Do not omit namespace reexports when treeshake is false (#4175)

    Pull Requests

    2.53.0

    2021-07-09

    Features

    • Add maxParallelFileReads option to limit read operations with a default of 20 (#4170)

    ... (truncated)

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language
    • @dependabot badge me will comment on this PR with code to add a "Dependabot enabled" badge to your readme

    Additionally, you can set the following in your Dependabot dashboard:

    • Update frequency (including time of day and day of week)
    • Pull request limits (per update run and/or open at any time)
    • Automerge options (never/patch/minor, and dev/runtime dependencies)
    • Out-of-range updates (receive only lockfile updates, if desired)
    • Security updates (receive only security updates, if desired)
    Reviewed by dependabot-preview[bot] at 2021-07-26 04:19
  • 12. chore(deps-dev): bump npm-watch from 0.2.0 to 0.11.0

    Bumps npm-watch from 0.2.0 to 0.11.0.

    Release notes

    Sourced from npm-watch's releases.

    Shiny

    • Changed inherit flag to set stderr as inherit instead of pipe 119316e

    https://github.com/M-Zuber/npm-watch/compare/v0.10.0...v0.11.0

    Necromany Badge

    • Add concept of global config, and use that to control setMaxListeners f77bf4f
    • Add Common Issues section to readme 2b85b79

    https://github.com/M-Zuber/npm-watch/compare/v0.9.0...v0.10.0

    Actual Content?!

    • Fix being able to use rs to restart processes bdf6313

    https://github.com/M-Zuber/npm-watch/compare/v0.8.0...v0.9.0

    ūüźį

    • Dependency updates eba88d3
    • Fluff out the documentation a bit 700be2d
    • Add package-lock.json to .gitignore e992bcf
    • Delete package-lock.json 47a77bf
    • Bump ini from 1.3.5 to 1.3.7 e9cd41e

    https://github.com/M-Zuber/npm-watch/compare/v0.7.0...v0.8.0

    How long is it?

    • Add verbose option
    • Added config flag to clear the buffer on file changes
    • Clean up documentation

    Thank you to @‚Äčkaycebasques, @‚ÄčLeo7654, @‚Äčcharlesbdudley for your kind contributions!

    https://github.com/M-Zuber/npm-watch/compare/v0.5.0...v0.6.0

    ūüĒź #minergate

    No release notes provided.

    End the drought

    No release notes provided.

    ⬆

    Update nodemon version

    Commits
    • 2683c85 0.11.0
    • 119316e Changed inherit flag to set stderr as inherit instead of pipe
    • 9e17145 0.10.0
    • f77bf4f Add concept of global config, and use that to control setMaxListeners
    • 2b85b79 Add Common Issues section to readme
    • a030e14 0.9.0
    • bdf6313 Fix being able to use rs to restart processes
    • dc37969 0.8.0
    • eba88d3 Dependency updates
    • 700be2d Fluff out the documentation a bit
    • Additional commits viewable in compare view

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language
    • @dependabot badge me will comment on this PR with code to add a "Dependabot enabled" badge to your readme

    Additionally, you can set the following in your Dependabot dashboard:

    • Update frequency (including time of day and day of week)
    • Pull request limits (per update run and/or open at any time)
    • Automerge options (never/patch/minor, and dev/runtime dependencies)
    • Out-of-range updates (receive only lockfile updates, if desired)
    • Security updates (receive only security updates, if desired)
    Reviewed by dependabot-preview[bot] at 2021-08-02 04:20
  • 13. chore(deps-dev): bump rollup from 0.50.1 to 2.55.1

    Bumps rollup from 0.50.1 to 2.55.1.

    Release notes

    Sourced from rollup's releases.

    v2.55.1

    2021-07-29

    Bug Fixes

    • Improve CLI warning message for unused external imports (#4194)

    Pull Requests

    v2.55.0

    2021-07-28

    Features

    • Support default export live-bindings when generating ESM output (#4182)

    Bug Fixes

    • Always write ["default"] as computed property when used as named export (#4182)
    • Do not mask default export TDZ errors (#4182)

    v2.54.0

    2021-07-25

    Features

    • Extend UMD import.meta.url polyfill to support web workers (#4186)

    Bug Fixes

    • Resolve an issue where certain uses of classes could lead to an infinite recursion (#4189)

    Pull Requests

    v2.53.3

    2021-07-21

    Bug Fixes

    • Solve an issue that could lead to severe memory issues and crashes when there are a lot of hoisted variables (#4183)

    Pull Requests

    v2.53.2

    2021-07-15

    Bug Fixes

    • Identify additional TDZ situations in functions that are run more than once (#4177)
    • Fix a scoping issue when a variable inside a catch scope matches the scope parameter's name (#4178)

    ... (truncated)

    Changelog

    Sourced from rollup's changelog.

    2.55.1

    2021-07-29

    Bug Fixes

    • Improve CLI warning message for unused external imports (#4194)

    Pull Requests

    2.55.0

    2021-07-28

    Features

    • Support default export live-bindings when generating ESM output (#4182)

    Bug Fixes

    • Always write ["default"] as computed property when used as named export (#4182)
    • Do not mask default export TDZ errors (#4182)

    Pull Requests

    2.54.0

    2021-07-25

    Features

    • Extend UMD import.meta.url polyfill to support web workers (#4186)

    Bug Fixes

    • Resolve an issue where certain uses of classes could lead to an infinite recursion (#4189)

    Pull Requests

    2.53.3

    2021-07-21

    Bug Fixes

    • Solve an issue that could lead to severe memory issues and crashes when there are a lot of hoisted variables (#4183)

    Pull Requests

    2.53.2

    2021-07-15

    Bug Fixes

    ... (truncated)

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language
    • @dependabot badge me will comment on this PR with code to add a "Dependabot enabled" badge to your readme

    Additionally, you can set the following in your Dependabot dashboard:

    • Update frequency (including time of day and day of week)
    • Pull request limits (per update run and/or open at any time)
    • Automerge options (never/patch/minor, and dev/runtime dependencies)
    • Out-of-range updates (receive only lockfile updates, if desired)
    • Security updates (receive only security updates, if desired)
    Reviewed by dependabot-preview[bot] at 2021-07-30 04:17
  • 14. chore(deps): [security] bump hosted-git-info from 2.7.1 to 2.8.9

    Bumps hosted-git-info from 2.7.1 to 2.8.9. This update includes a security fix.

    Vulnerabilities fixed

    Sourced from The GitHub Security Advisory Database.

    Regular Expression Denial of Service in hosted-git-info The npm package hosted-git-info before 3.0.8 are vulnerable to Regular Expression Denial of Service (ReDoS) via regular expression shortcutMatch in the fromUrl function in index.js. The affected regular expression exhibits polynomial worst-case time complexity

    Affected versions: < 2.8.9

    Changelog

    Sourced from hosted-git-info's changelog.

    2.8.9 (2021-04-07)

    Bug Fixes

    2.8.8 (2020-02-29)

    Bug Fixes

    • #61 & #65 addressing issues w/ url.URL implmentation which regressed node 6 support (5038b18), closes #66

    2.8.7 (2020-02-26)

    Bug Fixes

    • Do not attempt to use url.URL when unavailable (2d0bb66), closes #61 #62
    • Do not pass scp-style URLs to the WhatWG url.URL (f2cdfcf), closes #60

    2.8.6 (2020-02-25)

    2.8.5 (2019-10-07)

    Bug Fixes

    • updated pathmatch for gitlab (e8325b5), closes #51
    • updated pathmatch for gitlab (ffe056f)

    2.8.4 (2019-08-12)

    ... (truncated)

    Commits
    • 8d4b369 chore(release): 2.8.9
    • 29adfe5 fix: backport regex fix from #76
    • afeaefd chore(release): 2.8.8
    • 5038b18 fix: #61 & #65 addressing issues w/ url.URL implmentation which regressed nod...
    • 7440afa chore(release): 2.8.7
    • 2d0bb66 fix: Do not attempt to use url.URL when unavailable
    • f2cdfcf fix: Do not pass scp-style URLs to the WhatWG url.URL
    • e1b83df chore(release): 2.8.6
    • ff259a6 Ensure passwords in hosted Git URLs are correctly escaped
    • 624fd6f chore(release): 2.8.5
    • Additional commits viewable in compare view
    Maintainer changes

    This version was pushed to npm by nlf, a new releaser for hosted-git-info since your current version.


    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language
    • @dependabot badge me will comment on this PR with code to add a "Dependabot enabled" badge to your readme

    Additionally, you can set the following in your Dependabot dashboard:

    • Update frequency (including time of day and day of week)
    • Pull request limits (per update run and/or open at any time)
    • Automerge options (never/patch/minor, and dev/runtime dependencies)
    • Out-of-range updates (receive only lockfile updates, if desired)
    • Security updates (receive only security updates, if desired)
    Reviewed by dependabot-preview[bot] at 2021-05-07 17:53
  • 15. Upgrade to GitHub-native Dependabot

    Dependabot Preview will be shut down on August 3rd, 2021. In order to keep getting Dependabot updates, please merge this PR and migrate to GitHub-native Dependabot before then.

    Dependabot has been fully integrated into GitHub, so you no longer have to install and manage a separate app. This pull request migrates your configuration from Dependabot.com to a config file, using the new syntax. When merged, we'll swap out dependabot-preview (me) for a new dependabot app, and you'll be all set!

    With this change, you'll now use the Dependabot page in GitHub, rather than the Dependabot dashboard, to monitor your version updates, and you'll configure Dependabot through the new config file rather than a UI.

    If you've got any questions or feedback for us, please let us know by creating an issue in the dependabot/dependabot-core repository.

    Learn more about migrating to GitHub-native Dependabot

    Please note that regular @dependabot commands do not work on this pull request.

    Reviewed by dependabot-preview[bot] at 2021-04-29 19:28
  • 16. chore(deps): [security] bump y18n from 3.2.1 to 3.2.2

    Bumps y18n from 3.2.1 to 3.2.2. This update includes a security fix.

    Vulnerabilities fixed

    Sourced from The GitHub Security Advisory Database.

    Prototype Pollution

    Overview

    The npm package y18n before versions 3.2.2, 4.0.1, and 5.0.5 is vulnerable to Prototype Pollution.

    POC

    const y18n = require('y18n')();
    

    y18n.setLocale('proto'); y18n.updateLocale({polluted: true});

    console.log(polluted); // true

    Recommendation

    Upgrade to version 3.2.2, 4.0.1, 5.0.5 or later.

    Affected versions: < 3.2.2

    Commits
    Maintainer changes

    This version was pushed to npm by oss-bot, a new releaser for y18n since your current version.


    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language
    • @dependabot badge me will comment on this PR with code to add a "Dependabot enabled" badge to your readme

    Additionally, you can set the following in your Dependabot dashboard:

    • Update frequency (including time of day and day of week)
    • Pull request limits (per update run and/or open at any time)
    • Automerge options (never/patch/minor, and dev/runtime dependencies)
    • Out-of-range updates (receive only lockfile updates, if desired)
    • Security updates (receive only security updates, if desired)
    Reviewed by dependabot-preview[bot] at 2021-03-29 17:21
  • 17. chore(deps): [security] bump yargs-parser from 5.0.0 to 5.0.1

    Bumps yargs-parser from 5.0.0 to 5.0.1. This update includes a security fix.

    Vulnerabilities fixed

    Sourced from The GitHub Security Advisory Database.

    Prototype Pollution in yargs-parser Affected versions of yargs-parser are vulnerable to prototype pollution. Arguments are not properly sanitized, allowing an attacker to modify the prototype of Object, causing the addition or modification of an existing property that will exist on all objects.
    Parsing the argument --foo.__proto__.bar baz' adds a bar property with value baz to all objects. This is only exploitable if attackers have control over the arguments being passed to yargs-parser.

    Recommendation

    Upgrade to versions 13.1.2, 15.0.1, 18.1.1 or later.

    Affected versions: <= 5.0.0

    Release notes

    Sourced from yargs-parser's releases.

    yargs-parser v5.0.1

    Bug Fixes

    • security: address GHSA-p9pc-299p-vxgp (#362) (1c417bd)
    Changelog

    Sourced from yargs-parser's changelog.

    5.0.0 (2017-02-18)

    Bug Fixes

    • environment variables should take precedence over config file (#81) (76cee1f)

    BREAKING CHANGES

    • environment variables will now override config files (args, env, config-file, config-object)

    5.0.1 (2021-03-10)

    Bug Fixes

    • security: address GHSA-p9pc-299p-vxgp (#362) (1c417bd)

    4.2.1 (2017-01-02)

    Bug Fixes

    4.2.0 (2016-12-01)

    Bug Fixes

    • inner objects in configs had their keys appended to top-level key when dot-notation was disabled (#72) (0b1b5f9)

    Features

    • allow multiple arrays to be provided, rather than always combining (#71) (0f0fb2d)

    4.1.0 (2016-11-07)

    ... (truncated)

    Commits
    Maintainer changes

    This version was pushed to npm by oss-bot, a new releaser for yargs-parser since your current version.


    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language
    • @dependabot badge me will comment on this PR with code to add a "Dependabot enabled" badge to your readme

    Additionally, you can set the following in your Dependabot dashboard:

    • Update frequency (including time of day and day of week)
    • Pull request limits (per update run and/or open at any time)
    • Automerge options (never/patch/minor, and dev/runtime dependencies)
    • Out-of-range updates (receive only lockfile updates, if desired)
    • Security updates (receive only security updates, if desired)
    Reviewed by dependabot-preview[bot] at 2021-03-17 04:16
A set of composable components for easy use of Google Maps in your Vue 3 projects.

A set of composable components for easy use of Google Maps in your Vue 3 projects.

Jun 24, 2022
Google maps component for vue with 2-way data binding

CONTRIBUTORS NEEDED! It's been increasingly difficult for me to make time to maintain this project. My projects at work have also gradually migrated a

Jul 3, 2022
A lightweight Google Maps plugin for Vue
A lightweight Google Maps plugin for Vue

x5-gmaps (Live Demo) This is a lightweight Google Maps plugin for Vue. Samples/examples/tutorials Tutorial creating a COVID Heatmap Address Autocomple

Apr 22, 2022
Google maps component for vue with 2-way data binding

vue-google-maps Demo: Demo in production Showcase with a lot of features Presentation If you want to write google map this way : <map :center="{lat:

May 25, 2022
Reactive Vue 3 components for Google maps

Vue 3 Google maps Components Set of mostly used Google Maps components for Vue.js. Why this library exists? We heavily use Google Maps in our projects

Jul 3, 2022
Using Google Maps with Vue.js

stores-map Project setup npm install Compiles and hot-reloads for development npm run serve Compiles and minifies for production npm run build Run

Apr 22, 2022
ūüďć Vue composable for Google Maps Places Autocomplete.

v-use-places-autocomplete ?? Vue composable for Google Maps Places Autocomplete. Though not a fork, this composable is fully inspired by react-google-

Jun 28, 2022
A wrapper component for consuming Google Maps API built on top of VueJs v2.

A wrapper component for consuming Google Maps API built on top of VueJs v2. Fork of the popular vue-google-maps plugin.

Jun 30, 2022
Traveliko - Travel with Friends ~ Web application prepared using Google Street View API that allows you to real-time travel with your friends in the same place in street view mode.
Traveliko - Travel with Friends ~ Web application prepared using Google Street View API that allows you to real-time travel with your friends in the same place in street view mode.

Traveliko - Travel with Friends! You can create a room with your friends and travel in street view mode and navigate the map. The application basicall

Mar 3, 2022
Vue 2 components for Leaflet maps
Vue 2 components for Leaflet maps

Vue2Leaflet Vue2Leaflet is a JavaScript library for the Vue framework that wraps Leaflet making it easy to create reactive maps. How to install npm in

Jun 22, 2022
Yandex Maps Component for VueJS
Yandex Maps Component for VueJS

vue-yandex-maps Documentation: RU, EN Contributors ‚ú® Thanks goes to these wonderful people (emoji key): Wormaster ?? Nikitenko Andrey ?? Kamil ?? Alex

Jun 24, 2022
Annotate maps and generate GeoJSON in Kirby by drawing markers, paths and shapes
Annotate maps and generate GeoJSON in Kirby by drawing markers, paths and shapes

Kirby Mapnotator Annotate maps and generate GeoJSON in Kirby by drawing markers, paths and shapes. Overview This plugin is completely free and publish

Jun 5, 2022
vue google map custom marker component
vue google map custom marker component

vue2-gmap-custom-marker This component allows you to display custom HTML content on the map using Overlay. This component is an adaptation of the Goog

May 17, 2022
a simple component to generate an static google map
a simple component to generate an static google map

vue-static-map a simple component to generate an static google map Google Documentation Demo SandBox JSBin example Requirements Vue 2.X.X Usage Instal

May 17, 2022
ūüĒć Google Place Autocomplete Search - Renderless component + Wrappers for Bulma, Bootstrap and more...
ūüĒć Google Place Autocomplete Search - Renderless component + Wrappers for Bulma, Bootstrap and more...

vue-custom-google-autocomplete Installation You need Vue.js version 2.0+ and an Google PLACE API key. This plugin is a renderless component. It comes

Apr 11, 2022
A quick way to start a web map application with Vue.js using MapLibre GL JS.
A quick way to start a web map application with Vue.js using MapLibre GL JS.

Vue.js map using MapLibre GL JS A quick way to start a web map application with Vue.js using MapLibre GL JS. A simple fullscreen map application is us

May 28, 2022
Geolocation field & map block: All you need for a map on your website
Geolocation field & map block: All you need for a map on your website

Geolocation field & map block: All you need for a map on your website

May 2, 2022
Kartobuilder - a php package for the laravel framework that works with the inertia jetstream stack to build your own map

Kartobuilder is a php package for the laravel framework that works with the inertia jetstream stack to build your own map.

May 3, 2022
ūüóļ Vue Mapbox GL - A small components library to use Mapbox GL in Vue

?? Vue Mapbox GL A small components library to use Mapbox GL in Vue. Installation & usage Have a look at the small guide for information on how to set

Jun 23, 2022