@diegoazh - just tried to test the examples and they aren't working because the new components aren't added to gmap-vue.js

Also the drawing manager examples aren't even loading the Google map

I also something isn't really wrong with the edits that were made to drawing-manager2.html - there is a callback slot in the drawing manager component that works the same way as the auto-complete and it's gone missing in the example, and the functions provided by the slot are being called without the slot prefix, so they do not exist

Describe the bug
unnable de get map bounds

To Reproduce

mounted() {
  this.$nextTick(() => {
    this.$refs.gmap.$mapPromise.then(() => {
    console.log(this.$refs.gmap.$mapObject.getBounds())
    });
  });
},

Expected behavior
if mounted when I do this.$refs.gmap.$mapObject.getBounds().getNorthEast().lat(); I will get the north_east_latitude

Current behavior
getBounds undefined

Describe the bug
autocomplete with custom text field doesn't return places data.

To Reproduce

<gmap-autocomplete>
                      <template v-slot:input="slotProps">
                        <v-text-field
                          ref="input"
                          outlined
                          placeholder           
                          label="Address"
                          color="teal"
                          @place_changed="setPlace"
                          v-on:listeners="slotProps.listeners"          
                        ></v-text-field>
                      </template>
</gmap-autocomplete>

setPlace(place) {
      console.log("test")
      this.place = place;
      console.log(this.place);
    },

Expected behavior
Print places data in console. Here is the that works:

<gmap-autocomplete
    placeholder="This is a placeholder text"
    @place_changed="setPlace"
 ></gmap-autocomplete>

setPlace(place) {
      console.log("test")
      this.place = place;
      console.log(this.place);
    },

Current behavior
The code below with custom text field does't work. I copied the code from the documentation.

Screenshots
none

Desktop (please complete the following information):

• OS: [Mac]
• Browser [chrome, safari]
• Version [e.g. 22]

Smartphone (please complete the following information):

• Device: [e.g. iPhone6]
• OS: [e.g. iOS8.1]
• Browser [e.g. stock browser, safari]
• Version [e.g. 22]

Additional context
Add any other context about the problem here.

Versions

• NPM:

Package manager

• NPM

Plugin version

• 1.4.0

autocomplete with custom text field doesn't return places data.

Expected behavior

<gmap-autocomplete
    placeholder="This is a placeholder text"
    @place_changed="setPlace"
 ></gmap-autocomplete>

setPlace(place) {
      console.log("test")
      this.place = place;
      console.log(this.place);
    },

The code above prints the places data in the console. The code below with custom text field does't work. I copied the code from the documentation.

Current behavior

<gmap-autocomplete>
                      <template v-slot:input="slotProps">
                        <v-text-field
                          ref="input"
                          outlined
                          placeholder           
                          label="Address"
                          color="teal"
                          @place_changed="setPlace"
                          v-on:listeners="slotProps.listeners"          
                        ></v-text-field>
                      </template>
</gmap-autocomplete>

setPlace(place) {
      console.log("test")
      this.place = place;
      console.log(this.place);
    },

I would also like to know where i need to place this: Autocomplete.setFields("formatted_address")

Package manager

• NPM

Plugin version

• 1.4.0

Is your feature request related to a problem? Please describe.
I find the documentation really poor and not helpful in most cases.
There's not a clear showcase of the components accepted props and events, what they accept or what they return.

For example, It took me ages to find that the GmapMap has events like center_changed, zoom_changed, and idle, stuff that if properly documented would've saved me a couple of hours of research.

In a library that is event-driven like google maps, its imperative to have good documentation so that we can easily implement intricate features with ease

Describe the solution you'd like
I'd like the documentation to feature a page for each available component clearly showcasing every prop, slot and event accepted by the component, what options we can pass and what value we should expect to be returned.
A detailed description of when the events are fired is also a must

Describe alternatives you've considered
At this point in time, the only alternative I've found is to actually dig into the source code in order to find some information I need, and even then it's not easy

Additional context
No additional context is required

Hi,

Please make me clearly about the way to using gmapApi. I copied your sample code but it didn't work:

import { gmapApi } from 'gmap-vue'

export default {
  computed: {
    google: gmapApi
  },

  mounted () {
    console.log(this.google)
  },
}

The log displayed on the console is NULL

