Fork of https://gitlab.com/broj42/nuxt-gmaps.git
Try it out here: Nuxt.js Google Maps Module
npm i nuxt-gmaps//nuxt.config.js
modules: [
['nuxt-gmaps', {
key: '<API-Key>',
//you can use libraries: ['places']
}]
]- 2.1.0 - Add Google Map Polyline
- 2.0.0 - Update dependencies, fix marker bugs, update marker event listeners
- 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)
- key
- libraries
- click
- mouseover
- mouseout
- 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
<GMap
ref="gMap"
language="en"
:cluster="{options: {styles: clusterStyle}}"
:center="{lat: locations[0].lat, lng: locations[0].lng}"
:options="{fullscreenControl: false, styles: mapStyle}"
:zoom="6"
>
<GMapMarker
v-for="location in locations"
:key="location.id"
:position="{lat: location.lat, lng: location.lng}"
:options="{icon: location === currentLocation ? pins.selected : pins.notSelected}"
@click="currentLocation = location"
>
<GMapInfoWindow :options="{maxWidth: 200}">
<code>
lat: {{ location.lat }},
lng: {{ location.lng }}
</code>
</GMapInfoWindow>
</GMapMarker>
<GMapCircle :options="circleOptions"/>
</GMap>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"
}
]
}
}
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent