Easy use of Google Maps with Composition API
Voomap is built using Composition API and TypeScript.
npm i @voomap/mapBefore using voomap, the only thing you need to do is to apply for a Google Maps API.
<script setup lang="ts">
import { GoogleMap } from "@voomap/map";
import { reactive } from "vue";
const center = reactive<google.maps.LatLngLiteral>({
lat: 25.0855388,
lng: 121.4791004,
});
</script>
<template>
<GoogleMap :api-key="YOUR_GOOGLE_MAPS_API_KEY" :center="center" :zoom="11" />
</template>Refer to documentations for more details.
To make it easy for you to use Google Map, you can simply add the components you need as child components, just as easily as with element-ui!
<script setup lang="ts">
import { GoogleMap, Marker } from "@voomap/map";
import { reactive } from "vue";
const center = reactive<google.maps.LatLngLiteral>({
lat: 25.0855388,
lng: 121.4791004,
});
</script>
<template>
<GoogleMap :api-key="VITE_GOOGLE_MAP_API_KEY" :center="center" :zoom="11">
<Marker :position="center" />
</GoogleMap>
</template>
This project is not yet complete, and I warmly welcome feature requests and improvement suggestions. You can create an issue to initiate a discussion with me!