Vue2.0.0 Compatibility?

[DotCoyote]

Is there a roadmap for Vue2.0.0-Compatibility yet? :)

[GuillaumeLeclerc]

My company plans on switching from vue to React when vu2 comes out so I guess I won't be able to do it during my working hours.

Moreover I think the lack of events will make this work complicated (since google maps works with events).

So no roadmap yet sorry

[khenam]

Hi, I need a vue2 compatibility, and here in my company we upgrade your library to be compatible. I sent you a Pull Request to test and verify if can be used. Thank's

[RafaelPlantard]

@khenam is it possible use your fork in npm packages?

[khenam]

@RafaelPlantard i think maybe yes. You have to change your dependence of vue-google-maps to:

  "dependencies": {
    "vue": "^2.0.3",
    "vue-google-maps": "https://github.com/Kofre/vue-google-maps/archive/v1.0.1.tar.gz"

[RafaelPlantard]

@khenam thanks so much, and congrats to you for the great job into converting this package. I will try today.

[alexsandro-xpt]

+1

[khenam]

Hi, I made changes recommended by maintainers, and break the object bind idea and use old way to set properties, but no 2-way bind props. only with events. Now release a v1.1.0.

Add

• All components now have a event to each older 2-way bind properties with "_changed" in the end. (ex.: "_changed" => center_changed)

Change

• Change all components to be easier extend with a method to be replaced called create<Component>Object
• Convert all components to be backward compatible
• Change in PropsBind the name of the vueAttribute to be different and don't generate error.
• Change Logic to don't depend external event hub and use parent hierarchy
• Change Prop "class" to "className" in PlaceInput.

To use:

"dependencies": {
    "vue": "^2.0.3",
    "vue-google-maps": "https://github.com/Kofre/vue-google-maps/archive/v1.1.0.tar.gz"

[uebbi]

@khenam First, sorry for the noob question! :) I downloaded your version to my node_modules folder (I'm using webpack / vue-cli). How can I use then now?

I tried the follow code but I get the error: Uncaught TypeError: Cannot read property 'load' of undefined(…) Apparently VueGoogleMap is undefined. :(

My App.vue:

<template>
  <div id="app">
    <google-map :center="center" :zoom="12"></google-map>
  </div>
</template>

<script>
import VueGoogleMap from 'vue-google-maps'

VueGoogleMap.load({
  key: 'AIzaSyBzlLYISGjL_ovJwAehh6ydhB56fCCpPQw',
  v: '3.26'
})

export default {
  name: 'app',
  data () {
    return {
      center: { lat: 48.8538302, lng: 2.2982161 }
    }
  },
  components: {
    'googleMap': VueGoogleMap.Map
  }
}
</script>

<style></style>

[khenam]

Sorry @uebbi, My project is not cli with nodejs, I did not really test in this environment. But I believe the way to use it is without reference to the name of the library:

<template>
  <div id="app">
    <google-map :center="center" :zoom="12"></google-map>
  </div>
</template>

<script>
import {load, Map} from 'vue-google-maps'

load({
  key: 'AIzaSyBzlLYISGjL_ovJwAehh6ydhB56fCCpPQw',
  v: '3.26'
})

export default {
  name: 'app',
  data () {
    return {
      center: { lat: 48.8538302, lng: 2.2982161 }
    }
  },
  components: {
    'googleMap': Map
  }
}
</script>

<style></style>

I tried to test here, but I have no skill in nodejs to validate if the problem is configuration or the library. I'm still studying nodejs.

[uebbi]

@khenam Tks for response.

That way works partially: the vue-map-container are created, google maps' scripts are injected but the map itself its not rendered. =(

Without webpack it worked: http://jsfiddle.net/uebbi/tck3kn5p/4/

[uebbi]

For those who need: example of integration between Vue.js 2 + VueGoogleMaps with vue-cli / webpack: https://github.com/uebbi/vue-google-maps-example

Not the best solution, but works!

[khenam]

Fix

• Fix propsBinder.js to watch computed data instead props.

https://github.com/Kofre/vue-google-maps/archive/v1.1.1.tar.gz

[gstrobl]

@uebbi, your example doesn`t work for me, a blank page with no lint errors and no console errors. @khenam do you have a solution for vue-cli? I tried your example code and it worked for me one time and after refresh I get an error: Failed to mount component: template or render function not defined on gmap-map

[uebbi]

@gstrobl Fixed! Try again.

[fer-ri]

@uebbi @khenam

There's bug, marker position can't be sync, try this fiddle > right click to add marker > drag marker

http://jsfiddle.net/wm65rLfs/

[khenam]

@ghprod, vue2 don't have sync. now you have to listen change event.

http://jsfiddle.net/wm65rLfs/1/

[khenam]

@uebbi, @gstrobl, i'm working with @xkjyeah, in his repository to solve this problems, he have a solution to this problem.and when we merge our branches i came here to communicate.

[fer-ri]

@khenam .. wow its works, thanks :+1:

[uebbi]

Example updated! Using vue2-google-maps - https://github.com/uebbi/vue-google-maps-example

[xkjyeah]

Hey thanks for the effort!

I'm actually have a small suite of examples at https://github.com/xkjyeah/vue-google-maps/tree/vue2/examples.

These tests are hosted on Github pages http://xkjyeah.github.io/vue-google-maps/.

These also serve as a checklist of tests that contributions should pass. This is why I put them in the same project. If you have additional features that you added to the original vue-google-maps-example it will be great if you can add that as an example to this repository.

It would be nice to move towards automated tests. If you know how to get PhantomJS running, it would be most welcome!

On Sat, Nov 26, 2016 at 10:54 PM, uebbi [email protected] wrote:

Example updated! Using vue2-google-maps - https://github.com/uebbi/vue- google-maps-example

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/GuillaumeLeclerc/vue-google-maps/issues/96#issuecomment-263067456, or mute the thread https://github.com/notifications/unsubscribe-auth/ACiTR7sL8YBhJrak3enwnND2dZpwQ96Uks5rCEgSgaJpZM4JgzxK .

[raphaelsaunier]

@GuillaumeLeclerc perhaps it would be a good idea to update the README and include a link to @xkjyeah's fork at the top until you have some time to dedicate to the project?

When imported in a Vue 2.1 app, your component will insert the wrapper element as well as the Google Maps script tag but then it fails silently, which can be a bit confusing. :)

[xkjyeah]

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

Reason for this is that it becomes difficult to determine who controls the opened property. Is it the parent marker? The marker (via close_clicked)? The template? Moreover because two-way binding is no longer available it is impossible to update each of the multiple controllers of changes to the property. Hence click-to-open has been removed.

On 3 Dec 2016 01:04, "Stephane Demotte" [email protected] wrote:

@xkjyeah https://github.com/xkjyeah can you publish the package on github ?

i can't open the infoWindow if i click on the marker, do you know how to fix it ?

Thanks a lot for the Vue2 version :)

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/GuillaumeLeclerc/vue-google-maps/issues/96#issuecomment-264489965, or mute the thread https://github.com/notifications/unsubscribe-auth/ACiTR6MfownkryRQQN11TT3f2ophwo1Tks5rEEGagaJpZM4JgzxK .

[xkjyeah]

npm install babel-plugin-transform-runtime?

On 12 Dec 2016 4:27 a.m., "Tyler Youschak" [email protected] wrote:

I'm getting the following error when I try to compile my component: http://shots.tjyouschak.me/cH2Rr0

Any suggestions?

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/GuillaumeLeclerc/vue-google-maps/issues/96#issuecomment-266305386, or mute the thread https://github.com/notifications/unsubscribe-auth/ACiTRyHECn4UxvnudaYVsfP6Yp4yvwSOks5rHFzOgaJpZM4JgzxK .

[gustawdaniel]

So this package is still not compatible with vue 2?

In presented example there is other package https://github.com/uebbi/vue-google-maps-example/blob/master/src/App.vue

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

Probably this one

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