Compatibility with typescript

[hernandobgx]

I am trying to integrate the plugin my project after installing it correctly I try to load it but I get this:

Could not find a declaration file for module 'vue2-google-maps'. '/Users/hbocanegra/Proyectos/Apps/ubik2/ubk-front/node_modules/vue2-google-maps/dist/main.js' implicitly has an 'any' type. Try npm install @types/vue2-google-maps if it exists or add a new declaration (.d.ts) file containing declare module 'vue2-google-maps';

Does anyone know how I can solve it?

This is what I do:

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

Vue.use(VueGoogleMaps, { load: { key: 'AIzaSyBqfjEKxU62udMOGDbNMZBX6oO_4gL9ouQ', libraries: 'places', }, })

[xkjyeah]

Hi Hernando,

Unfortunately I'm not aware of any typescript typings, and none are planned at the moment.

You will have to declare your own. (I'm sorry I can't be more helpful here, but I don't work heavily in Typescript)

On Wed, 19 Dec 2018, 01:44 Hernando Bocanegra <[email protected] wrote:

I am trying to integrate the plugin my project after installing it correctly I try to load it but I get this:

Could not find a declaration file for module 'vue2-google-maps'. '/Users/hbocanegra/Proyectos/Apps/ubik2/ubk-front/node_modules/vue2-google-maps/dist/main.js' implicitly has an 'any' type. Try npm install @types/vue2-google-maps if it exists or add a new declaration (.d.ts) file containing declare module 'vue2-google-maps';

Does anyone know how I can solve it?

This is what I do:

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

Vue.use(VueGoogleMaps, { load: { key: 'AIzaSyBqfjEKxU62udMOGDbNMZBX6oO_4gL9ouQ', libraries: 'places', }, })

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub https://github.com/xkjyeah/vue-google-maps/issues/560, or mute the thread https://github.com/notifications/unsubscribe-auth/ACiTRxxOZqsgTOB0QD2SRqUjqwTZad63ks5u6gpvgaJpZM4ZZ36w .

[davearel]

I'm getting the same thing as @hbocanegra

[jaime-marcondes]

I'm getting the same as @hbocanegra , does you have any news or path to allow using with typescript ? How we can contribute on provide this in this lib ? Thank's

[skartknet]

You can add a vue2-google-maps.d.ts file to the root of your project or to '/src/@types/' with the following content:

declare module "vue2-google-maps";

[yennor]

Did anybody manage to access the google object? I've tried it like that (computed property), but it doesn't work: import {gmapApi} from 'vue2-google-maps';

get google() { return gmapApi; }

[Sartori-RIA]

you can use this types definition =>

https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/master/types/googlemaps/index.d.ts

I try to use this and works :)

to make this do must to create file vue2-google-maps.d.ts and put inside

declare module 'vue2-google-maps' {

  // put here all source from
  // https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/master/types/googlemaps/index.d.ts


}

[Eraledm]

@Sartori-RIA It doesn't work for me, it says "File '...src/vue2-google-maps.d.ts' is not a module." do you have to put something more?

[Sartori-RIA]

@Eraledm your definition file must be inside @types folder, like this => src/@types/vue2-google-maps.d.ts

[develmusa]

@Sartori-RIA Thanks, you put me on the right track. I made it work with the following configuration.

src/@types/vue2-google-maps.d.ts

declare module "vue2-google-maps" {
    import { PluginFunction } from "vue";
    export const install: PluginFunction<{}>;

    // put here all source from
    // https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/master/types/googlemaps/index.d.ts
}

I also had to change declare namespace google.maps to namespace google.maps

main.ts