What wrong I made?
Thanks

In order to preserve good practices in javascript, we need to move to the Airbnb rules of the Eslint package.

We need to improve the e2e or integration test using Cypress and Puppeteer in order to get a good suite of tests and can guarantee the quality and security of the plugin.

What you try to do

I'm trying to add a custom text field to aucomplete scoped slots as describe here https://diegoazh.github.io/gmap-vue/examples/autocomplete.html

But im not using vuetify, instead I'm using vue-formulate because i need to do some business logic with the value returned from the autocomplete, so this is my code currently for this feature

<template v-slot:input="slotProps">
            <FormulateInput
              name='direccion_1'
              label="Direccion Uno"
              ref="input"
              v-on:listener="slotProps.listeners"
              v-on:attrs="slotProps.attrs"
            >
            </FormulateInput>
          </template>
        </gmap-autocomplete>

What is the problem

My problem is that i'm getting the following error from console InvalidValueError: not an instance of HTMLInputElement
hence my autocomplete field is not working as expected

What kind of things have you already treated

I have tried changing the ref value and also using the childRefName but not sure if I used correctly

Steps to reproduce

Just by adding a component that is not from vuetify like above

Os

• Mac Os X
• Linux (write here the name and version of your distribution)
• Windows

Mobile

• iOS
• Android

Versions

• Node: v12.18.2
• NPM: 6.14.5
• Yarn:

Package manager

• NPM
• Yarn

Plugin version

• 1.4.0
• 1.2.2
• 1.2.1
• 1.2.0
• 1.0.0

Is it possible to set a custom icon for the markers? And how to fix this in a Nuxt project?

Thanks :)

Hello @diegoazh, really thank you for keeping to developing this project!

I'm now developing a website that has a google map at the end of the page. Most of the users probably will not even reach the end of the page, so would be really important to lazy load.

What would be the best way to lazyload it?

Thank you once again!

All double quotes should be changed back to single quotes to be consistent with the other examples

This should be changed back to

