Google maps component for vue with 2-way data binding

Last update: May 24, 2022

CONTRIBUTORS NEEDED!

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:

  1. Better automated tests
  2. Better integration tests with the popular frameworks, especially Nuxt and Vue template
  3. 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.

vue-google-maps

Build Status

Vue-2 port of vue-google-maps

This is the Vue 2.x port of vue-google-maps!

Attention!

This great package doesn't release the last features added to it for different reasons, is because it that some developers land a new package with the last features added to it.

If you want to use the last features in this package you can use gmap-vue, it is a fork of this repository and has all new fixes and features added to it.

This new package has new documentation with live examples that can you test with your own gmap key. You can visit it following this link gmap-vue docs.

Installation

With npm (Recommended)

npm install vue2-google-maps

Manually

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

Example (Source code).

Basic usage / Documentation

Get an API key from Google

Generating an Google Maps API key.

Quickstart (Webpack, Nuxt):

If you are using Webpack and Vue file components, just add the following to your code!

<GmapMap
  :center="{lat:10, lng:10}"
  :zoom="7"
  map-type-id="terrain"
  style="width: 500px; height: 300px"
>
  <GmapMarker
    :key="index"
    v-for="(m, index) in markers"
    :position="m.position"
    :clickable="true"
    :draggable="true"
    @click="center=m.position"
  />
</GmapMap>

In your main.js or inside a Nuxt plugin:

import Vue from 'vue'
import * as VueGoogleMaps from 'vue2-google-maps'

Vue.use(VueGoogleMaps, {
  load: {
    key: 'YOUR_API_TOKEN',
    libraries: 'places', // This is required if you use the Autocomplete plugin
    // OR: libraries: 'places,drawing'
    // OR: libraries: 'places,drawing,visualization'
    // (as you require)

    //// If you want to set the version, you can do so:
    // v: '3.26',
  },

  //// If you intend to programmatically custom event listener code
  //// (e.g. `this.$refs.gmap.$on('zoom_changed', someFunc)`)
  //// instead of going through Vue templates (e.g. `<GmapMap @zoom_changed="someFunc">`)
  //// you might need to turn this on.
  // autobindAllEvents: false,

  //// If you want to manually install components, e.g.
  //// import {GmapMarker} from 'vue2-google-maps/src/components/marker'
  //// Vue.component('GmapMarker', GmapMarker)
  //// then set installComponents to 'false'.
  //// If you want to automatically install all the components this property must be set to 'true':
  installComponents: true
})

If you need to gain access to the Map instance (e.g. to call panToBounds, panTo):

<template>
<GmapMap ref="mapRef" ...>
</GmapMap>
</template>
<script>
export default {
  mounted () {
    // At this point, the child GmapMap has been mounted, but
    // its map has not been initialized.
    // Therefore we need to write mapRef.$mapPromise.then(() => ...)

    this.$refs.mapRef.$mapPromise.then((map) => {
      map.panTo({lat: 1.38, lng: 103.80})
    })
  }
}

If you need to gain access to the google object:

<template>
  <GmapMarker ref="myMarker"
    :position="google && new google.maps.LatLng(1.38, 103.8)" />
</template>
<script>
import {gmapApi} from 'vue2-google-maps'

export default {
  computed: {
    google: gmapApi
  }
}
</script>

Control the options of the map with the options property:

Example of MapOptions:

<GmapMap
 :options="{
   zoomControl: true,
   mapTypeControl: false,
   scaleControl: false,
   streetViewControl: false,
   rotateControl: false,
   fullscreenControl: true,
   disableDefaultUI: false
 }"
>
</GmapMap>

Add region and language localization:

Example for Localization:

Vue.use(VueGoogleMaps, {
  load: {
    region: 'VI',
    language: 'vi',
  },
})

Nuxt.js config

For Nuxt.js projects, please import VueGoogleMaps in the following manner:

import * as VueGoogleMaps from '~/node_modules/vue2-google-maps'