import * as VueGoogleMaps from 'vue2-google-maps';
Vue.use(VueGoogleMaps, {
  load: {
    key: 'YOUR_API_TOKEN',
    libraries: 'places',

[maciz84]

Hi Guys,

Does anyone know how to use this with webpack. Would I have to add this into the plugins array?? Because I am still getting this error after addingthe d.ts file:

in ./node_modules/vue2-google-maps/dist/components/placeInput.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

| |

[aruneko]

If you want to add correct types for injected parameters, those definition is useful.

// src/@types/vue2-google-map.d.ts
class Map extends MVCObject {
  // add those 2 type definition
  $mapObject: google.maps.Map
  $mapPromise: Promise<any>
}

And, if you want to use this type definition in your .vue file, you just add type exporting in src/@types/vue2-google-map.d.ts at first.

declare module 'vue2-google-maps' {
  import { PluginFunction } from 'vue'
  export const install: PluginFunction<{}>
  // add type exporting
  export type googleMaps = typeof google.maps
}

Then, you can use above type definition in a .vue file like this.

import { google, googleMaps } from 'vue2-google-maps'

declare global {
  interface Window {
    google: {
      maps: googleMaps
    }
  }
}

const location: google.maps.LatLng = new window.google.maps.LatLng(45.0, 120.0)

[valentingavran]

@Sartori-RIA Thanks, you put me on the right track. I made it work with the following configuration.

src/@types/vue2-google-maps.d.ts

declare module "vue2-google-maps" {
    import { PluginFunction } from "vue";
    export const install: PluginFunction<{}>;

    // put here all source from
    // https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/master/types/googlemaps/index.d.ts
}

I also had to change declare namespace google.maps to namespace google.maps

main.ts

import * as VueGoogleMaps from 'vue2-google-maps';
Vue.use(VueGoogleMaps, {
  load: {
    key: 'YOUR_API_TOKEN',
    libraries: 'places',

I also had to add the following configuration inside tsconfig.json beside the stuff from @develmusa

[jounger]

I found the solution for this :

1. Install @type for google map: npm install --save @types/googlemaps
2. Create new file vue2-google-maps.d.ts: src/@types/vue2-google-maps.d.ts
3. Add the following code into vue2-google-maps.d.ts

declare module 'vue2-google-maps' {
  import { PluginFunction } from "vue";
  export const install: PluginFunction<{}>;
  /// <reference types="@types/googlemaps" />
}

That's all you need, without any other step! Ref: https://stackoverflow.com/a/51169121/10597062

[haigopi]

I must be doing something wrong. I am not able to get the Google Object. Can someone guide me to resolve this?

tsconfig: "typeRoots": [ "./node_modules/@types", "./node_modules/vuetify/types" ], "types": [ "webpack-env", "jest", "googlemaps", "vuetify" ],

package.json: "dependencies": { "@types/googlemaps": "^3.39.13", "vue2-google-maps": "^0.10.7",....... }

main.ts: Vue.use(VueGoogleMaps, { load: { key: 'XXXXXXXXX', libraries: ['places'], // necessary for places input installComponents: true, autobindAllEvents: true }, });

vue2-google-maps.d.ts declare module 'vue2-google-maps' { import { PluginFunction } from "vue"; export const install: PluginFunction<{}>; /// <reference types="@types/googlemaps" /> }

Vue File: <GmapMap :center="currentLocation" :zoom="14" map-type-id="terrain" style="width: 100%; height: 330px" :options="{ disableDefaultUI: true }" ref="mapRef" > <GmapMarker :position="currentLocation" :clickable="true" :draggable="true" @click="center = currentLocation" /> </GmapMap>

updated() { // debugger; this.$nextTick(function() { this.$log.info(name, ' ---> Geo Location retrived from Store: ', this.currentLocation, this.$refs.mapRef); }) }

Tried several options like

• importing google object
• importing gmapApi

and I am unable to obtain a google object. I am looking to create an instance for Geocoder to identify the country acquiring the browser's current location(lat, lng). As I am not able to obtain the google object I am not able to create the Geocoder.

Direction if any or a simple example to solve this will be appreciated. Thanks.

[vinayakkulkarni]

For folks with Nuxt + TS + Vue Composition API:

1. Install Google Maps typings:

$ npm i @types/googlemaps

2. Include the typings in your tsconfig.json:

"compilerOptions": {
  "types": ["@types/googlemaps"],
}

3. Declare .d.ts module for vue2-google-maps: types/vue2-google-maps.d.ts

/// <reference types="@types/googlemaps" />
declare module 'vue2-google-maps' {
  import Vue, { PluginFunction } from 'vue';

  export const install: PluginFunction<{}>;

  class gmapApi extends Vue {}

  export { gmapApi };
}

4. Include the newly created vue2-google-maps.d.ts declaration file in your tsconfig.json:

  "files": [
    "types/vue2-google-maps.d.ts",
  ],
  "exclude": [
    "node_modules",
    ".nuxt",
    "dist"
  ]

5. Usage in Vue SFC:

<template>
  <client-only>
    <!-- Google Map -->
    <gmap-map
      ref="mapRef"
      :center="{
        lat: 19.11049824177,
        lng: 72.882502005,
      }"
      :options="{
        zoomControl: true,
        mapTypeControl: false,
        scaleControl: true,
        streetViewControl: false,
        rotateControl: false,
        fullscreenControl: false,
        disableDefaultUi: false,
        zoomControlOptions: {
          position: 3,
        },
      }"
      :zoom="7"
      map-type-id="satellite"
      class="min-w-full min-h-full"
    >
      <gmap-marker
        :position="{
          lat: 19.11049824177,
          lng: 72.882502005,
        }"
        :icon="{
          url: require('~/assets/img/blue-marker.svg'),
          origin: new google.maps.Point(0, 0),
          size: new google.maps.Size(22, 36),
          scaledSize: new google.maps.Size(30, 30),
        }"
      />
    </gmap-map>
  </client-only>
</template>
<script lang="ts">
  import { computed, defineComponent } from '@vue/composition-api';
  import { gmapApi as GoogleMap } from 'vue2-google-maps';
  export default defineComponent({
    name: 'GoogleMapLayersDemo',
    setup() {
      const google = computed(() => {
        return new GoogleMap();
      });

      return { google };
    },
  });
</script>