for (opt in options) {

This is the fastest way to iterate through properties on an Object:

• fastest for small numbers of items
• 'in' loops over non-numeric keys
• any method that uses a callback to do its work is not as efficient for small numbers

What you try to do

I have a <gmap-autocomplete> component that's a simple address field. When the user clicks into the field and starts typing, the autocomplete options popup below the field, the user selects the place they want and my code fills in all of the other address fields automatically. This works great.

The problem I'm running into is when you try to use a password manager.

What is the problem

The password manager fills the <gmap-autocomplete>, but it doesn't trigger the autocomplete field options below like if you were to type into it.

It's not clear how to make the <gmap-autocomplete> component display place options based on the value the password manager filled the input with.

What kind of things have you already treated

I've tried manually triggering some the setPlace event, but that doesn't work.

Steps to reproduce

Hard to repro with my current code, but can if this explanation is not enough. Just looking for a way to trigger the autocomplete dropdown without the user typing in the field.

Os

• Mac Os X
• Linux (write here the name and version of your distribution)
• Windows

Mobile

• iOS
• Android

Versions

• Node:
• NPM:
• Yarn:

Package manager

• NPM
• Yarn

Plugin version

• 1.4.0
• 1.2.2
• 1.2.1
• 1.2.0
• 1.0.0

Hi, i'm looking for any possible solution to this problem I have

I'm trying to add a custom text field to aucomplete scoped slots as describe here https://diegoazh.github.io/gmap-vue/examples/autocomplete.html

But im not using vuetify, instead I'm using vue-formulate because i need to do some business logic with the value returned from the autocomplete, so this is my code currently for this feature

          <template v-slot:input="slotProps">
            <FormulateInput
              name='direccion_1'
              label="Direccion Uno"
              ref="input"
              v-on:listener="slotProps.listeners"
              v-on:attrs="slotProps.attrs"
            >
            </FormulateInput>
          </template>
        </gmap-autocomplete>

My problem is that i'm getting the following error from console InvalidValueError: not an instance of HTMLInputElement
hence my autocomplete field is not working as expected

I have tried changing the ref value and also using the childRefName but not sure if I used correctly

Steps to reproduce

Explain to us how to get the same problem or provide a small example repository to work on it.

Do you have any plans to convert this to Vue 3?

There's a lack of documentation for nearly every component.

There are undocumented events that one can only find by checking the examples page such as zoom_changed, center_changed, and idle for GmapMap component for example.

A dedicated page for each component clearly showcasing a list of accepted props and events and what they accept and return would be great as it would make the use of the library a lot easier.

We need to define a style guide that explained some practices and why we follow them.

We need to start to plan the migration to Vue 3 before August 2020, following the recommendation of the author in this announcement (vuejs/rfcs#183).

I need set localization for Map, and change it dynamically.

I do not know how to do it

l find google documentation for this
https://developers.google.com/maps/documentation/javascript/localization
And stackOvwrflow answer, but i'm not sure if this is the right way and that it won't break the plugin
https://stackoverflow.com/questions/7065420/how-can-i-change-the-language-of-google-maps-on-the-run

No steps for reproduce

Hello :) First of all thanks for this library 👍

Describe the bug
I'm trying to use the cluster component like this:
https://googlemaps.github.io/v3-utility-library/packages/markerclustererplus/examples/advanced_example.html
The last cluster style : "Circles (css only)".

To reproduce this I need to set a few things like here :
https://github.com/googlemaps/v3-utility-library/blob/master/packages/markerclustererplus/examples/advanced_example.html#L235

The gmap-cluster component has a styles prop, but no clusterClass prop. It would be nice to add it.
https://googlemaps.github.io/v3-utility-library/interfaces/_google_markerclustererplus.markerclustereroptions.html#clusterclass

Even with this property, I didn't manage to achieve the same result as the example.
I set the styles prop to:

      [
        {
          width: 30,
          height: 30,
          className: 'custom-clustericon-1'
        },
        {
          width: 40,
          height: 40,
          className: 'custom-clustericon-2'
        },
        {
          width: 50,
          height: 50,
          className: 'custom-clustericon-3'
        }
      ]

(and add css styles)

But the gmap-cluster component stills render a <img src="undefined"> and won't apply the class. My guess is that a undefined url is provided and takes over the styles.

To Reproduce
Create a map with a gmap-cluster, try to set styles prop to this:

      [
        {
          width: 30,
          height: 30,
          className: 'custom-clustericon-1'
        },
        {
          width: 40,
          height: 40,
          className: 'custom-clustericon-2'
        },
        {
          width: 50,
          height: 50,
          className: 'custom-clustericon-3'
        }
      ]

Expected behavior
Cluster should be rendered with custom-clustericon-* classes

Current behavior
A <img src="undefined"> is rendered

Desktop (please complete the following information):

• OS: macOS Catalina
• Browser: Chrome
• Version: 84

Plugin version

• 1.4.0
• 1.2.2
• 1.2.1
• 1.2.0
• 1.0.0

Thanks

The new documentation is now in a different package in the monorepo and the examples folder is no needed anymore except that tests.

"Detailed Description" - I have a use case to show information on cluster mouse over when i i'm trying this with gmap-info-window it seems not working. Just wanted to know is there support of this feature? Or do i need to create a custom tooltip for this?

"Current Behavior" - Info window is not opening on hover of gmap-cluster.

"Expected Behavior" - Info window should open on hover of gmap-cluster.

"Steps to Reproduce" -

<gmap-info-window
      :options="infoOptions"
      :position="infoWindowPos"
      :opened="infoWinOpen"
      @closeclick="infoWinOpen=false"
    >
</gmap-info-window>

<GmapCluster
      :styles="clusterStyles"
      @mouseover="clusterRollOver"
      @mouseout="clusterMouseout"
      ref="groupRef"
    >
      <GmapMarker
        v-for="(marker, index) in markers"
        :key="index"
        :position="marker.position"
        :clickable="true"
        :icon="marker.icon"
      />
    </GmapCluster>

We need to defined and add the contributing guide to the repository

Shouldn't
npm install vue2-google-maps
instead be
npm install gmap-vue

and
import * as VueGoogleMaps from 'vue2-google-maps'
instead be
import * as VueGoogleMaps from 'gmap-vue'

The reason for this, is that I could not get custom text field via scoped slot to work with the gmap-autocomplete component.

I looked in node_modules/vue2-google-maps/dist/components/autocomplete.vue in my project folder, and saw:

<template>
  <input
    ref="input"
    v-bind="$attrs"
    v-on="$listeners"
    />
</template>

I.e, No support for slots

Then I looked in you github repository in packages/gmap-vue/src/components/autocomplete.vue and saw:

<template>
  <span v-if="$scopedSlots['input']">
    <slot name="input" v-bind:attrs="$attrs" v-bind:listeners="$listeners" :ref="input"></slot>
  </span>
  <input v-else-if="!$scopedSlots['input']" ref="input" v-bind="$attrs" v-on="$listeners" />
</template>

I.e, support for slots.

So I unistalled vue2-google-maps via:
npm uninstall vue2-google-maps

and then ran
npm install gmap-vue

and changed
import * as VueGoogleMaps from 'vue2-google-maps'
to
import * as VueGoogleMaps from 'gmap-vue'
in my main.js and then the "slots" started to work.

would it be possible to pass a "tag" prop to render other html node like a div per example
would look something like this

<template> <component :is="tag" v-if="$scopedSlots['input']"> <slot name="input" v-bind:attrs="$attrs" v-bind:listeners="$listeners" :ref="input"></slot> </component> <input v-else-if="!$scopedSlots['input']" ref="input" v-bind="$attrs" v-on="$listeners" /> </template>

Describe the bug
Hello :) First of all thanks for this library 👍

