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.
API key for google map is added to src/app/appConfigurations.ts file. You can
need to add your key
in googleMapAPIKey.
Import Package
<!-- google map package -->
import { GoogleMap, Marker, Polygon } from "vue3-google-map";
Add Package
yarn add vue3-google-map
Remove Package
yarn remove vue3-google-map Or you can remove package by removing
specific package from package.json
Examples
| Title | Example |
|---|---|
| Markers |
<template>
<GoogleMap
:api-key="apiKey"
style="width: 100%; height: 300px"
:center="{ lat: -12.043333, lng: -77.028333 }"
:zoom="15"
>
<Markers :options="markerOptions" @click="markerClick" />
</GoogleMap>
</template>
<script type="ts" setup>
import { GoogleMap, Marker as Markers } from 'vue3-google-map';
import appConfigs from "@/app/appConfigurations";
const apiKey = appConfigs.googleMapAPIKey
const markerClick = () => alert('You clicked in this marker');
const center = { lat: -12.043333, lng: -77.028333 };
const markerOptions = { position: center, label: 'L', title: 'Lima' };
</script>
|
| Overlays |
<template>
<GoogleMap
:api-key="apiKey"
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>
</template>
<script type="ts" setup>
import { GoogleMap, CustomMarker } from 'vue3-google-map';
import appConfigs from "@/app/appConfigurations";
const center = { lat: -12.043333, lng: -77.028333 };
const apiKey = appConfigs.googleMapAPIKey
</script>
|
| Street view |
<template>
<GoogleMap
:api-key="apiKey"
style="width: 100%; height: 300px"
:center="center"
:zoom="13"
/>
</template>
<script type="ts" setup>
import { GoogleMap } from 'vue3-google-map'
import appConfigs from "@/app/appConfigurations";
const apiKey = appConfigs.googleMapAPIKey
const center = { lat: 42.3455, lng: -71.0983 }
</script>
|
| Map type |
/<template>
<GoogleMap
:api-key="apiKey"
style="width: 100%; height: 300px"
mapTypeId="satellite"
:center="center"
:zoom="11"
>
<Rectangle :options="rectangle" />
</GoogleMap>
</template>
<script type="ts" setup>
import { GoogleMap } from 'vue3-google-map'
import appConfigs from "@/app/appConfigurations";
const apiKey = appConfigs.googleMapAPIKey
const center = { lat: -12.043333, lng: -77.028333 }
const rectangle = {
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#FF0000',
fillOpacity: 0.35,
bounds: {
north: 33.685,
south: 33.671,
east: -116.234,
west: -116.251,
},
}
</script>
|