How to change the color of the Google Map marker using Vue JS

Question

How to change the color of the Google Map marker using Vue JS

2.5k views Asked by vignesh ramesh At 09 December 2024 at 10:24

Right now I am using vuetify and vue js to implement the map functionality in my application. I am using vue2-google-maps package to implement it and as of now it works fine for me.

Now I want to change the color of the icon and I am using the following url to change the color of the icon "http://maps.google.com/mapfiles/ms/icons/orange-dot.png"

and my HTML code looks like below

<gmap-map
  :center="center"
  :zoom="7"
  style="width:50%;  height: 400px;"
>
  <gmap-marker
    :key="index"
    v-for="(m, index) in markers"
    :position="m"
    icon= "http://maps.google.com/mapfiles/ms/icons/green-dot.png"
    @click="center=m"
  ></gmap-marker>
  
</gmap-map>

now instead of passing direct url to icon, Can I create a function where it checks certain condition and return different type of color url for each condition to the icon. If that possible can you let me know how to achieve it

Original Q&A

There are 1 answers

**Pagemag** · Accepted Answer · 2021-05-03 04:43:54

You can put the value of the different icons inside the data and create a variable that is null.This null variable will be the value of your icon.

In the code I made, I used radio buttons that will change the Marker icons everytime I check a radiobutton for the specific color. To explain,I used a listener(methods) to the radiobutton changes. Inside this method, I put my if else condition for the iconColor value. Here's a sample code and code snippet below:

<body>
  <div id="root">

    <form name="demo">
      <label>
        Orange
        <input type="radio" value="orange" name="colors" @change="onChange($event)">
      </label>
      <label>
        Yellow
        <input type="radio" value="yellow" name="colors" @change="onChange($event)">
      </label>
      <label>
        Blue
        <input type="radio" value="blue" name="colors" @change="onChange($event)">
      </label>
    </form>
    <google-map :center="center" :zoom="7" style="width: 100%; height: 500px">
      <google-marker v-for="(m, key) in markers" :position="m.position" :icon=iconColor></google-marker>
    </google-map>
  </div>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.0/vue.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.4/lodash.js"></script>
  <script src="../dist/vue2-google-maps.js"></script>

  <script>
    Vue.use(VueGoogleMaps, {
      load: {
        key: ''
      },
      // Demonstrating how we can customize the name of the components
      installComponents: false,
    });

    document.addEventListener('DOMContentLoaded', function() {
      Vue.component('google-map', VueGoogleMaps.Map);
      Vue.component('google-marker', VueGoogleMaps.Marker);

      new Vue({
        el: '#root',
        data: {
          center: {
            lat: 10.0,
            lng: 10.0
          },
          orange: 'http://maps.google.com/mapfiles/kml/paddle/orange-circle.png',
          yellow: 'http://maps.google.com/mapfiles/kml/paddle/ylw-circle.png',
          blue: 'http://maps.google.com/mapfiles/kml/paddle/blu-circle.png',
          markers: [{
            position: {
              lat: 11.0,
              lng: 11.0
            }
          }],
          iconColor: null
        },
        methods: {
          onChange(event) {
            var optionText = event.target.value;
            console.log(optionText);

            if (optionText == "orange") {
              this.iconColor = this.orange
            } else if (optionText == "yellow") {
              this.iconColor = this.yellow
            } else {
              this.iconColor = this.blue
            }
          }
        }
      });
    });

  </script>

</body>

TechQA.

How to change the color of the Google Map marker using Vue JS

There are 1 answers

Related Questions in JAVASCRIPT

Related Questions in HTML

Related Questions in VUE.JS

Related Questions in GOOGLE-MAPS

Related Questions in VUE2-GOOGLE-MAPS

Popular Questions

Popular Tags

Trending Questions