google-map-ts-vue3 v1.2.1

google-map-ts-vue3

Google Maps component implemented in Vue3.

Example

<script setup lang="ts">
import { GoogleMap } from "google-map-ts-vue3";
</script>

<template>
  <GoogleMap
    apiKey="your google maps api key"
    :options="{
      center: { lat: 35.1, lng: 135.1 },
      zoom: 5,
      mapId: 'DEMO_MAP_ID' // Map ID is required for advanced markers.
    }"
    :markers="[
    {
        position: { lat: 35.1, lng: 135.1 },
        title: 'position1'
      },
      {
        position: { lat: 37.1, lng: 139.1 },
        title: 'position2'
      },
    ]"
    :polylines="[
      {
        path: [
          { lat: 35.1, lng: 135.1 },
          { lat: 37.1, lng: 139.1 },
        ],
        geodesic: true,
        strokeColor: '#ff0000',
        strokeOpacity: 1.0,
        strokeWeight: 2,
      },
      {
        path: [
          { lat: 38.1, lng: 136.1 },
          { lat: 34.1, lng: 135.1 },
          { lat: 37.1, lng: 139.1 },
        ],
        geodesic: true,
        strokeColor: '#ffffff',
        strokeOpacity: 1.0,
        strokeWeight: 2,
      },
    ]"
    :polygons="[
      {
        paths: [
          { lat: 30, lng: 140 },
          { lat: 31, lng: 141 },
          { lat: 30, lng: 145 },
          { lat: 33, lng: 140 },
        ],
        strokeColor: '#ff0000',
        strokeOpacity: 0.8,
        strokeWeight: 3,
        fillColor: '#ff0000',
        fillOpacity: 0.35,
      },
    ]"
    :circles="[
      {
        strokeColor: '#ff0000',
        strokeOpacity: 0.8,
        strokeWeight: 2,
        fillColor: '#ff0000',
        fillOpacity: 0.35,
        center: { lat: 39.1, lng: 140.1 },
        radius: 100000,
      },
    ]"
    :rectangles="[
      {
        strokeColor: '#ff0000',
        strokeOpacity: 0.8,
        strokeWeight: 2,
        fillColor: '#ff0000',
        fillOpacity: 0.35,
        bounds: {
          north: 30,
          south: 33,
          east: 133,
          west: 130,
        },
      },
    ]"
  />
</template>

Props

Events

• map-created(map: google.maps.Map)
• markers-created(markers: google.maps.marker.AdvancedMarkerElement[])
• polylines-created(polylines: google.maps.Polyline[])
• polygons-created(polygons: google.maps.Polygon[])
• circles-created(circles: google.maps.Circle[])
• rectangles-created(rectangles: google.maps.Rectangle[])