Unverified Commit 4c30b016 authored by Jiahao Guo's avatar Jiahao Guo Committed by GitHub
Browse files

[doc] add document about cloud-based styling 

The current code is compatible with using Google Maps' cloud-based map styling, and this is the document about how to use it.

Documents:
https://developers.google.com/maps/documentation/javascript/cloud-based-map-styling
https://developers.google.com/maps/documentation/javascript/examples/map-id-style
parent 5b4d60ff

docs/src/components/map.md

+30 −0
Original line number Diff line number Diff line
@@ -47,6 +47,36 @@ You can generate custom map styles at [https://mapstyle.withgoogle.com/](https: 


Example on [stackblitz](https://stackblitz.com/edit/vue-google-maps-marker-ssnfbn?file=src/components/ComponentWithMap.vue)



### Cloud-based Styling with Map ID



You can manage your cloud-based styles on [Google Maps Platform: Map Styles](https://console.cloud.google.com/google/maps-apis/studio/styles), and your map ids on [Google Maps Platform: Map Management](https://console.cloud.google.com/google/maps-apis/studio/maps)



[Documentation: Maps JavaScript API - Using Cloud-based maps styling](https://developers.google.com/maps/documentation/javascript/cloud-based-map-styling)



```vue{4}

<script>

    <template>

      <GMapMap :center="center"

      :options="options"

       :zoom="10"

       map-type-id="terrain"

       style="width: 100vw; height: 20rem">

      </GMapMap>

    </template>



<script>

  export default {

  data() {

    return {

      center: { lat: 51.093048, lng: 6.84212 },

      options: {

        mapId:'xxx' //here comes your map id

      },

    };

  }

};

</script>

```



## Disable ui elements

You can disable all ui components at once