[Vuejs]-How to toggle between roadmap view and satellite view(google maps)on click of a single button in vue.js

by

0👍

You were very close but I don’t know what you have stored inside this.mapTypeOptions. Despite that, this should work for you :

<template>
  <v-btn
    class="white"
    @click="selectMapType()"
    :class="{
      'mob-map-types': this.$vuetify.breakpoint.xs,
    }"
  >
    <b class="pa-2">S</b>
  </v-btn>
</template>

<script>
export default {
  data() {
    return {
      toggle: false,
      selectMapType() {
        this.toggle = !this.toggle;
        this.neeMap.map.setMapTypeId(this.toggle ? "roadmap" : "satellite");
        // if you don't know what the "?" and ":" do, look up ternary operator ;)
      },
    };
  },
};
</script>

Make sure, when you initialize your map, to set the default mapTypeId to "satellite" :

const mapOptions = {
  zoom: 8,
  mapTypeId: 'satellite'
};

Leave a comment