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

| Props | Required | Param Type | Default value | Description | |----------------------|----------|---------------------------------------------------|----------------------------------|------------------------------------------------------------------------------------------------------------------------------------------------------------| | apiKey | TRUE | string | | Google Maps API Key | | scriptLoadingTimeout | FALSE | number | 5000 | Timeout for loading the Google Map script | | libraries | FALSE | string | "marker,geometry,drawing,places" | Libraries to load | | height | FALSE | string | "500px" | The height of Google Maps | | width | FALSE | string | "500px" | The width of Google Maps | | options | TRUE | google.maps.MapOptions | | MapOptions object | | markers | FALSE | google.maps.marker.AdvancedMarkerElementOptions[] | [] | AdvancedMarkerElementOptions object | | polylines | FALSE | google.maps.PolylineOptions[] | [] | PolylineOptions object | | polygons | FALSE | google.maps.PolygonOptions[] | [] | PolygonOptions object | | circles | FALSE | google.maps.CircleOptions[] | [] | CircleOptions object | | rectangles | FALSE | google.maps.RectangleOptions[] | [] | RectangleOptions object |

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[])