[Vuejs]-Is there any way to disable clickable landmarks on Google Maps API if I'm using vue2-google-maps package?

4👍

You could consider the following options to set map icons as not clickable

Option 1

google.maps.MapOptions.clickableIcons property in vue-google-maps could be set like this:

<GmapMap :center="center" :zoom="zoom" :options="options"></GmapMap>


export default {
  data() {
    return {
      zoom: 12,
      center: { lat: 51.5287718, lng: -0.2416804 },
      options: {
        clickableIcons: false
      }
    };
  }
}

Option 2

By access to google.maps.Map.setClickableIcons method via ref:

<GmapMap :center="center" :zoom="zoom" ref="mapRef"></GmapMap>


export default {
  data() {
    return {
      zoom: 12,
      center: { lat: 51.5287718, lng: -0.2416804 },
    };
  },
  mounted: function() {
     this.$refs.mapRef.$mapPromise.then(() => {
        this.$refs.mapRef.$mapObject.setClickableIcons(false)
    })
  }
}

Leave a comment