102 lines
2.4 KiB
Markdown
102 lines
2.4 KiB
Markdown
# How to add custom controls
|
|
|
|
[Interactive example on CodeSandbox](https://stackblitz.com/edit/vue-google-maps-marker-ry3zf7?file=src/components/ComponentWithMap.vue)
|
|
|
|
To add custom controls, you can access google maps object and add controls to it, look at this example or follow the interactive example on CodeSandbox above.
|
|
|
|
## Example
|
|
|
|
```html
|
|
<template>
|
|
<GMapMap
|
|
:center="center"
|
|
ref="myMapRef"
|
|
:zoom="10"
|
|
map-type-id="terrain"
|
|
style="width: 100vw; height: 20rem"
|
|
>
|
|
<GMapCluster :zoomOnClick="true">
|
|
<GMapMarker
|
|
:key="index"
|
|
v-for="(m, index) in markers"
|
|
:position="m.position"
|
|
:clickable="true"
|
|
:draggable="true"
|
|
@click="center = m.position"
|
|
/>
|
|
</GMapCluster>
|
|
</GMapMap>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
mounted() {
|
|
this.$refs.myMapRef.$mapPromise.then((map) => {
|
|
// Create the DIV to hold the control and call the CenterControl()
|
|
// constructor passing in this DIV.
|
|
const centerControlDiv = document.createElement('div')
|
|
this.addCenterControl(centerControlDiv, map)
|
|
map.controls[google.maps.ControlPosition.TOP_CENTER].push(centerControlDiv)
|
|
})
|
|
},
|
|
methods: {
|
|
addCenterControl(controlDiv, map) {
|
|
const controlUI = document.createElement('div')
|
|
|
|
controlUI.innerHTML = `
|
|
<div style="color: white; background: red; padding: 1rem;">
|
|
You can click me, i can also be a vue component
|
|
</div>
|
|
`
|
|
|
|
controlDiv.appendChild(controlUI)
|
|
controlUI.addEventListener('click', () => {
|
|
// Do what ever you want to happen on click event
|
|
map.setCenter({
|
|
lat: 53.57532,
|
|
lng: 10.01534,
|
|
})
|
|
})
|
|
},
|
|
},
|
|
data() {
|
|
return {
|
|
center: { lat: 51.093048, lng: 6.84212 },
|
|
markers: [
|
|
{
|
|
position: {
|
|
lat: 51.093048,
|
|
lng: 6.84212,
|
|
},
|
|
},
|
|
{
|
|
position: {
|
|
lat: 51.198429,
|
|
lng: 6.69529,
|
|
},
|
|
},
|
|
{
|
|
position: {
|
|
lat: 51.165218,
|
|
lng: 7.067116,
|
|
},
|
|
},
|
|
{
|
|
position: {
|
|
lat: 51.09256,
|
|
lng: 6.84074,
|
|
},
|
|
},
|
|
],
|
|
}
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
body {
|
|
margin: 0;
|
|
}
|
|
</style>
|
|
```
|