feat(map): support embed

packages/map/src/components/Embed/index.ts

@@ -0,0 +1,3 @@
+import Embed from './src/index.vue';
+
+export default Embed;

packages/map/src/components/Embed/src/index.vue

@@ -0,0 +1,33 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+
+interface Props {
+  apiKey: string
+}
+
+const props = withDefaults(defineProps<Props & {
+  width: string
+  height: string
+  style: string
+}>(), {
+  width: '450',
+  height: '250',
+  style: 'border:0',
+});
+
+const getUrl = computed(() => {
+  return `https://www.google.com/maps/embed/v1/place?key=${props.apiKey}&q=Eiffel+Tower,Paris+France`;
+});
+</script>
+
+<template>
+  <iframe
+    frameborder="0"
+    referrerpolicy="no-referrer-when-downgrade"
+    allowfullscreen
+    :src="getUrl"
+    :width="width"
+    :height="height"
+    :style="style"
+  />
+</template>

packages/map/src/components/components.ts

@@ -2,10 +2,12 @@ import GoogleMap from './GoogleMap';
 import MarkerClusterer from './MarkerClusterer';
 import Marker from './Marker';
 import InfoWindow from './InfoWindow';
+import Embed from '@/components/Embed';
 
 export {
   GoogleMap,
   MarkerClusterer,
   Marker,
   InfoWindow,
+  Embed,
 };