I'm trying to use the cluster component like this:
https://googlemaps.github.io/v3-utility-library/packages/markerclustererplus/examples/advanced_example.html
The last cluster style : "Circles (css only)".

To reproduce this I need to set a few things like here :
https://github.com/googlemaps/v3-utility-library/blob/master/packages/markerclustererplus/examples/advanced_example.html#L235

The gmap-cluster component has a styles prop, but no clusterClass prop. It would be nice to add it.
https://googlemaps.github.io/v3-utility-library/interfaces/_google_markerclustererplus.markerclustereroptions.html#clusterclass

Even with this property, I didn't manage to achieve the same result as the example.
I set the styles prop to:

      [
        {
          width: 30,
          height: 30,
          className: 'custom-clustericon-1'
        },
        {
          width: 40,
          height: 40,
          className: 'custom-clustericon-2'
        },
        {
          width: 50,
          height: 50,
          className: 'custom-clustericon-3'
        }
      ]

(and add css styles)

But the gmap-cluster component stills render a <img src="undefined"> and won't apply the class. My guess is that a undefined url is provided and takes over the styles.

To Reproduce
Create a map with a gmap-cluster, try to set styles prop to this:

      [
        {
          width: 30,
          height: 30,
          className: 'custom-clustericon-1'
        },
        {
          width: 40,
          height: 40,
          className: 'custom-clustericon-2'
        },
        {
          width: 50,
          height: 50,
          className: 'custom-clustericon-3'
        }
      ]

Expected behavior
Cluster should be rendered with custom-clustericon-* classes

Current behavior
A <img src="undefined"> is rendered

Screenshots
Nope

Desktop (please complete the following information):

• OS: macOS Catalina
• Browser: Chrome
• Version: 84

Smartphone (please complete the following information):

• Device: [e.g. iPhone6]
• OS: [e.g. iOS8.1]
• Browser [e.g. stock browser, safari]
• Version [e.g. 22]

Additional context
Nope

Versions

• Node: 12.8
• NPM: 6.14.4
• Yarn:

Package manager

• NPM
• Yarn

Plugin version

• 1.4.0
• 1.2.2
• 1.2.1
• 1.2.0
• 1.0.0

I have a use case to show information on cluster mouse over when i i'm trying this with gmap-info-window it seems not working. Just wanted to know is there support of this feature? Or do i need to create a custom tooltip for this?

<gmap-info-window
      :options="infoOptions"
      :position="infoWindowPos"
      :opened="infoWinOpen"
      @closeclick="infoWinOpen=false"
    >
</gmap-info-window>

<GmapCluster
      :styles="clusterStyles"
      @mouseover="clusterRollOver"
      @mouseout="clusterMouseout"
      ref="groupRef"
    >
      <GmapMarker
        v-for="(marker, index) in markers"
        :key="index"
        :position="marker.position"
        :clickable="true"
        :icon="marker.icon"
      />
    </GmapCluster>

