So I'm using vue-google-maps with Vue.js , and have placed a map on the body. I want to add some styling to the map, but don't know how to go about it. When using Vanilla.js, I could just add styles with theMap.setOptions({styles: style_array})
, but how do I do that with vue-google-maps ?
This is my setup:
DOM
<google-map style="width: 100%; height: 100%; position: absolute; left:0; top:0"
:center="{ lat: 30.2672, lng: -97.7431 }"
:zoom="12"
>
</google-map>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.6.1/lodash.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.21/vue.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue-google-maps/0.1.17/vue-google-maps.js"></script>
<script type="text/javascript" src="/js/[JS-FILE]"></script>
JS
VueGoogleMap.load({
'key': '***'
});
Vue.component('google-map', VueGoogleMap.Map);
new Vue({
el: 'body',
data: {
mapStyle: mapStyle
}
});
I´ve tried adding style to the api-key & sat :styles: "style_array"
to the DOM, but nothing has worked. Does anyone know how to set map styles with Vue.js?
After reading the vue-google-maps documentation thoroughly, I realised there was an option to set ":options: [style]"
when initiating the google-map element.
I set the style in JS and passed it to the client like this:
DOM
<google-map style="width: 100%; height: 100%; position: absolute; left:0; top:0"
:center="{ lat: 30.2672, lng: -97.7431 }"
:zoom="12"
v-bind:options="mapStyle"
>
</google-map>
JS
var mapStyle = [style];
VueGoogleMap.load({
'key': '***'
});
Vue.component('google-map', VueGoogleMap.Map);
new Vue({
el: 'body',
data: {
mapStyle: {styles: mapStyle}
}
});
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.