google-map-ts-vue3
TypeScript icon, indicating that this package has built-in type declarations

1.2.1 • Public • Published

google-map-ts-vue3

npm version TypeScript License: MIT code style: prettier

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

Package Sidebar

Install

npm i google-map-ts-vue3

Weekly Downloads

22

Version

1.2.1

License

MIT

Unpacked Size

47.1 kB

Total Files

15

Last publish

Collaborators

  • seijikohara