I found two deprecated errors while using the map and autocomplete:

open_now is deprecated as of November 2019 and will be turned off in November 2020. Use the isOpen() function from a PlacesService.getDetails() result instead.

and

utc_offset is deprecated as of November 2019 and will beturned off in November 2020. Use utc_offset_minutes instead.

What you try to do

I need set localization for Map, and change it dynamically.

What is the problem

I do not know how to do it

What kind of things have you already treated

l find google documentation for this
https://developers.google.com/maps/documentation/javascript/localization
And stackOvwrflow answer, but i'm not sure if this is the right way and that it won't break the plugin
https://stackoverflow.com/questions/7065420/how-can-i-change-the-language-of-google-maps-on-the-run

Steps to reproduce

No steps for reproduce

Os

• Mac Os X
• Linux (write here the name and version of your distribution)
• Windows

Mobile

• iOS
• Android

Versions

• Node:
• NPM:
• Yarn:

Package manager

• NPM
• Yarn

Plugin version

• 1.4.0
• 1.2.2
• 1.2.1
• 1.2.0
• 1.0.0

We need to add unit tests with jest if it is possible.

What you try to do

I need set localization for Map, and change it dynamically.

What is the problem

How set language ?

What kind of things have you already treated

l find google dock for this
https://developers.google.com/maps/documentation/javascript/localization
And stackOvwrflow answer, but i'm not sure if this is the right way and that it won't break the plugin
https://stackoverflow.com/questions/7065420/how-can-i-change-the-language-of-google-maps-on-the-run

Os

• Mac Os X
• Linux (write here the name and version of your distribution)
• Windows

Versions

• Node:
• NPM:
• Yarn:

Package manager

• NPM
• Yarn

Plugin version

• 1.4.0
• 1.2.2
• 1.2.1
• 1.2.0
• 1.0.0

Is it possible to set a custom icon for the markers? And how to fix this in a Nuxt project?

Thanks :)

What you try to do

I've read about this new great feature allowing us to customize the map's look. I've created map ID with the style I want and now I need to pass the mapId parameter to the instantiated map.

https://developers.google.com/maps/documentation/javascript/cloud-based-map-styling#example_app

What is the problem

Did not find any info about this option in this plugin's documentation. Is it implemented yet? If no, how can I apply the id?

Describe the bug
i need to geolocate the user in the mounted method of the component, im trying to use this but i got the mentionend error

To Reproduce
Steps to reproduce the behavior:

1. Create an async function as mentioned in the docs
2. create this variable let geocoder = this.google.maps.Geocoder();
3. try to use it as geocoder.geocode({ location: latLng }, (results, status) => {if (status === this.google.maps.GeocoderStatus.OK) { console.log(results[0]); }})
4. See error

Expected behavior
geocode the lat and Lng to the located user and get the data (street name and other data)

Current behavior
the mentionend errror

Screenshots
N/A
Desktop (please complete the following information):

• OS: Mac os Catalina latest
• Browser Chrome
• Version Latest

Smartphone (please complete the following information):

• Device: N/A
• OS: N/A
• Browser N/A
• Version N/A

Additional context

Versions

• Node:14.12.0
• NPM:6.14.8
• Yarn: 1.22.5

Package manager

• NPM
• Yarn

Plugin version

• 1.4.0
• 1.2.2
• 1.2.1
• 1.2.0
• 1.0.0

Hey there,

So I have the plugin working on my project and it works great. Using it in an ecommerce checkout and running into one issue which I'll describe below.

The form in question is a simple address form. I have a <gmap-autocomplete> component that I'm using to drive the address input UX.

User clicks into the form, starts typing, autocomplete fires up, they select their address and it fills in all the other fields (address 2, city, state, country, etc) for them.

The issue I'm running into is handling a password manager. If you tell the password manager to fill out the form, it will insert a value into the autocomplete, but the autocomplete dropdown is never triggered thus leaving the user in limbo.

Is it possible to emit an event or something similar to force the autocomplete to fire and display the list of potential matches without typing in the field?

This is my map
<gmap-map ref="gmaps" :center="center" map-type-id="terrain" :zoom="12"> <gmap-marker :position="center" /> </gmap-map>

The map is shown when running on dev mode, but not on production mode. There is no error console nor network

