Skip to content

Commit 447491b

Browse files
authored
docs: listening to map events
* Mention of listening to map events Added a small section mentioning the option to listen for map events on the GoogleMap component * added section about listening to events * added section about listening to events * added event listening example to advanced usage
1 parent a73ec23 commit 447491b

File tree

3 files changed

+19
-1
lines changed

3 files changed

+19
-1
lines changed

README.md

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -59,6 +59,8 @@ All the map components are available on the `Vue3GoogleMap` global variable.
5959
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`).
6060
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.
6161

62+
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`.
63+
6264
```vue
6365
<script setup>
6466
import { GoogleMap, Marker } from 'vue3-google-map'

docs/advanced-usage/index.md

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -207,6 +207,17 @@ const center = { lat: 40.689247, lng: -74.044502 };
207207
</template>
208208
```
209209

210+
## Events
211+
212+
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:
213+
214+
```vue
215+
<GoogleMap
216+
@zoom_changed="yourFunctionName"
217+
/>
218+
```
219+
220+
210221
<style scoped>
211222
.map {
212223
position: relative;

docs/getting-started/index.md

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,9 @@ Include the following script tag in your `index.html` (make sure to include it a
3030
## Your first map
3131

3232
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`).
33-
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.
33+
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.
34+
35+
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`.
3436

3537
```vue
3638
<script setup>
@@ -51,6 +53,9 @@ const center = { lat: 40.689247, lng: -74.044502 }
5153
</template>
5254
```
5355

56+
57+
58+
5459
<ClientOnly>
5560
<GoogleMap
5661
:api-promise="apiPromise"

0 commit comments

Comments
 (0)