Can Markers support InfoWindow?

[jcartwright]

I've attempted to add content when rendering the Marker components, but the "slot" content seems to just be ignored.

<googlemaps-marker
  :key="..."
  :title="..."
  :position="..."
>
  <div>Info Window</div>
</googlemaps-marker>

I see comments in the code about supporting the infowindow inside a Marker, but it doesn't seem to work as I would expect.

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
    )
  }
},

Am I missing something? Thanks for the work you're doing!

[walkerdigital]

+1

[murilolopes]

any news? @jcartwright

[maciz84]

Is there any workaround for now?

[Deleted user]

I'll try to make this works. But first, give me some background info here.

This infoWindow feature it's implemented already or no? If it's implemented but not working, I can dig to find the issue. If not implemented yet, I can try to implement it, for this I need to know how this package is managing the current selected marker? At examples I can see something like:

<googlemaps-marker
v-for="marker of markers"
:key="marker._id"
:label="{
  color: marker === currentmarker ? 'white' : 'black',
  fontFamily: 'Material Icons',
  fontSize: '20px',
  text: 'star_rate',
}"
:position="marker.position"
@click="selectMarker(marker._id)"/>

but idk if its just an example or actual implementation

[Oscarato]

I could find a solution:

googlemaps-map(
    **ref="map"**
    :center.sync="{ lat: '', lng: '' }" 
    :zoom.sync="15"
    style="height: 400px;")

    googlemaps-marker(
        **:ref="marker.id"**
        v-for="marker of serviceorder.markers" 
        :key="marker.id"
        :position="{ 'lat': parseFloat(marker.latitude), 'lng': parseFloat(marker.longitude) }" 
        :label="''"
        @click="selectMarker(marker)")

I used "ref" and then:

selectMarker(marker){
    var map = this.$refs.map.$_map
    var marker_ele = this.$refs[marker.id][0].$_marker
    var contentString = 'Your html code'
    var infowindow = new google.maps.InfoWindow({
        content: contentString
    });
    infowindow.open(map, marker_ele);
}

[jcartwright]

I was able to get the solution @Oscarato provided to work!

[nstCactus]

Unfortunately @Oscarato's approach won't work if you want to display a Vue component in the InfoWindow. Anyone has an idea on how to fix the lib?

[anteriovieira]

Try

import Vue from 'vue'
import MyVueComponent from './MyVueComponent.vue'

export default {
    // ...
    selectMarker (refId) {
      const Wrapper= Vue.extend(MyVueComponent)
      const InfoMarker = new Wrapper().$mount()

      const map = this.$refs.map.$_map
      const marker = this.$refs[refId][0].$_marker
      const infowindow = new window.google.maps.InfoWindow({
        content: InfoMarker.$el
      })
      infowindow.open(marker, mark)
    }
}

Example: