How to use markerwithlabel library

[Gujionsen]

Hallo

Is there way to use markerwithlabel library somehow? I want to change label style and this library gives ability to make it through the labelClass.

Thank you.

[rcosta-gcare]

I have been looking for the same thing, let me know if you find any solution.

[waynelau]

Ditto. Anyone wind up cleanly integrating the library?

[Georgian]

Would be nice to be able to implement this

[tabuz]

Hi guys, I struggled to style <GmapMarker> label. As we know :label allows you to modify very few css attributes. One of them is color. What I did was:

• I've passed very specific color to a label options

{
    text: 'Foo',
    color: "rgb(254, 254, 254)"
};

And then in my component I added very specific css selector.

.gm-style
  > div
  > div
  > div
  > div
  > div
  > div
  > div[style*="color: rgb(254, 254, 254)"] {
  background: blue;
  border-radius: 50%;
  line-height: 20px;
  height: 20px;
  width: 20px;
  font-size: 12px !important;
  text-align: center;
  font-weight: 700;
  box-shadow: 1px 2px 3px 0 rgba(0, 0, 0, 0.2);
}

And the result is:

Hope it will help someone ;)

[archierinn]

Finally, I think I solved it. As documented here, you must make it as a component/plugin.

First download and install node-markerwithlabel

npm install markerwithlabel

After that, you can copy-paste this code to a new file markerWithLabel.js markerWithLabel.vue

After that you can import it as component like this:

<template>
  <GmapMap
    :zoom="..."
    :center="..."
  >
    <GmapMarkerWithLabel
      v-for="(m, index) in markers"
      :key="index"
      :position="..."
      :icon="..."
      :label-content="..."
      :label-in-background="false"
      :label-anchor="..."
      :label-class="..."
      :label-style="..."
      :label-visible="true"
      :clickable="true"
      :draggable="false"
    />
  </GmapMap>
</template>

<script>
// changed from markerWithLabel.js to markerWithLabel.vue
import GmapMarkerWithLabel from './markerWithLabel.vue'

export default {
  components: { GmapMarkerWithLabel },
  data () {
    return  {
      markers: [{
        labelAnchor: null
      },
      {
        labelAnchor: null
      }]
    }
  },
  mounted () {
    this.$refs.mapRef.$mapPromise.then((map) => {

    /* Pass the value inside the mapPromise or your preferred method  */
    for (let marker of this.markers) {
     marker.labelAnchor = new google.maps.Point(45, 0) // Now the google maps instance ready
    }

    })
  }
}
</script>

If you want to add infoWindow inside marker, I had implemented it. You can copy-paste these files to new file (place it in same folder): infoWindowMWL.js infoWindowMWL.vue

After that you can implement like this:

<template>
  <GmapMap
    :zoom="..."
    :center="..."
  >
    <GmapMarkerWithLabel
      v-for="(m, index) in markers"
      :key="index"
      :position="..."
      :icon="..."
      :label-content="..."
      :clickable="true"
    >
      <GmapInfoWindowMWL
        :opened="infoWindowShown"
        @closeclick="infoWindowShown = false"
      >
        Your content here
      </GmapInfoWindowMWL>
    </GmapMarkerWithLabel>
  </GmapMap>
</template>

<script>
// changed from markerWithLabel.js to markerWithLabel.vue
import GmapMarkerWithLabel from './markerWithLabel.vue'
import GmapInfoWindowMWL from './infoWindowMWL.vue'

export default {
  components: { GmapMarkerWithLabel, GmapInfoWindowMWL },
  data () {
    return {
      infoWindowShown: false
    }
  }
}
</script>

Edit: If you want to add html content as label, I had added slots for label content. You can use it like this:

<template>
  <GmapMap
    :zoom="..."
    :center="..."
  >
    <GmapMarkerWithLabel
      v-for="(m, index) in markers"
      :key="index"
      :position="..."
      :icon="..."
      :label-content="..."
      :label-in-background="false"
      :label-anchor="..."
      :label-class="..."
      :label-style="..."
      :label-visible="true"
      :clickable="true"
      :draggable="false"
    />
    <template v-slot:labelContent>
        <i class='fas fa-house-user'></i>
    </template>
  </GmapMap>
</template>

<script>
import GmapMarkerWithLabel from './markerWithLabel.vue'

export default {
  components: { GmapMarkerWithLabel }
}
</script>

Hope it helps! ^^

[unguul]

For those looking to use multi-character strings as marker label take a look at https://developers.google.com/maps/documentation/javascript/markers#marker_labels

[thekubilay]

<template>
  <GmapMap
    :zoom="..."
    :center="..."
  >
    <GmapMarkerWithLabel
      v-for="(m, index) in markers"
      :key="index"
      :position="..."
      :icon="..."
      :label-content="..."
      :clickable="true"
    >
      <GmapInfoWindowMWL
        :opened="infoWindowShown"
        @closeclick="infoWindowShown = false"
      >
        Your content here
      </GmapInfoWindowMWL>
    </GmapMarkerWithLabel>
  </GmapMap>
</template>
Hope it helps! ^^

thank you for markerwithlabel lib. but I have a question about the label-anchor. examples says that I can give the value like labelAnchor: new google.maps.Point(22, 0), but it didn't worked. How can I pass the value?

[archierinn]

<template>
  <GmapMap
    :zoom="..."
    :center="..."
  >
    <GmapMarkerWithLabel
      v-for="(m, index) in markers"
      :key="index"
      :position="..."
      :icon="..."
      :label-content="..."
      :clickable="true"
    >
      <GmapInfoWindowMWL
        :opened="infoWindowShown"
        @closeclick="infoWindowShown = false"
      >
        Your content here
      </GmapInfoWindowMWL>
    </GmapMarkerWithLabel>
  </GmapMap>
</template>
Hope it helps! ^^

thank you for markerwithlabel lib. but I have a question about the label-anchor. examples says that I can give the value like labelAnchor: new google.maps.Point(22, 0), but it didn't worked. How can I pass the value?

Hi, sorry I forgot. Because the google maps instance is not ready yet, you have to wait until promise return. For example, you can do it like this:

<template>
  <GmapMap
    ref="mapRef"
    :zoom="..."
    :center="..."
  >
    <GmapMarkerWithLabel
      v-for="(m, index) in markers"
      :key="index"
      :position="..."
      :icon="..."
      :label-content="..."
      :label-anchor="m.labelAnchor"
      :label-class="..."
      :label-style="..."
      :clickable="true"
      :draggable="false"
    />
  </GmapMap>
</template>

<script>
import GmapMarkerWithLabel from './markerWithLabel.js'

export default {
  components: { GmapMarkerWithLabel },
  data () {
    return  {
      markers: [{
        labelAnchor: null
      },
      {
        labelAnchor: null
      }]
    }
  },
  mounted () {
    this.$refs.mapRef.$mapPromise.then((map) => {

    /* Pass the value inside the mapPromise or your preferred method  */
    for (let marker of this.markers) {
     marker.labelAnchor = new google.maps.Point(45, 0) // Now the google maps instance ready
    }

    })
  }
}
</script>

[thekubilay]

  mounted () {
    this.$refs.mapRef.$mapPromise.then((map) => {

    /* Pass the value inside the mapPromise or your preferred method  */
    for (let marker of this.markers) {
     marker.labelAnchor = new google.maps.Point(45, 0) // Now the google maps instance ready
    }

    })
  }
}

Thank you for pointing it out. now I can add the labelAnchor but in the end custom label position not changing, not error as well. It's look like there is not problem, but I can't give a new position for the custom label.

[archierinn]

  mounted () {
    this.$refs.mapRef.$mapPromise.then((map) => {

    /* Pass the value inside the mapPromise or your preferred method  */
    for (let marker of this.markers) {
     marker.labelAnchor = new google.maps.Point(45, 0) // Now the google maps instance ready
    }

    })
  }
}

Thank you for pointing it out. now I can add the labelAnchor but in the end custom label position not changing, not error as well. It's look like there is not problem, but I can't give a new position for the custom label.

can you post your code?

[thekubilay]

can you post your code?

sure here it is the map.vue component ->

<template>
    <gmap-map
        ref="mapRef"
        :center="center"
        :zoom="12"
    >
        <GmapMarkerWithLabel
            v-for="(marker, index) in create_markers"
            :key="index"
            :position="marker"
            @click="center=marker"
            :clickable="true"
            :draggable="false"
            :label-anchor="marker.anchor"
            label-content="<i class='fas fa-house-user'></i>"
            label-class="marker_bg"

        ></GmapMarkerWithLabel>        
    </gmap-map>
</template>
<script>
import GmapMarkerWithLabel from '../../helpers/marker-with-label'
import {mapGetters } from "vuex";
export default {
    components: { 
        GmapMarkerWithLabel 
    },
    data() {
        return {
            center: { lat: 34.751980, lng: 135.458200 },
            places: [],
            currentPlace: null
        };
    },
	mounted(){
        this.geolocate();
        this.$refs.mapRef.$mapPromise.then((map) => {
            for (let marker of this.create_markers) {
                marker.anchor = new google.maps.Point(30,30) // Now the google maps instance ready
            }
        })
	},
    methods: {
        geolocate() {
            navigator.geolocation.getCurrentPosition(position => {
                this.center = {
                    lat: position.coords.latitude,
                    lng: position.coords.longitude
                };
            });
        }
    },
    computed: {
        ...mapGetters([
            "get_center_lat",
            "get_center_lng",
        ]),
        create_markers(){
            const markers = [
                {
                    "lat": 34.751980,
                    "lng": 135.458200,
                    "anchor": null,
                },
                {
                    "lat": 34.691813,
                    "lng": 135.496300,
                    "anchor": null,
                },
            ];
            return markers
        }
    },
}

[archierinn]

can you post your code?

sure here it is the map.vue component ->

<template>
    <gmap-map
        ref="mapRef"
        :center="center"
        :zoom="12"
    >
        <GmapMarkerWithLabel
            v-for="(marker, index) in create_markers"
            :key="index"
            :position="marker"
            @click="center=marker"
            :clickable="true"
            :draggable="false"
            :label-anchor="marker.anchor"
            label-content="<i class='fas fa-house-user'></i>"
            label-class="marker_bg"

        ></GmapMarkerWithLabel>        
    </gmap-map>
</template>
<script>
import GmapMarkerWithLabel from '../../helpers/marker-with-label'
import {mapGetters } from "vuex";
export default {
    components: { 
        GmapMarkerWithLabel 
    },
    data() {
        return {
            center: { lat: 34.751980, lng: 135.458200 },
            places: [],
            currentPlace: null
        };
    },
	mounted(){
        this.geolocate();
        this.$refs.mapRef.$mapPromise.then((map) => {
            for (let marker of this.create_markers) {
                marker.anchor = new google.maps.Point(30,30) // Now the google maps instance ready
            }
        })
	},
    methods: {
        geolocate() {
            navigator.geolocation.getCurrentPosition(position => {
                this.center = {
                    lat: position.coords.latitude,
                    lng: position.coords.longitude
                };
            });
        }
    },
    computed: {
        ...mapGetters([
            "get_center_lat",
            "get_center_lng",
        ]),
        create_markers(){
            const markers = [
                {
                    "lat": 34.751980,
                    "lng": 135.458200,
                    "anchor": null,
                },
                {
                    "lat": 34.691813,
                    "lng": 135.496300,
                    "anchor": null,
                },
            ];
            return markers
        }
    },
}

Sorry, for late response. I noticed that the anchor cannot changed explicitly so I must manually create watchers for the labelAnchor. Thanks to this issue I can solved it.

I have updated the gist and the guide. Hope it helps!

[gaozhixiaopengpeng]

I have updated the gist and the guide. Hope it helps! ? Can can you post your code for solve this issue @archierinn

[gaozhixiaopengpeng]

can you post you code for solve label anchor issue @archierinn

[archierinn]

@gaozhixiaopengpeng
For use, I used it like this

<template>
<gmap-marker-with-label
        v-for="(m) in marker"
        :key="m.id"
        :position="m.position"
        :label-content="m.labelContent"
        :label-anchor="labelAnchor"
        :label-class="m.labelClass"
        :label-style="m.labelStyle"
        :clickable="true"
        :draggable="false"
        @click="openWindow(m.id)"
      />
</template>

For the marker label code, I placed it in gist. You can access it here.https://gist.github.com/archierinn/aa6c20347c7d023914eb26cc0e5617d6

for the revision that I had to solve the label content issue, you can access it here https://gist.github.com/archierinn/aa6c20347c7d023914eb26cc0e5617d6/revisions

To highlight the label anchor issue, I had to create watchers inside markerWithLabel.js :

<script>
methods: {
    _labelAnchor () {
      if (this.labelAnchor) {
        /* Thanks to: https://stackoverflow.com/questions/25165511/how-we-set-marker-label-content-by-javascript-in-google-map-api */
        this.$markerWithLabelObject.set('labelAnchor', this.labelAnchor)
      }
    },
    _labelContent () {
      if (this.labelContent) {
        this.$markerWithLabelObject.set('labelContent', this.labelContent)
      }
    },
},
afterCreate (inst) {
    if (this.$clusterPromise) {
      this.$clusterPromise.then((co) => {
        co.addMarker(inst)
        this.$clusterObject = co
      })
    }
    this.$watch('labelAnchor', () => {
      this._labelAnchor()
    })
    this.$watch('labelClass', () => {
      this._labelClass()
    })
    this.$watch('labelContent', () => {
      this._labelContent()
    })
    this.$watch('labelInBackground', () => {
      this._labelInBackground()
    })
    this.$watch('labelStyle', () => {
      this._labelStyle()
    })
    this.$watch('labelVisible', () => {
      this._labelVisible()
    })
  }
</script>

Thanks

[gaozhixiaopengpeng]

Thanks your help. Star + 1 @archierinn