Google Maps

OverviewOfficial Website

Google maps library allows you to use the potential of Google Maps in a simple way. No more extensive documentation or large amount of code.

Import Package

<!-- google map package -->
import { GoogleMap, Marker, Polygon } from "vue3-google-map";

Add Package

yarn add vue3-google-map --save

Remove Package

yarn remove vue3-google-map Or you can remove package by removing specific package from package.json

Examples

Title Example

Markers

Title	Example
Markers	`<GoogleMap api-key="..." style="width: 100%; height: 300px" :center="{ lat: -12.043333, lng: -77.028333 }" :zoom="15"> <Markers :options="markerOptions" @click="markerClick" /> </GoogleMap> setup() { const markerClick = () => alert('You clicked in this marker'); const center = { lat: -12.043333, lng: -77.028333 }; const markerOptions = { position: center, label: 'L', title: 'Lima' }; return { center, markerOptions, markerClick }; },`
Overlays	`<GoogleMap api-key="..." style="width: 100%; height: 300px" :center="center" :zoom="15"> <CustomMarker :options="{ position: center, anchorPoint: 'BOTTOM_CENTER' }"> <div style="text-align: center"> <div class="gmaps-overlay">Lima<div class="gmaps-overlay_arrow above"></div></div> </div> </CustomMarker> </GoogleMap> setup() { const center = { lat: -12.043333, lng: -77.028333 }; return { center }; },`

<GoogleMap api-key="..." style="width: 100%; height: 300px" :center="{ lat: -12.043333, lng: -77.028333 }" :zoom="15">
    <Markers :options="markerOptions" @click="markerClick" />
</GoogleMap>

  setup() {
    const markerClick = () => alert('You clicked in this marker');
    const center = { lat: -12.043333, lng: -77.028333 };
    const markerOptions = { position: center, label: 'L', title: 'Lima' };
    
    return { center, markerOptions, markerClick };
  },

Overlays

<GoogleMap api-key="..." style="width: 100%; height: 300px" :center="center" :zoom="15">
  <CustomMarker :options="{ position: center, anchorPoint: 'BOTTOM_CENTER' }">
    <div style="text-align: center">
      <div class="gmaps-overlay">Lima<div class="gmaps-overlay_arrow above"></div></div>                
    </div>
  </CustomMarker>
</GoogleMap>

  setup() {
      const center = { lat: -12.043333, lng: -77.028333 };
      return { center };
  },