title: vue-google-maps - How do I set Map Styles?
body: <p>So I'm using <a href="https://www.npmjs.com/package/vue-google-maps" rel="nofollow noreferrer">vue-google-maps</a> with <a href="https://vuejs.org/" rel="nofollow noreferrer">Vue.js</a>, 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 <code>theMap.setOptions({styles: style_array})</code>, but how do I do that with <a href="https://www.npmjs.com/package/vue-google-maps" rel="nofollow noreferrer">vue-google-maps</a>?</p>
  
  <p>This is my setup:</p>
  
  <p><strong>DOM</strong></p>
  
  <pre><code>&lt;google-map style="width: 100%; height: 100%; position: absolute; left:0; top:0"
              :center="{ lat: 30.2672, lng: -97.7431 }"
              :zoom="12"
  &gt;
  &lt;/google-map&gt;
  
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.6.1/lodash.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.21/vue.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/vue-google-maps/0.1.17/vue-google-maps.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="/js/[JS-FILE]"&gt;&lt;/script&gt;
  </code></pre>
  
  <p><strong>JS</strong></p>
  
  <pre><code>VueGoogleMap.load({
      'key': '***'
  });
  
  Vue.component('google-map', VueGoogleMap.Map);
  new Vue({
      el: 'body',
      data: {
          mapStyle: mapStyle
      }
  });
  </code></pre>
  
  <p>I´ve tried adding style to the api-key &amp; sat <code>:styles: "style_array"</code> to the DOM, but nothing has worked. Does anyone know how to set map styles with Vue.js?</p>