1.0.0 • Published 5 years ago
googlemaps-vue-3 v1.0.0
Google maps for Vue.js 3
install npm i google_maps_for_vue_3
npm
Example
<GoogleMap
:center="{ lat: 38.423733, lng: 27.142826 }"
:zoom="4"
:clickActive="true"
:getLatLng="true"
:mapType="'hybrid'"
:moveActive="false"
:polylines="{
strokeColor: '#FF0000',
coords: [
{ lat: 37.772, lng: -122.214 },
{ lat: 21.291, lng: -157.821 },
{ lat: -18.142, lng: 178.431 },
{ lat: -27.467, lng: 153.027 },
],
}"
:markers="[
{
lat: 38.423733,
lng: 27.142826,
draggable: true,
title: 'title 1',
infoWindow: '<h1>this is my info</h1>',
},
{
lat: 41.015137,
lng: 28.97953,
draggable: true,
title: 'title 2',
},
]"
/>Add as a plugin
...
...
import googleMap from './plugins/googleMap'
const googleMapOption = {
apiKey: 'API_KEY'
}
const app = createApp(App)
app.use(store)
app.use(router)
app.use(googleMap, googleMapOption)
app.mount('#app')Props
| Props | Required | Param Type | Example | Description |
|---|---|---|---|---|
| center | true | Object | :center="{lat: 35, lng: 54 }" | For center coordinates in map |
| zoom | true | number | :zoom="5" | Zoom value of map |
| clickActive | false | boolean | :clickActive="true" | :clickAtive="false" | clickActive prop default is false. If you want action when click you must turn true |
| getLatLng | false | boolean | :getLatLng="true" \| :getLatLng="false" | getLatLng is default false if you want lat-lng coordinates on click you must turn true |
| moveActive | false | boolean | :moveActive="true" \| :moveActive="false" | if you want action when map move turn true |
| polylines | false | Array | :polylines="{ strokeColor: '#FF000', coords: [ {lat: 37.772, lng: -112.214 }, {lat: 21.291,lng: 157.821}, {lat: 18.142,lng: 178.431}, {lat: 27.467 lng: 153.027} ] }" | polylines |
Markers
| Param | Type | Example | Required |
|---|---|---|---|
| lat | double | :lat=38.423733 | true |
| lng | double | :lng=27.142826 | true |
| draggable | boolean | :draggable=true | false |
| title | String | :title='this is my marker' | false |
:markers="[
{
lat: 38.423733,
lng: 27.142826,
draggable: true,
title: 'marker 1',
infoWindow: '<h1>this is my info</h1>',
},
{
lat: 41.015137,
lng: 28.97953,
draggable: true,
title: 'marker 2',
},
]"Example app with google_maps_for_vue_3
1.0.0
5 years ago