Easy use of Google Maps with Composition API
Voomap is built using Composition API and TypeScript.
📦 Install
npm i @voomap/map🦄 Usage
Map
Before 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.
Marker
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>📃 Code Style
👨🚀 Contributors
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!