fixed a lot of details in the docs to make it better
This commit is contained in:
NathanAP
@@ -1,167 +1,132 @@
|
||||
# Map
|
||||
|
||||
Here is where you start. Here you will find some uses for Google Maps component:
|
||||
|
||||
[[toc]]
|
||||
## Install
|
||||
|
||||
This is the base Map component. If no props are provided, it shows an empty map component with default controls.
|
||||
## My first Google Maps component
|
||||
|
||||
```vue
|
||||
<GMapMap
|
||||
:center="{lat: 51.093048, lng: 6.842120}"
|
||||
:zoom="7"
|
||||
/>
|
||||
You can create a Google Map component using `GMapMap`:
|
||||
|
||||
```html
|
||||
<!-- Notice that if no props are provided, the component will show an empty map component with default controls -->
|
||||
<GMapMap :center="{ lat: 51.093048, lng: 6.84212 }" :zoom="7" />
|
||||
```
|
||||
|
||||
Example on [stackblitz](https://stackblitz.com/edit/vue-google-maps-basic-example)
|
||||
|
||||
## Provide your own style
|
||||
You can provide custom map styling by providing `style` property to the `options` prop.
|
||||
## Styling your Google Maps component
|
||||
|
||||
You can generate custom map styles at [https://mapstyle.withgoogle.com/](https://mapstyle.withgoogle.com/)
|
||||
```vue{4}
|
||||
<script>
|
||||
<template>
|
||||
<GMapMap :center="center"
|
||||
:options="options"
|
||||
: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>
|
||||
You can generate custom map styles at [https://mapstyle.withgoogle.com/](https://mapstyle.withgoogle.com/).
|
||||
|
||||
You can provide custom styles by providing `style` property to the `options` prop:
|
||||
|
||||
```html
|
||||
<template>
|
||||
<GMapMap
|
||||
:center="center"
|
||||
:options="options"
|
||||
: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 {
|
||||
data() {
|
||||
return {
|
||||
center: { lat: 51.093048, lng: 6.84212 },
|
||||
options: {
|
||||
styles: [
|
||||
// here comes the styles your
|
||||
],
|
||||
},
|
||||
};
|
||||
data() {
|
||||
return {
|
||||
center: { lat: 51.093048, lng: 6.84212 },
|
||||
options: {
|
||||
styles: [
|
||||
// here comes the styles your
|
||||
],
|
||||
},
|
||||
}
|
||||
},
|
||||
}
|
||||
};
|
||||
</script>
|
||||
```
|
||||
|
||||
Example on [stackblitz](https://stackblitz.com/edit/vue-google-maps-marker-ssnfbn?file=src/components/ComponentWithMap.vue)
|
||||
|
||||
### Cloud-based Styling with Map ID
|
||||
### Cloud-based styles with Map ID
|
||||
|
||||
You can manage your cloud-based styles on [Google Maps Platform: Map Styles](https://console.cloud.google.com/google/maps-apis/studio/styles), and your map ids on [Google Maps Platform: Map Management](https://console.cloud.google.com/google/maps-apis/studio/maps)
|
||||
|
||||
[Documentation: Maps JavaScript API - Using Cloud-based maps styling](https://developers.google.com/maps/documentation/javascript/cloud-based-map-styling)
|
||||
|
||||
```vue{4}
|
||||
<script>
|
||||
<template>
|
||||
<GMapMap :center="center"
|
||||
:options="options"
|
||||
:zoom="10"
|
||||
map-type-id="terrain"
|
||||
style="width: 100vw; height: 20rem">
|
||||
</GMapMap>
|
||||
</template>
|
||||
```html
|
||||
<template>
|
||||
<GMapMap
|
||||
:center="center"
|
||||
:options="options"
|
||||
:zoom="10"
|
||||
map-type-id="terrain"
|
||||
style="width: 100vw; height: 20rem"
|
||||
>
|
||||
</GMapMap>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
center: { lat: 51.093048, lng: 6.84212 },
|
||||
options: {
|
||||
mapId:'xxx' //here comes your map id
|
||||
},
|
||||
};
|
||||
data() {
|
||||
return {
|
||||
center: { lat: 51.093048, lng: 6.84212 },
|
||||
options: {
|
||||
mapId: 'xxx', //here comes your map id
|
||||
},
|
||||
}
|
||||
},
|
||||
}
|
||||
};
|
||||
</script>
|
||||
```
|
||||
|
||||
## Disable ui elements
|
||||
You can disable all ui components at once
|
||||
```vue{4}
|
||||
<GMapMap
|
||||
:center="{lat: 51.093048, lng: 6.842120}"
|
||||
:zoom="7"
|
||||
:disableDefaultUI="true"
|
||||
/>
|
||||
```
|
||||
You can also disable specific UI components
|
||||
## Disable UI elements
|
||||
|
||||
```vue{4-11}
|
||||
<GMapMap
|
||||
:center="{lat: 51.093048, lng: 6.842120}"
|
||||
:zoom="7"
|
||||
:options="{
|
||||
zoomControl: true,
|
||||
mapTypeControl: true,
|
||||
scaleControl: true,
|
||||
streetViewControl: true,
|
||||
rotateControl: true,
|
||||
fullscreenControl: true,
|
||||
}"
|
||||
/>
|
||||
You can disable all UI components at once:
|
||||
|
||||
```html
|
||||
<GMapMap :center="{lat: 51.093048, lng: 6.842120}" :zoom="7" :disableDefaultUI="true" />
|
||||
```
|
||||
|
||||
You can also disable specific UI components:
|
||||
|
||||
## Access google maps instance
|
||||
You can easily access Map instance by accessing map ref in your component.
|
||||
|
||||
```vue
|
||||
```html
|
||||
<GMapMap
|
||||
:center="{lat: 51.093048, lng: 6.842120}"
|
||||
:zoom="7"
|
||||
ref="myMapRef"
|
||||
:disableDefaultUI="true"
|
||||
:center="{lat: 51.093048, lng: 6.842120}"
|
||||
:zoom="7"
|
||||
:options="{
|
||||
zoomControl: true,
|
||||
mapTypeControl: true,
|
||||
scaleControl: true,
|
||||
streetViewControl: true,
|
||||
rotateControl: true,
|
||||
fullscreenControl: true,
|
||||
}"
|
||||
/>
|
||||
```
|
||||
|
||||
## Add custom button
|
||||
You can use the map instance to add custom buttons to your map.
|
||||
## Access Google Maps instance
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<GMapMap
|
||||
:center="{lat: 51.093048, lng: 6.842120}"
|
||||
:zoom="7"
|
||||
ref="myMapRef"
|
||||
:disableDefaultUI="true"
|
||||
/>
|
||||
</template>
|
||||
<script >
|
||||
import { ref, watch } from "vue";
|
||||
You can easily access the Map instance by accessing `ref` in your component:
|
||||
|
||||
function addMyButton(map) {
|
||||
const controlUI = document.createElement("button");
|
||||
controlUI.title = "Click to zoom the map";
|
||||
const controlText = document.createElement("div");
|
||||
controlText.innerHTML = `Center`;
|
||||
controlUI.appendChild(controlText);
|
||||
|
||||
controlUI.addEventListener("click", () => {
|
||||
map.setZoom(map.getZoom() + 1);
|
||||
});
|
||||
|
||||
map.controls[google.maps.ControlPosition.RIGHT_BOTTOM].push(controlUI); // eslint-disable-line no-undef
|
||||
}
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
const myMapRef = ref();
|
||||
|
||||
watch(myMapRef, googleMap => {
|
||||
if (googleMap) {
|
||||
googleMap.$mapPromise.then(map=> {
|
||||
addMyButton(map);
|
||||
})
|
||||
}
|
||||
});
|
||||
|
||||
return {
|
||||
myMapRef
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```html
|
||||
<GMapMap
|
||||
:center="{ lat: 51.093048, lng: 6.84212 }"
|
||||
:zoom="7"
|
||||
ref="myMapRef"
|
||||
:disableDefaultUI="true"
|
||||
/>
|
||||
```
|
||||
|
||||
Reference in New Issue
Block a user