Google Maps

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
<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 };
  },
© Vixon.
Design & Develop by Themesbrand