diff --git a/README.md b/README.md index 9d658e1..a1b8283 100644 --- a/README.md +++ b/README.md @@ -59,6 +59,8 @@ All the map components are available on the `Vue3GoogleMap` global variable. To construct a map using `vue3-google-map` you'll need to use the base `GoogleMap` component which receives your [Google Maps API key](https://developers.google.com/maps/documentation/javascript/get-api-key), styles (e.g. setting width and height), and any [MapOptions](https://developers.google.com/maps/documentation/javascript/reference/map#MapOptions) to configure your map ([see this](https://github.com/inocan-group/vue3-google-map/blob/develop/src/components/GoogleMap.vue#L36-L230) for all the supported `MapOptions`). Other map features can be added to your map by passing map subcomponents ([Marker](#marker), [Polyline](#polyline), [Polygon](#polygon), [Rectangle](#rectangle), [Circle](#circle), [InfoWindow](#info-window), [CustomMarker](#custom-marker), [CustomControl](#custom-control), or [MarkerCluster](#marker-cluster)) to the default slot of the `GoogleMap` component. +The [the following events](https://developers.google.com/maps/documentation/javascript/reference/map#Map-Events) will be emitted by the `GoogleMap` component and can be listened to by using `@event_name`. + ```vue <script setup> import { GoogleMap, Marker } from 'vue3-google-map' diff --git a/docs/advanced-usage/index.md b/docs/advanced-usage/index.md index 6573b7c..97b969d 100644 --- a/docs/advanced-usage/index.md +++ b/docs/advanced-usage/index.md @@ -207,6 +207,17 @@ const center = { lat: 40.689247, lng: -74.044502 }; </template> ``` +## Events + +You can listen for [the following events](https://developers.google.com/maps/documentation/javascript/reference/map#Map-Events) on the `GoogleMap` component by using `@event_name`. For example if you want to call a function whenever the zoom value is changed, you can use it like this: + +```vue +<GoogleMap + @zoom_changed="yourFunctionName" +/> +``` + + <style scoped> .map { position: relative; diff --git a/docs/getting-started/index.md b/docs/getting-started/index.md index 77539b4..2925635 100644 --- a/docs/getting-started/index.md +++ b/docs/getting-started/index.md @@ -30,7 +30,9 @@ Include the following script tag in your `index.html` (make sure to include it a ## Your first map To construct a map using `vue3-google-map` you'll need to use the base `GoogleMap` component which receives your [Google Maps API key](https://developers.google.com/maps/documentation/javascript/get-api-key), styles (e.g. setting width and height), and any [MapOptions](https://developers.google.com/maps/documentation/javascript/reference/map#MapOptions) to configure your map ([see this](https://github.com/inocan-group/vue3-google-map/blob/develop/src/components/GoogleMap.vue#L36-L230) for a all the supported `MapOptions`). -Other map features can be added to your map by passing map subcomponents ([Marker](/components/marker), [Polyline](/components/polyline), [Polygon](/components/polygon), [Rectangle](/components/rectangle), [Circle](/components/circle), or [CustomControl](/components/custom-control)) to the default slot of the `GoogleMap` component. +Other map features can be added to your map by passing map subcomponents ([Marker](/components/marker), [Polyline](/components/polyline), [Polygon](/components/polygon), [Rectangle](/components/rectangle), [Circle](/components/circle), or [CustomControl](/components/custom-control)) to the default slot of the `GoogleMap` component. + +The [the following events](https://developers.google.com/maps/documentation/javascript/reference/map#Map-Events) will be emitted by the `GoogleMap` component and can be listened to by using `@event_name`. ```vue <script setup> @@ -51,6 +53,9 @@ const center = { lat: 40.689247, lng: -74.044502 } </template> ``` + + + <ClientOnly> <GoogleMap :api-promise="apiPromise"