What you try to do

I need set localization for Map, and change it dynamically.

What is the problem

I do not know how to do it

What kind of things have you already treated

l find google documentation for this
https://developers.google.com/maps/documentation/javascript/localization
And stackOvwrflow answer, but i'm not sure if this is the right way and that it won't break the plugin
https://stackoverflow.com/questions/7065420/how-can-i-change-the-language-of-google-maps-on-the-run

Steps to reproduce

No steps for reproduce

Os

• Mac Os X
• Linux (write here the name and version of your distribution)
• Windows

Mobile

• iOS
• Android

Versions

• Node:
• NPM:
• Yarn:

Package manager

• NPM
• Yarn

Plugin version

• 1.4.0
• 1.2.2
• 1.2.1
• 1.2.0
• 1.0.0

What you try to do

Hey, first of all, I'd like to thank you for this awesome plugin!
I'd like to use containsLocation and to make it work I need to get the access to Polygon.

What is the problem

I can't access the Polygon in gmap-vue to pass it as an argument.

What kind of things have you already treated

I've tried to use $refs to access the polygon like this:
<gmap-polygon :paths="paths" ref="polygon"></gmap-polygon>

I've also tried to create new 'fake' polygon using gmapApi like this:
const polygon = new this.google().maps.Polygon({ paths: this.paths})
but it throws an error.

Steps to reproduce

Os

• Mac Os X
• Linux (write here the name and version of your distribution)
• Windows

Mobile

• iOS
• Android

Versions

• Node:
• NPM:
• Yarn:

Package manager

• NPM
• Yarn

Plugin version

• 1.4.0
• 1.2.2
• 1.2.1
• 1.2.0
• 1.0.0

Is your feature request related to a problem? Please describe.
To avoid multiple calls to the Google Places API, It would be nice a selector of minimum characters required before call the API.

Describe the solution you'd like
I think that only is necessary to add a prop in /components-implementation/autocomplete.js and a validation here.

Describe alternatives you've considered
A clear and concise description of any alternative solutions or features you've considered.

Additional context
I could add it, but if it is usefull for more people.

Just wanted to check gmap-vue give support to draw freehand if yes then how?

Any help greatly appreciated.

What you try to do

I need set localization for Map, and change it dynamically.

What is the problem

I do not know how to do it

What kind of things have you already treated

l find google documentation for this
https://developers.google.com/maps/documentation/javascript/localization
And stackOvwrflow answer, but i'm not sure if this is the right way and that it won't break the plugin
https://stackoverflow.com/questions/7065420/how-can-i-change-the-language-of-google-maps-on-the-run

Steps to reproduce

No steps for reproduce

Os

• Mac Os X
• Linux (write here the name and version of your distribution)
• Windows

Mobile

• iOS
• Android

Versions

• Node:
• NPM:
• Yarn:

Package manager

• NPM
• Yarn

Plugin version

• 1.4.0
• 1.2.2
• 1.2.1
• 1.2.0
• 1.0.0

Would be nice if we could use v-model with a GmapMarker (along with current :position prop), since everytime I move the marker I need to update manually the new location lat and lng values

mounted() {
this.$nextTick(() => {
this.$refs.gmap.$mapPromise.then(() => {
console.log(this.$refs.gmap.$mapObject.getBounds())
});
});
},

What you try to do

I'm trying to add a custom text field to aucomplete scoped slots as describe here https://diegoazh.github.io/gmap-vue/examples/autocomplete.html

But im not using vuetify, instead I'm using vue-formulate because i need to do some business logic with the value returned from the autocomplete, so this is my code currently for this feature

<template v-slot:input="slotProps">
            <FormulateInput
              name='direccion_1'
              label="Direccion Uno"
              ref="input"
              v-on:listener="slotProps.listeners"
              v-on:attrs="slotProps.attrs"
            >
            </FormulateInput>
          </template>
        </gmap-autocomplete>

What is the problem

My problem is that i'm getting the following error from console InvalidValueError: not an instance of HTMLInputElement
hence my autocomplete field is not working as expected

What kind of things have you already treated

I have tried changing the ref value and also using the childRefName but not sure if I used correctly

Steps to reproduce

Just by adding a component that is not from vuetify like above

Os

