search

GuillaumeLeclerc / vue-google-maps

Google maps component for vue with 2-way data binding
561 stars 655 forks source link

Map Type ID and two way binding #85

Open wjgilmore opened 8 years ago

wjgilmore commented 8 years ago

Hi,

Love the library but have been dealing with a maddening issue. When I try to set map-type-id I'm presented with the warning Prop "mapTypeId" expects a two-way binding type. (found in component: <map>). This attribute is set like so:

<map
  :center.sync="center"
  :zoom.sync="17"
  :map-type-id="satellite"
>

Despite the warning, the map is rendering just fine; I receive the warning, and the map renders, but does so using the ROADMAP type. So why in the world does this particular attribute require two-way binding, and why does attempts to set it to anything but roadmap cause the setting to be ignored? This seems to be contrary to the example presented on https://github.com/GuillaumeLeclerc/vue-google-maps in which I see the setting :map-type-id="terrain" used in an example?

Thanks so much, Jason

GuillaumeLeclerc commented 8 years ago

Hello,

Thank for your issue. Some people want to know when the user change the map id. Therefore it needs to be reflected in the vue data. It needs to be sync.

On the other side some people like you don't want it to be 2 way. And this is fine. It is working but vue (and I don't know why) issue this warning. There have been multiple attempts to remove this warning but the only way we found was to disable all warnings, which is not good.

If you know a way to disable just this warning I think the community would love it.

I know this warning is not perfect but this is the same behavior for other two way attributes. (Try removing the .sync on your map center and you will get the same warning).

Basically we had two choices:

So between a warning and a lack of feature I think a warning is still better

Regards,

Guillaume Leclerc

dccampbell commented 8 years ago

@GuillaumeLeclerc Of note, I believe .sync has been removed from Vue v2. So the library will be incompatible w/ future VueJS versions w/o a change. The recommended alternatives I've seen utilize either v-model or emit events instead.

Edit: Relevant Article