Voomap#

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!