🌍 Nuxt GMaps

Try it out here: Nuxt.js Google Maps Module

🚀 Usage

npm i nuxt-gmaps

modules : [ [ ' nuxt-gmaps ' , { key : ' <API-Key> ' , } ] ]

📝 Updates

1.2.4 - Options for GMapInfoWindow

- Options for GMapInfoWindow 1.2.3 - Language prop

- Language prop 1.2.2 - Google Map Circle (Documentation: https://developers.google.com/maps/documentation/javascript/examples/circle-simple)

Documentation

Official Google Documentation

🔧 Options

key

libraries

📍️ Marker Events

click

mouseover

mouseout

🗺️️ Map Event

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

Example

< 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 >