Add the following to your nuxt.config.js's build.extend():

transpile: [/^vue2-google-maps($|\/)/]

Officially supported components:

The list of officially support components are:

  • Rectangle, Circle
  • Polygon, Polyline
  • KML Layer
  • Marker
  • InfoWindow
  • Autocomplete
  • 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.

import GmapCluster from 'vue2-google-maps/dist/components/cluster' // replace src with dist if you have Babel issues

Vue.component('GmapCluster', GmapCluster)

Inconvenient, but this means all other users don't have to bundle the marker clusterer package in their source code.

Autocomplete component

The autocomplete supports custom text field via scoped slot

          <gmap-autocomplete class="introInput" >
                    <template v-slot:input="slotProps">
                        <v-text-field outlined
                                      prepend-inner-icon="place"
                                      placeholder="Location Of Event"
                                      ref="input"
                                      v-on:listeners="slotProps.listeners"
                                      v-on:attrs="slotProps.attrs">
                        </v-text-field>
                    </template>
        </gmap-autocomplete>

The ref on the element must be called input, if the element is a vue component then it must have a child ref called input (like in vuetify text-field) or speciy a custom name via childRefName property (only works one level deep into a component).

The v-on:listeners is rquired, v-on:attrs may or may not be required depending on your implementation.

This requires vue 2.6 or higher for the new slot support.

NOTE: The official NPM package does not support this until the NPM package is updated, you can use this alternate temporary one or build your own version from source.

https://www.npmjs.com/package/vue2-google-maps-withscopedautocomp

Adding your own components

It should be relatively easy to add your own components (e.g. Heatmap, GroundOverlay). please refer to the source code for MapElementFactory.

Example for DirectionsRenderer:

// DirectionsRenderer.js
import {MapElementFactory} from 'vue2-google-maps'

export default MapElementFactory({
  name: 'directionsRenderer',
  ctr: () => google.maps.DirectionsRenderer,
  //// The following is optional, but necessary if the constructor takes multiple arguments
  //// e.g. for GroundOverlay
  // ctrArgs: (options, otherProps) => [options],
  events: ['directions_changed'],

  // Mapped Props will automatically set up
  //   this.$watch('propertyName', (v) => instance.setPropertyName(v))
  //
  // If you specify `twoWay`, then it also sets up:
  //   google.maps.event.addListener(instance, 'propertyName_changed', () => {
  //     this.$emit('propertyName_changed', instance.getPropertyName())
  //   })
  //
  // If you specify `noBind`, then neither will be set up. You should manually
  // create your watchers in `afterCreate()`.
  mappedProps: {
    routeIndex: { type: Number },
    options: { type: Object },
    panel: { },
    directions: { type: Object },
    //// If you have a property that comes with a `_changed` event,
    //// you can specify `twoWay` to automatically bind the event, e.g. Map's `zoom`:
    // zoom: {type: Number, twoWay: true}
  },
  // Any other properties you want to bind. Note: Must be in Object notation
  props: {},
  // Actions you want to perform before creating the object instance using the
  // provided constructor (for example, you can modify the `options` object).
  // If you return a promise, execution will suspend until the promise resolves
  beforeCreate (options) {},
  // Actions to perform after creating the object instance.
  afterCreate (directionsRendererInstance) {},
})

Thereafter, it's easy to use the newly-minted component!

<template>
  <GmapMap :zoom="..." :center="...">
    <DirectionsRenderer />
  </GmapMap>
</template>
<script>
import DirectionsRenderer from './DirectionsRenderer.js'

export default {
  components: {DirectionsRenderer}
}
</script>

Testing

More automated tests should be written to help new contributors.

Meanwhile, please test your changes against the suite of examples.

Improvements to the tests are welcome :)

GitHub