• Mac Os X
• Linux (write here the name and version of your distribution)
• Windows

Mobile

• iOS
• Android

Versions

• Node: v12.18.2
• NPM: 6.14.5
• Yarn:

Package manager

• NPM
• Yarn

Plugin version

• 1.4.0
• 1.2.2
• 1.2.1
• 1.2.0
• 1.0.0

Hi @diegoazh,
First of all congrats on keeping this awesome project alive! :)

I've been having loading problems on production env. Although on local dev env. everything works fine.

Console logs the following errors on page load (production):

main.js:

import * as GmapVue from 'gmap-vue'
import GmapCluster from 'gmap-vue/dist/components/cluster'

// Also using Google Charts (could it be a possible conflict?)
import VueGoogleCharts from 'vue-google-charts'

Vue.use(GmapVue, {
  load: {
    key: '###',
    libraries: ['places', 'visualization'],
    region: 'BR',
    language: 'pt-BR'
  },
  installComponents: true
});
Vue.component('GmapCluster', GmapCluster)

Vue.use(VueGoogleCharts)

Maps.vue (component loaded on a Dashboard view, after user login)

<GmapMap
        v-if="map.ready"
        :center="map.center"
        :zoom="map.zoom"
        :options="map.options"
        class="map"
        ref="map"
        @zoom_changed="changedProp('zoom', $event)"
        @center_changed="changedProp('center', $event)"
        @drag="panned(true)"
      >
        <gmap-cluster
          v-if="map.layers.markers"
          :zoom-on-click="true"
          :styles="map.cluster.styles"
          :max-zoom="map.cluster.maxZoom"
        >
          <GmapMarker
            v-for="m in filteredBuzzers"
            :key="m.code"
            :position="m.impression.position"
            :clickable="true"
            :icon="setBuzzerIcon(m)"
            @click="selectBuzzer(m.code)"
          />
        </gmap-cluster>
      </GmapMap>

  import { gmapApi } from 'gmap-vue'

computed: {
  google: gmapApi,
},
mounted () {
      this.$gmapApiPromiseLazy().then(() => {
        console.log('map ready '+this.$refs.map);
        this.map.ready = true;
      });
}

I use Heatmap, Data Layer, Markers & Marker Clusters on the GMaps instance.
In another component I use Autocomplete (address search).

I have been looking a solution for this for a couple months now – stack overflow, vue-google-maps, etc. 😅

I suspect it is an async loading problem of multiple components from the Google Maps API... Am I loading gmap-vue correctly? Could it be the loading order of these API components?

Thanks in advance! Cheers

What you try to do

I am trying to use the plugin in my project

What is the problem

When the app is started, it crashes when import the plugin with

import * as VueGoogleMaps from 'gmap-vue';

I get

ERROR in ./node_modules/gmap-vue/dist/components/map.vue 1:0
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See 
https://webpack.js.org/concepts#loaders
> <template>
|   <div class="vue-map-container">
|     <div ref="vue-map" class="vue-map"></div>
 @ ./node_modules/gmap-vue/dist/main.js 134:34-65
 @ ./src/main.js

ERROR in ./node_modules/gmap-vue/dist/components/street-view-panorama.vue 1:0
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See 
https://webpack.js.org/concepts#loaders
> <template>
|   <div class="vue-street-view-pano-container">
|     <div ref="vue-street-view-pano" class="vue-street-view-pano"></div>
 @ ./node_modules/gmap-vue/dist/main.js 136:49-97
 @ ./src/main.js

ERROR in ./node_modules/gmap-vue/dist/components/drawing-manager.vue 1:0
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See 
https://webpack.js.org/concepts#loaders
> <template>
|   <div>
|     <slot :setDrawingMode="setDrawingMode" :deleteSelection="deleteSelection" />
 @ ./node_modules/gmap-vue/dist/main.js 130:45-88
 @ ./src/main.js

ERROR in ./node_modules/gmap-vue/dist/components/place-input.vue 1:0
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See 
https://webpack.js.org/concepts#loaders
> <template>
|   <label>
|     <span v-text="label"></span>
 @ ./node_modules/gmap-vue/dist/main.js 138:41-80
 @ ./src/main.js

