Atoms Components

This module exposes components that are auto-imported by Nuxt 3.

AtomsGmap

Main component that will show the Google Map.

<template>  <div class="store-locator-page">    <AtomsGmap :options="mapOptions" />  </div></template>

• Options:
  • required - Object: GoogleMapOptions

AtomsMarker

This component will render a marker in the Google Map instance.

<template>  <div class="store-locator-page">    <AtomsGmap :options="mapOptions">      <AtomsMarker        v-for="marker in markers"        :key="marker.id"        :position="{ lat: marker.lat, lng: marker.lon }"      />    </AtomsGmap>  </div></template>

• position:
  • required - LatLngObj: latitude and longitude
• customIcon:
  • optional - string: path to the markerIcon. This will override the marker icon in nuxt.config.ts
• customActiveIcon
  • optional - string: path to the active markerIcon. This will override the active marker icon in nuxt.config.ts
• Events
  • clicked
  • mouseovered
  • mouseoutered

AtomsGcluster

This component will cluster the markers using Official GoogleClusterer

<template>  <div class="store-locator-page">    <AtomsGmap :options="mapOptions" :key="myReactiveKey">      <AtomsGcluster>        <AtomsMarker          v-for="marker in markers"          :key="marker.id"          :position="{ lat: marker.lat, lng: marker.lon }"        />      </AtomsGcluster>    </AtomsGmap>  </div></template>

• icon:
  • options - string: path to the clusterIcon. This will override the cluster icon in nuxt.config.ts
• sizes:
  • optional - SizesObj: icon clusterer sizes. Example: { width: 50, height: 50 }
• color
  • optional - string: set the color for the GoogleClusterLabel
• fontSize
  • optional - string: set the font size for the GoogleClusterLabel
• lineHeight
  • optional - string: set the line height for the GoogleClusterLabel
• fontFamily
  • optional - string: set the font family for the GoogleClusterLabel
• label
  • optional - ItemsObj: override the previous values if provided an object of GoogleClusterLabel

AtomsGautocomplete

This component will render the Official Google Autocomplete search GoogleAutocomplete

<template>  <div class="atoms-autocomplete">    <AtomsGautocomplete @searched="getCoordinates($event)" />  </div></template><script setup lang="ts">const getCoordinates = (searchedObj) => {  console.log('searchedObj', searchedObj)}</script>

• label:
  • optional - string: input search label
• requiredLabel:
  • optional - boolean: force required input validation
• inputName
  • optional - string: name input field
• autocompleteOptions
  • optional - ItemsObj: 'GoogleAutocomplete'

AtomsGInfoWindow

This component will render the Official Google Info-Window box relative to the marker position. GoogleInfoWindow It's possible to style the box with custom CSS and using the slots availables

<template>  ...    <AtomsGInfoWindow :position-x="0" :position-y="90">      <template #content-window> lorem ipsum </template>      <template #close-icon-window>close icon</template>    </AtomsGInfoWindow>  ...</template>

• positionX:
  • required - number: set the X offset for the box
• positionY:
  • required - number: set the Y offset for the box