https://github.com/xkjyeah/vue-google-maps
Comments
  • 1. Could anyone use vue-google-maps in IE11?

    Hi, the library works well with other browsers but in IE11 it doesn't work i get always syntax error, i tried everything i found on the internet but i didn't solve. It seems transpiling problem.

    I'm using vue cli 2.9.3.

    Reviewed by HKskn at 2018-04-27 14:00
  • 2. Added ability to customize input using input named scoped slot

    I found a way to make it very innocuous by making the original input outside the slot (and the wrapping span) and conditionally rendering the original input and the span depending on if the slot is specified.

    So the following get the same render output as before the change

     <gmap-autocomplete  @place_changed="processLocationChanged" 
             placeholder="Location Of Event" class="introInput">
            </gmap-autocomplete>
    

    But this gets you a vuetify text field, wrapped in an unfortunately unavoidable (to the best of my knowledge) span.

    <!-- if using a component other than vuetify, specify childRefName="refNameOfHTMLInput" in gmap-autocomplete  -->
     <gmap-autocomplete  @place_changed="processLocationChanged"  
              placeholder="Location Of Event" class="introInput">
                        <!-- Be sure to use v-slot:input="" the slotProps can be
                         whatever you want but you must use that name in place of 
                        slotProps elsewhere in the slot -->
                        <template v-slot:input="slotProps">
    
                           <!-- ref="input" is requried
                           v-on:listeners="slotProps.listeners" is required, rename slotProps here if you did in v-slot:input="slotProps" above
                           v-on:attrs ="slotProps.attrs" may be required, rename slotProps here if you did in v-slot:input="slotProps" above 
                           -->
                            <v-text-field outlined prepend-inner-icon="place" 
                                 placeholder="Location" 
                                 ref="input"
                                v-on:listeners="slotProps.listeners"
                                v-on:attrs="slotProps.attrs">
                             </v-text-field>
                        </template>
            </gmap-autocomplete>
    

    The only requirements are that v-on:listeners and ref be set, i don't know if attrs really needs to be set but im making it available in the scope anyway.

    In this case vuetify puts a ref="input" on its internal text input, and the JS implementation will look for a $refs.input which firstly finds the vueitfy component, so if there is a .$refs on that it will look further and use the childRefName (eg slot.$refs.input.$refs[childRefName] (which defaults to input) to get the reference to the input element.

    Reviewed by TrendyTim at 2019-10-16 04:56
  • 3. 'google is not defined' when using google maps library extensions

    Good day. I'm trying to use oms (https://www.npmjs.com/package/overlapping-marker-spiderfier) in vue-google-maps but keep receiving an error that 'google is not defined.' I've tried this link https://stackoverflow.com/questions/46772291/referenceerror-google-is-not-defined-vue, but still the issue persists. I think the cause is that, when I try to inspect to code of my vue app, it arranged the code this way:

    <!-- built files will be auto injected -->
    
    <script type="text/javascript" src="/js/app.js"></script>
    <script src="https://maps.googleapis.com/maps/api/js?key=<key>&amp;callback=vueGoogleMapsInit" async="" defer=""></script>
    

    With this, oms cannot find the script because app.js executes first before the execution of google maps script. Is there a way to fix this behavior? like declaring the google maps script above the app.js? I don't have any idea if I can control the declaration of the scripts because as stated in the code above, "built files will be auto injected". Thanks in advance. :)

    Reviewed by snow-drop at 2018-01-26 17:16
  • 4. Webpack Configuration with Nuxt 2: Unexpected token <

    Hello, thank you very much for the amazing project. I've been using vue2-google-maps for a while and it worked great. Today I'm trying to upgrade my Nuxt to the 2.0 and I've been getting errors.

    I suspect it has something to do with the webpack configuration, seeing how the new Nuxt release uses Webpack 4. So I tried editing this code in nuxt.config.js:

    config.externals.splice(0, 0, function (context, request, callback) {
      if (/^vue2-google-maps($|\/)/.test(request)) {
        callback(null, false)
      } else {
        callback()
      }
    })
    

    This returns the error that splice failed because config.externals is undefined. So I changed that into:

    config.externals = [
       function(context, request, callback) {
         if (/^vue2-google-maps($|\/)/.test(request)) callback(null, false)
         else callback()
       }
    ]
    

    The build success, even though honestly I am still not sure whether this part of the code works as intended or not. However, I run into another error when I access the page:

    SyntaxError
    Unexpected token <
    

    And also from the Nuxt build console:

    ✖ error /home/hadyanq/Projects/foodgasm-v2/webview-vuetify/node_modules/vue2-google-maps/dist/components/infoWindow.vue:3
      <template>
      ^
      
      SyntaxError: Unexpected token <
      at new Script (vm.js:79:7)
      at createScript (vm.js:251:10)
      at Object.runInThisContext (vm.js:303:10)
      at Module._compile (internal/modules/cjs/loader.js:657:28)
      at Object.Module._extensions..js (internal/modules/cjs/loader.js:700:10)
      at Module.load (internal/modules/cjs/loader.js:599:32)
      at tryModuleLoad (internal/modules/cjs/loader.js:538:12)
      at Function.Module._load (internal/modules/cjs/loader.js:530:3)
      at Module.require (internal/modules/cjs/loader.js:637:17)
      at require (internal/modules/cjs/helpers.js:20:18)
      at Object.<anonymous> (/home/hadyanq/Projects/foodgasm-v2/webview-vuetify/node_modules/vue2-google-maps/dist/main.js:38:19)
      at Module._compile (internal/modules/cjs/loader.js:689:30)
      at Object.Module._extensions..js (internal/modules/cjs/loader.js:700:10)
      at Module.load (internal/modules/cjs/loader.js:599:32)
      at tryModuleLoad (internal/modules/cjs/loader.js:538:12)
      at Function.Module._load (internal/modules/cjs/loader.js:530:3)
    

    This time I have no idea what went wrong and I really appreciate any help anyone can give. So, has anyone ever attempted to use this plugin with Nuxt 2? Thanks in advance.

    Reviewed by hadyanq at 2018-10-02 04:32
  • 5. Vue.use() Error

    Hello, I get this plugin.apply is not a function(…) error on this part of your code:

      Vue.use(VueGoogleMaps, {
        installComponents: true,
        load: {
          key: 'API_KEY',
          v: '3.26'
        }
      })
    

    I think the problem is my webpack config, I use the standard webpack-config from vue-cli.

    Reviewed by gstrobl at 2016-11-26 08:06
  • 6. Syntax error

    I am getting the below error on importing vue2-google-maps:

    /home/neerajy/Documents/starters/starter-source/node_modules/vue2-google-maps/dist/components/infoWindow.vue:3
    <template>
    ^
    SyntaxError: Unexpected token <
        at Object.exports.runInThisContext (vm.js:76:16)
        at Module._compile (module.js:542:28)
        at Object.Module._extensions..js (module.js:579:10)
        at Module.load (module.js:487:32)
        at tryModuleLoad (module.js:446:12)
        at Function.Module._load (module.js:438:3)
        at Module.require (module.js:497:17)
        at require (internal/module.js:20:19)
        at Object.<anonymous> (/home/neerajy/Documents/starters/starter-source/node_modules/vue2-google-maps/dist/main.js:39:19)
        at Module._compile (module.js:570:32)
    
    Reviewed by neeraj022 at 2017-03-21 10:07
  • 7. 500 error for unknown reason after restart computer

    I tried to use vue2-google-maps and it worked well. Suddenly my computer had stopped working and then I restarted my computer. Then, strangely, 500-error comes out.

    I reverted all codes associated with vue2-google-maps then my project works well. Even though when I import vue2-google-maps then It occurs 500-error. :(

    import * as VueGoogleMaps from 'vue2-google-maps';
    

    It was working well but now cause of the unknown reason it has been broken... Here is my console shows error.

    webpack built 5410edae88d11b814c0b in 2690ms
    error during render : /search
    /media/bossminion/Work/WeMeet/frontend/node_modules/vue2-google-maps/dist/components/infoWindow.vue:3
    <template>
    ^
    
    SyntaxError: Unexpected token <
        at Module._compile (internal/modules/cjs/loader.js:720:23)
        at Object.Module._extensions..js (internal/modules/cjs/loader.js:787:10)
        at Module.load (internal/modules/cjs/loader.js:643:32)
        at Function.Module._load (internal/modules/cjs/loader.js:556:12)
        at Module.require (internal/modules/cjs/loader.js:683:19)
        at require (internal/modules/cjs/helpers.js:16:16)
        at Object.<anonymous> (/media/bossminion/Work/WeMeet/frontend/node_modules/vue2-google-maps/dist/main.js:42:19)
        at Module._compile (internal/modules/cjs/loader.js:776:30)
        at Object.Module._extensions..js (internal/modules/cjs/loader.js:787:10)
        at Module.load (internal/modules/cjs/loader.js:643:32)
        at Function.Module._load (internal/modules/cjs/loader.js:556:12)
        at Module.require (internal/modules/cjs/loader.js:683:19)
        at require (internal/modules/cjs/helpers.js:16:16)
        at r (/media/bossminion/Work/WeMeet/frontend/node_modules/vue-server-renderer/build.dev.js:9295:16)
        at Object.<anonymous> (webpack:/external "vue2-google-maps":1:0)
        at __webpack_require__ (webpack:/webpack/bootstrap a442baf8af813fadc2a4:25:0)
    error during render : /favicon.ico
    /media/bossminion/Work/WeMeet/frontend/node_modules/vue2-google-maps/dist/components/infoWindow.vue:3
    <template>
    ^
    
    SyntaxError: Unexpected token <
        at Module._compile (internal/modules/cjs/loader.js:720:23)
        at Object.Module._extensions..js (internal/modules/cjs/loader.js:787:10)
        at Module.load (internal/modules/cjs/loader.js:643:32)
        at Function.Module._load (internal/modules/cjs/loader.js:556:12)
        at Module.require (internal/modules/cjs/loader.js:683:19)
        at require (internal/modules/cjs/helpers.js:16:16)
        at Object.<anonymous> (/media/bossminion/Work/WeMeet/frontend/node_modules/vue2-google-maps/dist/main.js:42:19)
        at Module._compile (internal/modules/cjs/loader.js:776:30)
        at Object.Module._extensions..js (internal/modules/cjs/loader.js:787:10)
        at Module.load (internal/modules/cjs/loader.js:643:32)
        at Function.Module._load (internal/modules/cjs/loader.js:556:12)
        at Module.require (internal/modules/cjs/loader.js:683:19)
        at require (internal/modules/cjs/helpers.js:16:16)
        at r (/media/bossminion/Work/WeMeet/frontend/node_modules/vue-server-renderer/build.dev.js:9295:16)
        at Object.<anonymous> (webpack:/external "vue2-google-maps":1:0)
        at __webpack_require__ (webpack:/webpack/bootstrap a442baf8af813fadc2a4:25:0)
    

    I posted this error in stackoverflow but no answer yet.

    Reviewed by diamond122 at 2019-07-16 18:57
  • 8. marker slot for custom dom element not working

    I am trying the following code for my custom map where I want to display custom markers (in my case, I would like to use svg tag to render clean icons)

    <gmap-map
          :center="center"
          :zoom="15"
          style="width: 500px; height: 300px"
        >
          <gmap-marker
            :key="index"
            v-for="(m, index) in markers"
            :position="m"
          >
              <div class"custom-tag"><!--custom marker using vue google map slot feature, magic there not working--><svg>...</svg></div>
          </gmap-marker>
    </gmap-map>
    

    therefore, I noticed that the marker implementation for vue2 google maps seems to take care of this behavior

    //components/marker.js
    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
        );
      }
    },
    

    But the render is invisible or dom element is not created (dev tools have strange behavior with google map, so I did not mind how to find rendered markers dom elements).

    I am currently using svg icon assets that let me display icons only using svg tags with xlink:href values like 'asset.svg#icon_id'. Transclusion works properly on ngMap similar component. Any fix/help would be appreciated.

    Reviewed by eregnier at 2018-01-09 10:22
  • 9. Issue with two-way binding in map center example

    Currently, in example http://xkjyeah.github.io/vue-google-maps/test-map-center-twoway.html , the pan can only be done in very small steps. What is the proper way to have the map's center position constantly updated in our model when we move the map?

    Reviewed by JoseGoncalves at 2018-02-14 08:59
  • 10. Help: Open Info Window

    Hello,

    I'm fully aware that this question was already asked here and as you suggested the solution to toggle the Info Window visibility is by

    You have to listen for the marker_clicked event and then toggle the marker's opened property.

    But I'm having trouble by toggling the visibility only of the clicked marker.

    So far I have my markers that looks like:

    <gmap-marker 
           v-for="m in pushMarkers"
           :position="{lat: m.lat, lng: m.lon}" 
           @click="showInfoWindow()" >
    
            <gmap-info-window :content="m.name" :opened="visInfoWindow"></gmap-info-window>
     </gmap-marker>
    

    Then In my data:

    visInfoWindow: false,
    

    And the showInfoWindow methods

    showInfoWindow(){
            this.visInfoWindow = this.visInfoWindow ? false :true;
    }
    

    Unfortunately by doing so all the InfoWindow will be toggled when one marker is clicked. Is there a way to reference only the one clicked? For custom inputs I often listen for the $events.target; Is there an equivalent for the marker?

    Thanks a lot for your help :)

    Reviewed by Marmiz at 2017-02-09 02:41
  • 11. 0.8.3 SSR uglifyJs bug

    I've updated plugin to latest version, fixed import with main/src and in dev mode all fine. But when i try to compile to production, i'm seeing this error image

    My uglifyJs config:

        new webpack.optimize.UglifyJsPlugin({
          compress: { warnings: false }
        }),
    

    So i reverted back to 0.7.10 version and i don't see this error.

    I made empty vue cli webpack template and it also doesn't work with this import import * as VueGoogleMaps from '../node_modules/vue2-google-maps/src/main' image

    Any thoughts what's wrong? Thx.

    Reviewed by xrei at 2017-09-23 19:59
  • 12. Setting :draggable to false does not work on markers

    I have a bunch of markers in a map, however setting draggable to false does not seem to change anything. Idealy this would stop the functionality completely and I'm unable to find any other examples that do not have this issue.

    As a reference this is the code part I'm using:

    <GmapMap
          :center="{ lat: 40, lng: 9 }"
          :zoom="4"
          map-type-id="terrain"
          style="width: 100%; height: 31vh"
          :options="{
              zoomControl: false,
              mapTypeControl: false,
              scaleControl: false,
              streetViewControl: false,
              rotateControl: false,
              fullscreenControl: false,
              disableDefaultUI: false,
          }"
      >
     <GmapMarker
            :key="index"
            v-for="(m, index) in markers"
            :position="m"
            :draggable="false"
            :label="m.label"
        />
    </GmapMap>
    
    Reviewed by AIjbillinger at 2022-05-11 20:36
  • 13. autocomplete dropdown issue

    The issue i am facing is with autocomplete dropdown it sometimes work perfectly fine and sometime don't, without giving any error in the console <GmapAutocomplete @place_changed="setPlace" /> i tried to add an alert on my setPlace method to see if the event is fired the problem is it sometimes works and shows the autocomplete dropdown and sometime don't can you please help, thank

    Reviewed by laravelvuedev at 2022-04-06 11:41
  • 14. Bicycle Layer not appearing?! (VERSION issue?? Help!)

    This may be an issue solved by using vue3-google-maps but the syntax and components are different in that library and I really don't want to go through my entire app to make the changes.

    I need the Bicycle Layer of google maps to display!

    It's very strange because the Traffic Layer works totally fine with this library currently and according to the Google maps documentation the two are very similar. Transit Layer does not seem to work either.

    I'm not getting any errors or breaks when I try to do Bicycle layer along with the Traffic. Just doesn't display anything. I've tested with the Google maps JSFiddle to see if there are any bike paths recognized in my area - Colorado - and there are indeed paths on that demo. So it's not an issue with simply no data.

    Here's how I'm able to display the Traffic layer...

    `mounted () { this.geolocate();

      this.$refs.mapRef.$mapPromise.then((map) => {
            
    
          let bike = new google.maps.BicyclingLayer;
          bike.setMap(map);
    
          let traffic = new google.maps.TrafficLayer;
          traffic.setMap(map);
    
          console.log( " map promise -> ", bike, traffic);
    
      });
    
    } `
    

    And this is what results:

    Screen Shot 2022-02-07 at 9 52 31 AM

    Reviewed by escully27 at 2022-02-07 16:53
  • 15. Is it possible to search an area based on the position of map?

    Hey guys - this plugin is a life saver! Does anyone know how to implement search functionality based on the position of the map (i.e. like airbnb)?

    Screenshot 2022-01-05 at 17 24 26

    If required I can post my code - all the lat/lng's are pulled from an API and I want to make area's searchable on the map for a better user experience.

    Screenshot 2022-01-05 at 17 27 41

    Thanks!

    Reviewed by TomBell95 at 2022-01-05 17:30
  • 16. Auto complete , chrome autocomplete="off"

    hello, when I start to type in gmap-autocomplete, it shows a chrome auto complete over my component .

    like this image - printautocomplete

    in this post - https://stackoverflow.com/questions/12374442/chrome-ignores-autocomplete-off

    It says that I need to set my input , with this property - autocomplete="off" It should be like this - how could I access the gmap-autocomplete input and set this value ?

    Reviewed by murilolivorato at 2021-11-24 22:15
  • 17. Overlaying an Image Map Type

    Hi, I'm trying to use image tiles to overlay an image that represents the interior of a building onto the map. Is there any way I can do that with Vue-google-maps? https://developers.google.com/maps/documentation/javascript/examples/maptype-image-overlay#maps_maptype_image_overlay-javascript Thanks, Arash

    Reviewed by Arash-sad at 2021-11-22 04:08
