CODEWITHSUNDEEP
google-mapsvue.jsgoogle-maps-api-3vuejs2vue2-google-maps
Onyx
Onyx

Reputation: 5772

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

I am trying to remove the clickable landmarks on the Google Maps API and I have found the property which I must set to false if I want to do that, however, since I'm using https://www.npmjs.com/package/vue2-google-maps, I can't seem to figure out how to do that, and the vue2-google-maps documentation doesn't seem to indicate how to change this property.

Based on this https://developers.google.com/maps/documentation/javascript/reference/map#MapOptions.clickableIcons , I need to set clickableIcons to false. Sadly I can't figure out how to access that property clickableIcons.

So far I've accessed a couple of other properties like zoom and center this way:

        <GmapMap ref="mapRef"
            @click='createMarker'
            :center="center"
            :zoom="zoom"
            :map-type-id="map"
            style="width: 100%; height: 800px"
        >
        </GmapMap>

However, adding :clickableIcons: false seem to not do anything in this case.

Upvotes: 0

Views: 1507

Answers (1)

Vadim Gremyachev
Vadim Gremyachev

Reputation: 59338

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

Upvotes: 3

Related Questions