How to change the color of the Google Map marker using Vue JS
Question
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
1 answers
solution1
0 ACCPTED 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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.