Related tags
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.

May 14, 2022
Integrate Google Maps in your Vue application
Integrate Google Maps in your Vue application

vue-googlemaps Integrate Google Maps in your Vue application in a "Vue-way". This library is Work In Progress. More components will be available in th

Apr 10, 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
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.

May 26, 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

May 23, 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-

Oct 31, 2021
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

May 21, 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

May 24, 2022
Integrate Azure Maps in your Vue application

Vue Azure Maps Vue Azure Maps is a library for Vue.js that integrates Azure Maps. It offers several Vue components out of the box and supports custom

May 19, 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

Apr 27, 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 19, 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
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
A Vue JS component for displaying dynamic data on a world map.

This is no longer being maintained, please do not open issues or PRs. Vue World Map A Vue JS Component for displaying dynamic data on a world map. Map

May 10, 2022
Render every single road in any city, The data is fetched from OpenStreetMap using overpass API.
Render every single road in any city, The data is fetched from OpenStreetMap using overpass API.

Render every single road in any city, The data is fetched from OpenStreetMap using overpass API.

May 27, 2022
A Vue.js component for Mapbox GL JS

Mapbox GL JS Vue.js A simple lightweight (9kb/3kb gzipped) Mapbox GL JS Vue component. Demo Installation Setup Props Events Plugins Popups Development

Mar 21, 2022