# Map
# Install
This is the base Map component. If no props are provided, it shows an empty map component with default controls.
<GMapMap :center="{lat: 51.093048, lng: 6.842120}" :zoom="7" /> Example on stackblitz (opens new window)
# Provide your own style
You can provide custom map styling by providing style property to the options prop.
You can generate custom map styles at https://mapstyle.withgoogle.com/ (opens new window)
<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> <script> export default { data() { return { center: { lat: 51.093048, lng: 6.84212 }, options: { styles: [ // here comes the styles your ], }, }; } }; </script> Example on stackblitz (opens new window)
# Cloud-based Styling with Map ID
You can manage your cloud-based styles on Google Maps Platform: Map Styles (opens new window), and your map ids on Google Maps Platform: Map Management (opens new window)
Documentation: Maps JavaScript API - Using Cloud-based maps styling (opens new window)
<script> <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 }, }; } }; </script> # Disable ui elements
You can disable all ui components at once
<GMapMap :center="{lat: 51.093048, lng: 6.842120}" :zoom="7" :disableDefaultUI="true" /> You can also disable specific UI components
<GMapMap :center="{lat: 51.093048, lng: 6.842120}" :zoom="7" :options="{ zoomControl: true, mapTypeControl: true, scaleControl: true, streetViewControl: true, rotateControl: true, fullscreenControl: true, }" /> # Access google maps instance
You can easily access Map instance by accessing map ref in your component.
<GMapMap :center="{lat: 51.093048, lng: 6.842120}" :zoom="7" ref="myMapRef" :disableDefaultUI="true" /> # Add custom button
You can use the map instance to add custom buttons to your map.
<template> <GMapMap :center="{lat: 51.093048, lng: 6.842120}" :zoom="7" ref="myMapRef" :disableDefaultUI="true" /> </template> <script > import { ref, watch } from "vue"; 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>