Map

Maps can take many options (opens new window). zoom is defaulted to 12 and center is defaulted to Brisbane (as these options are required). The type of these is google.maps.MapOptions.

This component supports the following events:

• @idle no return value
• @bounds-changed returns new bounds
• @center-changed returns new center
• @zoom-changed returns new zoom level
• @click returns event
• @double-click returns event
• @right-click returns event
• @mouseover returns event
• @mouseout returns event

Once the map is loaded, it $emit's itself (map instance) via the event mounted (thanks thefoxie (opens new window)).

The default template for the slot also has a slot prop of map which can be referred to.

<template>
  <gmaps-map :options="mapOptions" />
</template>

<script>
  import { gmapsMap } from 'x5-gmaps';

  export default {
    components: { gmapsMap },
    data: () => ({
      mapOptions: {
        center: { lat: -27.47, lng: 153.025 },
        zoom: 12
      }
    })
  };
</script>