ERROR in ./node_modules/gmap-vue/dist/components/autocomplete.vue 1:0
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See 
https://webpack.js.org/concepts#loaders
> <template>
|   <span v-if="$scopedSlots['input']">
|     <slot
 @ ./node_modules/gmap-vue/dist/main.js 140:43-83
 @ ./src/main.js

ERROR in ./node_modules/gmap-vue/dist/components/info-window.vue 3:0
Module parse failed: Unexpected token (3:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See 
https://webpack.js.org/concepts#loaders
| /* vim: set softtabstop=2 shiftwidth=2 expandtab : */
|
> <template>
|   <div>
|     <div ref="flyaway">
 @ ./node_modules/gmap-vue/dist/main.js 132:41-80
 @ ./src/main.js

What kind of things have you already treated

I tried to install the original plugin vue2-google-maps but I got the same error. Can you help me to solve? Do I need something else?

Steps to reproduce

I just follow the guide in docs.

1. First, install the plugin with npm install gmap-vue --save
2. Register the component in my main.js

import * as VueGoogleMaps from 'gmap-vue';

Vue.use(VueGoogleMaps, {
  load: {
    key: 'MY_KEY',
  },
});

3. Start the app

Os

• Mac Os X
• Linux (write here the name and version of your distribution)
• Windows

Versions

• Node: v13.11.0
• NPM: 6.13.7
• Yarn: -

Package manager

• NPM
• Yarn

Plugin version

• 1.4.0
• 1.2.2
• 1.2.1
• 1.2.0
• 1.0.0

I get this error when using autocomplete and places, the most stranger thing is that i've another component with autocomplete working good.

What you try to do

Describe the bug
autocomplete with custom text field doesn't return places data.

To Reproduce

<gmap-autocomplete>
                      <template v-slot:input="slotProps">
                        <v-text-field
                          ref="input"
                          outlined
                          placeholder           
                          label="Address"
                          color="teal"
                          @place_changed="setPlace"
                          v-on:listeners="slotProps.listeners"          
                        ></v-text-field>
                      </template>
</gmap-autocomplete>

setPlace(place) {
      console.log("test")
      this.place = place;
      console.log(this.place);
    },

Expected behavior
Print places data in console. Here is the that works:

<gmap-autocomplete
    placeholder="This is a placeholder text"
    @place_changed="setPlace"
 ></gmap-autocomplete>

setPlace(place) {
      console.log("test")
      this.place = place;
      console.log(this.place);
    },

Current behavior
The code below with custom text field does't work. I copied the code from the documentation.

Screenshots
none

Desktop (please complete the following information):

• OS: [Mac]
• Browser [chrome, safari]
• Version [e.g. 22]

Smartphone (please complete the following information):

• Device: [e.g. iPhone6]
• OS: [e.g. iOS8.1]
• Browser [e.g. stock browser, safari]
• Version [e.g. 22]

Additional context
Add any other context about the problem here.

Versions

• NPM:

Package manager

• NPM

Plugin version

• 1.4.0

Explain to us what you are trying to do or what is your goal.

What is the problem

Explain to us what is the problem or what is the part of the documentation that is not clear.

What kind of things have you already treated

A small description of the solutions that you already treated.

Steps to reproduce

Explain to us how to get the same problem or provide a small example repository to work on it.

Os

• Mac Os X
• Linux (write here the name and version of your distribution)
• Windows

Mobile

• iOS
• Android

Versions

• Node:
• NPM:
• Yarn:

Package manager

• NPM
• Yarn

Plugin version

• 1.4.0
• 1.2.2
• 1.2.1
• 1.2.0
• 1.0.0

I have a use case to show information on cluster mouse over when i i'm trying this with gmap-info-window it seems not working. Just wanted to know is there support of this feature? Or do i need to create a custom tooltip for this?

<gmap-info-window
      :options="infoOptions"
      :position="infoWindowPos"
      :opened="infoWinOpen"
      @closeclick="infoWinOpen=false"
    >
</gmap-info-window>

<GmapCluster
      :styles="clusterStyles"
      @mouseover="clusterRollOver"
      @mouseout="clusterMouseout"
      ref="groupRef"
    >
      <GmapMarker
        v-for="(marker, index) in markers"
        :key="index"
        :position="marker.position"
        :clickable="true"
        :icon="marker.icon"
      />
    </GmapCluster>