Voomap

Appearance

On this page

Map ​

Map is the core of the entire Google Map, and all map elements must be built upon it.

Usage ​

The following code excerpt demonstrates a basic usage example:

vue
<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>
<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>

Params ​

apiKey (Required) ​

The source of everything, please remember to apply for it！

  • Type string
  • Default: undefined

inTaiwan ​

Limit the map scope of Google Maps. Once this feature is enabled, you will be unable to move beyond areas outside of Taiwan.

  • Type boolean
  • Default false

INFO

Currently, the coordinates for Taiwan are hardcoded, and in the future, we may consider incorporating a national database or expanding access to additional regions.

MapOptions ​

Map supports all native parameters, and you can find detailed explanations here.

  • Type google.maps.MapOptions

    Show Type Detail
    ts
    interface MapOptions {
  backgroundColor?: string;
  center?: LatLng | null | LatLngLiteral;
  clickableIcons?: boolean;
  controlSize?: number;
  disableDefaultUI?: boolean;
  disableDoubleClickZoom?: boolean;
  draggable?: boolean;
  draggableCursor?: string;
  draggingCursor?: string;
  fullscreenControl?: boolean;
  fullscreenControlOptions?: FullscreenControlOptions | null;
  gestureHandling?: string;
  heading?: number;
  isFractionalZoomEnabled?: boolean;
  keyboardShortcuts?: boolean;
  mapId?: string;
  mapTypeControl?: boolean;
  mapTypeControlOptions?: MapTypeControlOptions | null;
  mapTypeId?: string;
  maxZoom?: number;
  minZoom?: number;
  noClear?: boolean;
  panControl?: boolean;
  panControlOptions?: PanControlOptions;
  restriction?: MapRestriction;
  rotateControl?: boolean;
  rotateControlOptions?: RotateControlOptions;
  scaleControl?: boolean;
  scaleControlOptions?: ScaleControlOptions;
  scrollwheel?: boolean;
  streetView?: StreetViewPanorama;
  streetViewControl?: boolean;
  streetViewControlOptions?: StreetViewControlOptions;
  styles?: MapTypeStyle[];
  tilt?: number;
  zoom?: number;
  zoomControl?: boolean;
  zoomControlOptions?: ZoomControlOptions;
  language?: string
}
    interface MapOptions {
  backgroundColor?: string;
  center?: LatLng | null | LatLngLiteral;
  clickableIcons?: boolean;
  controlSize?: number;
  disableDefaultUI?: boolean;
  disableDoubleClickZoom?: boolean;
  draggable?: boolean;
  draggableCursor?: string;
  draggingCursor?: string;
  fullscreenControl?: boolean;
  fullscreenControlOptions?: FullscreenControlOptions | null;
  gestureHandling?: string;
  heading?: number;
  isFractionalZoomEnabled?: boolean;
  keyboardShortcuts?: boolean;
  mapId?: string;
  mapTypeControl?: boolean;
  mapTypeControlOptions?: MapTypeControlOptions | null;
  mapTypeId?: string;
  maxZoom?: number;
  minZoom?: number;
  noClear?: boolean;
  panControl?: boolean;
  panControlOptions?: PanControlOptions;
  restriction?: MapRestriction;
  rotateControl?: boolean;
  rotateControlOptions?: RotateControlOptions;
  scaleControl?: boolean;
  scaleControlOptions?: ScaleControlOptions;
  scrollwheel?: boolean;
  streetView?: StreetViewPanorama;
  streetViewControl?: boolean;
  streetViewControlOptions?: StreetViewControlOptions;
  styles?: MapTypeStyle[];
  tilt?: number;
  zoom?: number;
  zoomControl?: boolean;
  zoomControlOptions?: ZoomControlOptions;
  language?: string
}

  • Example

vue
<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"
    :max-zoom="20"
    :min-zoom="10"
    language="zh-TW
  />
</template>
<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"
    :max-zoom="20"
    :min-zoom="10"
    language="zh-TW
  />
</template>

Important

When passing in MapOptions, please avoid directly passing in an Object. Instead, use v-bind.

Events ​

The Map supports event listeners for all native events. You can find detailed explanations here.

  • Example
vue
<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
});

function handleClick(e: google.maps.MapMouseEvent) {
  console.log("click", e.latLng);
}
</script>

<template>
  <GoogleMap
    :api-key="YOUR_GOOGLE_MAPS_API_KEY"
    :center="center"
    :zoom="11"
    :max-zoom="20"
    :min-zoom="10"
    @click="handleClick"
    @dblclick="handleClick"
  />
</template>
<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
});

function handleClick(e: google.maps.MapMouseEvent) {
  console.log("click", e.latLng);
}
</script>

<template>
  <GoogleMap
    :api-key="YOUR_GOOGLE_MAPS_API_KEY"
    :center="center"
    :zoom="11"
    :max-zoom="20"
    :min-zoom="10"
    @click="handleClick"
    @dblclick="handleClick"
  />
</template>

Expose ​

If you want to further manipulate the Map, you can use the public instance of the component. please refer to the official documentation.

map ​

  • Type google.maps.Map

  • Example

vue
<script setup lang="ts">
import { GoogleMap } from "@voomap/map";
import { reactive, ref } from "vue";

const center = reactive<google.maps.LatLngLiteral>({
  lat: 25.0855388,
  lng: 121.4791004
});

const mapRef = ref<InstanceType<typeof GoogleMap>>();

function handleClick() {
  console.log(mapRef.value?.map.getCenter());
}
</script>

<template>
  <GoogleMap
    ref="mapRef"
    :api-key="YOUR_GOOGLE_MAPS_API_KEY"
    :center="center"
    :zoom="11"
    :max-zoom="20"
    :min-zoom="10"
    @click="handleClick"
  />
</template>
<script setup lang="ts">
import { GoogleMap } from "@voomap/map";
import { reactive, ref } from "vue";

const center = reactive<google.maps.LatLngLiteral>({
  lat: 25.0855388,
  lng: 121.4791004
});

const mapRef = ref<InstanceType<typeof GoogleMap>>();

function handleClick() {
  console.log(mapRef.value?.map.getCenter());
}
</script>

<template>
  <GoogleMap
    ref="mapRef"
    :api-key="YOUR_GOOGLE_MAPS_API_KEY"
    :center="center"
    :zoom="11"
    :max-zoom="20"
    :min-zoom="10"
    @click="handleClick"
  />
</template>

Automatic updates ​

The Map listens to the props you provide. When you pass in center and zoom, the map will automatically update.

Important

This feature is currently under experimentation and may potentially result in incorrect map displays.

Released under the MIT License.

Copyright © 2024 ilyaliao