Nuxt Google Maps Module
bash
npm i nuxt-gmaps
`
`javascript
//nuxt.config.js
modules: [
['nuxt-gmaps', {
key: '',
//you can use libraries: ['places']
}]
]
`
$3
- 1.2.4 - Options for GMapInfoWindow
- 1.2.3 - Language prop
- 1.2.2 - Google Map Circle (Documentation: https://developers.google.com/maps/documentation/javascript/examples/circle-simple)
$3
Official Google Documentation
$3
- key
- libraries
$3
- click
- mouseover
- mouseout
$3
- init
- loaded
- bounds_changed
- center_changed
- click
- dblclick
- drag
- dragend
- dragstart
- heading_changed
- idle
- maptypeid_changed
- mousemove
- mouseout
- mouseover
- projection_changed
- resize
- rightclick
- tilesloaded
- tilt_changed
- zoom_changed
$3
`html
language="en"
:cluster="{options: {styles: clusterStyle}}"
:center="{lat: locations[0].lat, lng: locations[0].lng}"
:options="{fullscreenControl: false, styles: mapStyle}"
:zoom="6"
>
:key="location.id"
:position="{lat: location.lat, lng: location.lng}"
:options="{icon: location === currentLocation ? pins.selected : pins.notSelected}"
@click="currentLocation = location"
>
lat: {{ location.lat }},
lng: {{ location.lng }}
`
`javascript
data() {
return {
currentLocation: {},
circleOptions: {
...
},
locations: [
{
lat: 44.933076,
lng: 15.629058
},
{
lat: 45.815,
lng: "15.9819"
},
{
lat: "45.12",
lng: "16.21"
}
],
pins: {
selected: "data:image/png;base64,iVBORw0KGgo...",
notSelected: "data:image/png;base64,iVBORw0KGgo..."
},
mapStyle: [...],
clusterStyle: [
{
url: "https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m1.png",
width: 56,
height: 56,
textColor: "#fff"
}
]
}
}
``