Menu
I'm newbie in vuejs. I'm using vue-google-maps to show markers and I wanna know how can I change the marker icon. I tried to add icon to marker tag but it doesn't work. Below my code :
In my template, I have :
<marker :position.sync="m.position" :icon.sync="m.icon" v-for="m in markers"></marker>
and here is my script :
export default {
data: function data() {
return {
center: { lat: 33.533818415851705, lng: -3.746186887500016 },
zoom: 7,
markers: [{position: { lat: 34.263, lng: -6.582 }, icon:"../assets/marker-icon.png"}]
};}};
Can someone guide me please?
528
Have a look bug here.
And trick here
document.addEventListener('DOMContentLoaded', function() {
VueGoogleMap.load({
key: 'AIzaSyAF2ndm4PTn52sqO8E2NW3bAULQu2-IQaw'
});
Vue.component('marker', VueGoogleMap.Marker);
Vue.component('map', VueGoogleMap.Map);
var map = new Vue({
el: '#map',
data: {
center: {
lat: 41.6005450,
lng: -93.609
},
markers: [{
position: {
lat: 41.585095,
lng: -93.624523
}
}]
},
});
});<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.21/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.6.1/lodash.min.js"></script>
<script src="https://rawgit.com/GuillaumeLeclerc/vue-google-maps/master/dist/vue-google-maps.js"></script>
<div id="map">
<map :icon="{path:'M55.296 -56.375v40.32q0 1.8 -1.224 3.204t-3.096 2.178 -3.726 1.152 -3.474 0.378 -3.474 -0.378 -3.726 -1.152 -3.096 -2.178 -1.224 -3.204 1.224 -3.204 3.096 -2.178 3.726 -1.152 3.474 -0.378q3.78 0 6.912 1.404v-19.332l-27.648 8.532v25.524q0 1.8 -1.224 3.204t-3.096 2.178 -3.726 1.152 -3.474 0.378 -3.474 -0.378 -3.726 -1.152 -3.096 -2.178 -1.224 -3.204 1.224 -3.204 3.096 -2.178 3.726 -1.152 3.474 -0.378q3.78 0 6.912 1.404v-34.812q0 -1.116 0.684 -2.034t1.764 -1.278l29.952 -9.216q0.432 -0.144 1.008 -0.144 1.44 0 2.448 1.008t1.008 2.448z'}" style="height:500px;width:500px;display:block;" :center="center" :zoom="7">
<marker v-for="m in markers" :position.sync="m.position" :clickable="true" :draggable="true" @g-click="center=m.center">
</marker>
</map>
</div>
</body>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
