From 4c30b0168423ded7da64ffb1ead8201da0616a6f Mon Sep 17 00:00:00 2001
From: Jiahao Guo <1147678303@qq.com>
Date: Fri, 7 Jan 2022 02:02:44 -0500
Subject: [PATCH] [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
---
 docs/src/components/map.md | 30 ++++++++++++++++++++++++++++++
 1 file changed, 30 insertions(+)

diff --git a/docs/src/components/map.md b/docs/src/components/map.md
index 535ff2b..d42eeee 100644
--- a/docs/src/components/map.md
+++ b/docs/src/components/map.md
@@ -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