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!

📄 License

MIT License © 2023 CofCat