{"_path":"/atoms-components","_draft":false,"_partial":false,"_empty":false,"title":"Atoms Components","description":"Learn how to use the atoms components in your Nuxt 3 application.","excerpt":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"This module exposes components that are "},{"type":"element","tag":"a","props":{"href":"https://v3.nuxtjs.org/guide/directory-structure/components/","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"auto-imported"}]},{"type":"text","value":" by Nuxt 3."}]},{"type":"element","tag":"h2","props":{"id":"atomsgmap"},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"AtomsGmap"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Main component that will show the Google Map."}]},{"type":"element","tag":"code","props":{"code":"<template>\n  <div class=\"store-locator-page\">\n    <AtomsGmap :options=\"mapOptions\" />\n  </div>\n</template>\n","language":"vue"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"<template>\n  <div class=\"store-locator-page\">\n    <AtomsGmap :options=\"mapOptions\" />\n  </div>\n</template>\n"}]}]}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Options:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"required - Object: "},{"type":"element","tag":"a","props":{"href":"https://developers.google.com/maps/documentation/javascript/reference/map#MapOptions","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"GoogleMapOptions"}]}]}]}]}]}]},{"type":"element","tag":"h2","props":{"id":"atomsmarker"},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"AtomsMarker"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"This component will render a marker in the Google Map instance."}]},{"type":"element","tag":"code","props":{"code":"<template>\n  <div class=\"store-locator-page\">\n    <AtomsGmap :options=\"mapOptions\">\n      <AtomsMarker\n        v-for=\"marker in markers\"\n        :key=\"marker.id\"\n        :position=\"{ lat: marker.lat, lng: marker.lon }\"\n      />\n    </AtomsGmap>\n  </div>\n</template>\n","language":"vue"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"<template>\n  <div class=\"store-locator-page\">\n    <AtomsGmap :options=\"mapOptions\">\n      <AtomsMarker\n        v-for=\"marker in markers\"\n        :key=\"marker.id\"\n        :position=\"{ lat: marker.lat, lng: marker.lon }\"\n      />\n    </AtomsGmap>\n  </div>\n</template>\n"}]}]}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"position:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"required - LatLngObj: latitude and longitude"}]}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"customIcon:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"optional - string: path to the markerIcon. This will override the marker icon in nuxt.config.ts"}]}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"customActiveIcon"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"optional - string:  path to the active markerIcon. This will override the active marker icon in nuxt.config.ts"}]}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Events"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"clicked"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"mouseovered"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"mouseoutered"}]}]}]}]},{"type":"element","tag":"h2","props":{"id":"atomsgcluster"},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"AtomsGcluster"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"This component will cluster the markers using Official "},{"type":"element","tag":"a","props":{"href":"https://github.com/googlemaps/js-markerclusterer","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"GoogleClusterer"}]}]}]},{"type":"element","tag":"code","props":{"code":"<template>\n  <div class=\"store-locator-page\">\n    <AtomsGmap :options=\"mapOptions\" :key=\"myReactiveKey\">\n      <AtomsGcluster>\n        <AtomsMarker\n          v-for=\"marker in markers\"\n          :key=\"marker.id\"\n          :position=\"{ lat: marker.lat, lng: marker.lon }\"\n        />\n      </AtomsGcluster>\n    </AtomsGmap>\n  </div>\n</template>\n","language":"vue"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"<template>\n  <div class=\"store-locator-page\">\n    <AtomsGmap :options=\"mapOptions\" :key=\"myReactiveKey\">\n      <AtomsGcluster>\n        <AtomsMarker\n          v-for=\"marker in markers\"\n          :key=\"marker.id\"\n          :position=\"{ lat: marker.lat, lng: marker.lon }\"\n        />\n      </AtomsGcluster>\n    </AtomsGmap>\n  </div>\n</template>\n"}]}]}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"icon:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"options - string: path to the clusterIcon. This will override the cluster icon in nuxt.config.ts"}]}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"sizes:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"optional - SizesObj: icon clusterer sizes. Example: { width: 50, height: 50 }"}]}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"color"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"optional - string: set the color for the "},{"type":"element","tag":"a","props":{"href":"https://developers.google.com/maps/documentation/javascript/markers#marker_labels","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"GoogleClusterLabel"}]}]}]}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"fontSize"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"optional - string: set the font size for the "},{"type":"element","tag":"a","props":{"href":"https://developers.google.com/maps/documentation/javascript/markers#marker_labels","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"GoogleClusterLabel"}]}]}]}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"lineHeight"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"optional - string: set the line height for the "},{"type":"element","tag":"a","props":{"href":"https://developers.google.com/maps/documentation/javascript/markers#marker_labels","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"GoogleClusterLabel"}]}]}]}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"fontFamily"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"optional - string: set the font family for the "},{"type":"element","tag":"a","props":{"href":"https://developers.google.com/maps/documentation/javascript/markers#marker_labels","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"GoogleClusterLabel"}]}]}]}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"label"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"optional - ItemsObj: override the previous values if provided an object of "},{"type":"element","tag":"a","props":{"href":"https://developers.google.com/maps/documentation/javascript/markers#marker_labels","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"GoogleClusterLabel"}]}]}]}]}]}]},{"type":"element","tag":"alert","props":{"type":"info"},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"If your markers are reactives and they will change for any reason like in the example remember to provide a key prop to the AtomsGmap component."}]}]},{"type":"element","tag":"h2","props":{"id":"atomsgautocomplete"},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"AtomsGautocomplete"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"This component will render the Official Google Autocomplete search "},{"type":"element","tag":"a","props":{"href":"https://developers.google.com/maps/documentation/javascript/places-autocomplete","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"GoogleAutocomplete"}]}]}]},{"type":"element","tag":"code","props":{"code":"<template>\n  <div class=\"atoms-autocomplete\">\n    <AtomsGautocomplete @searched=\"getCoordinates($event)\" />\n  </div>\n</template>\n\n<script setup lang=\"ts\">\nconst getCoordinates = (searchedObj) => {\n  console.log('searchedObj', searchedObj)\n}\n</script>\n","language":"vue"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"<template>\n  <div class=\"atoms-autocomplete\">\n    <AtomsGautocomplete @searched=\"getCoordinates($event)\" />\n  </div>\n</template>\n\n<script setup lang=\"ts\">\nconst getCoordinates = (searchedObj) => {\n  console.log('searchedObj', searchedObj)\n}\n</script>\n"}]}]}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"label:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"optional - string: input search label"}]}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"requiredLabel:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"optional - boolean: force required input validation"}]}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"inputName"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"optional - string: name input field"}]}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"autocompleteOptions"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"optional - ItemsObj: "},{"type":"element","tag":"a","props":{"href":"https://developers.google.com/maps/documentation/javascript/reference/places-widget#AutocompleteOptions","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"'GoogleAutocomplete'"}]}]}]}]}]},{"type":"element","tag":"h2","props":{"id":"atomsginfowindow"},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"AtomsGInfoWindow"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"This component will render the Official Google Info-Window box relative to the marker position. "},{"type":"element","tag":"a","props":{"href":"https://developers.google.com/maps/documentation/javascript/infowindows","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"GoogleInfoWindow"}]}]},{"type":"text","value":"\nIt's possible to style the box with custom CSS and using the slots availables"}]},{"type":"element","tag":"code","props":{"code":"<template>\n  ...\n    <AtomsGInfoWindow :position-x=\"0\" :position-y=\"90\">\n      <template #content-window> lorem ipsum </template>\n      <template #close-icon-window>close icon</template>\n    </AtomsGInfoWindow>\n  ...\n</template>\n","language":"vue"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"<template>\n  ...\n    <AtomsGInfoWindow :position-x=\"0\" :position-y=\"90\">\n      <template #content-window> lorem ipsum </template>\n      <template #close-icon-window>close icon</template>\n    </AtomsGInfoWindow>\n  ...\n</template>\n"}]}]}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"positionX:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"required - number: set the X offset for the box"}]}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"positionY:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"required - number: set the Y offset for the box"}]}]}]}]}]},"body":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"This module exposes components that are "},{"type":"element","tag":"a","props":{"href":"https://v3.nuxtjs.org/guide/directory-structure/components/","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"auto-imported"}]},{"type":"text","value":" by Nuxt 3."}]},{"type":"element","tag":"h2","props":{"id":"atomsgmap"},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"AtomsGmap"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Main component that will show the Google Map."}]},{"type":"element","tag":"code","props":{"code":"<template>\n  <div class=\"store-locator-page\">\n    <AtomsGmap :options=\"mapOptions\" />\n  </div>\n</template>\n","language":"vue"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ab5332"},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"class":"ct-419cef"},"children":[{"type":"text","value":"template"}]},{"type":"element","tag":"span","props":{"class":"ct-ab5332"},"children":[{"type":"text","value":">"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ab5332"},"children":[{"type":"text","value":"  <"}]},{"type":"element","tag":"span","props":{"class":"ct-73f499"},"children":[{"type":"text","value":"div"}]},{"type":"element","tag":"span","props":{"class":"ct-ab5332"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-73f499"},"children":[{"type":"text","value":"class"}]},{"type":"element","tag":"span","props":{"class":"ct-ab5332"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-dc3b87"},"children":[{"type":"text","value":"\"store-locator-page\""}]},{"type":"element","tag":"span","props":{"class":"ct-ab5332"},"children":[{"type":"text","value":">"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ab5332"},"children":[{"type":"text","value":"    <"}]},{"type":"element","tag":"span","props":{"class":"ct-73f499"},"children":[{"type":"text","value":"AtomsGmap"}]},{"type":"element","tag":"span","props":{"class":"ct-ab5332"},"children":[{"type":"text","value":" :"}]},{"type":"element","tag":"span","props":{"class":"ct-73f499"},"children":[{"type":"text","value":"options"}]},{"type":"element","tag":"span","props":{"class":"ct-ab5332"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-ab5332"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-419cef"},"children":[{"type":"text","value":"mapOptions"}]},{"type":"element","tag":"span","props":{"class":"ct-ab5332"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-ab5332"},"children":[{"type":"text","value":" />"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ab5332"},"children":[{"type":"text","value":"  </"}]},{"type":"element","tag":"span","props":{"class":"ct-73f499"},"children":[{"type":"text","value":"div"}]},{"type":"element","tag":"span","props":{"class":"ct-ab5332"},"children":[{"type":"text","value":">"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ab5332"},"children":[{"type":"text","value":"</"}]},{"type":"element","tag":"span","props":{"class":"ct-419cef"},"children":[{"type":"text","value":"template"}]},{"type":"element","tag":"span","props":{"class":"ct-ab5332"},"children":[{"type":"text","value":">"}]}]}]}]}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Options:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"required - Object: "},{"type":"element","tag":"a","props":{"href":"https://developers.google.com/maps/documentation/javascript/reference/map#MapOptions","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"GoogleMapOptions"}]}]}]}]}]}]},{"type":"element","tag":"h2","props":{"id":"atomsmarker"},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"AtomsMarker"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"This component will render a marker in the Google Map instance."}]},{"type":"element","tag":"code","props":{"code":"<template>\n  <div class=\"store-locator-page\">\n    <AtomsGmap :options=\"mapOptions\">\n      <AtomsMarker\n        v-for=\"marker in markers\"\n        :key=\"marker.id\"\n        :position=\"{ lat: marker.lat, lng: marker.lon }\"\n      />\n    </AtomsGmap>\n  </div>\n</template>\n","language":"vue"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ab5332"},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"class":"ct-419cef"},"children":[{"type":"text","value":"template"}]},{"type":"element","tag":"span","props":{"class":"ct-ab5332"},"children":[{"type":"text","value":">"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ab5332"},"children":[{"type":"text","value":"  <"}]},{"type":"element","tag":"span","props":{"class":"ct-73f499"},"children":[{"type":"text","value":"div"}]},{"type":"element","tag":"span","props":{"class":"ct-ab5332"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-73f499"},"children":[{"type":"text","value":"class"}]},{"type":"element","tag":"span","props":{"class":"ct-ab5332"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-dc3b87"},"children":[{"type":"text","value":"\"store-locator-page\""}]},{"type":"element","tag":"span","props":{"class":"ct-ab5332"},"children":[{"type":"text","value":">"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ab5332"},"children":[{"type":"text","value":"    <"}]},{"type":"element","tag":"span","props":{"class":"ct-73f499"},"children":[{"type":"text","value":"AtomsGmap"}]},{"type":"element","tag":"span","props":{"class":"ct-ab5332"},"children":[{"type":"text","value":" :"}]},{"type":"element","tag":"span","props":{"class":"ct-73f499"},"children":[{"type":"text","value":"options"}]},{"type":"element","tag":"span","props":{"class":"ct-ab5332"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-ab5332"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-419cef"},"children":[{"type":"text","value":"mapOptions"}]},{"type":"element","tag":"span","props":{"class":"ct-ab5332"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-ab5332"},"children":[{"type":"text","value":">"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ab5332"},"children":[{"type":"text","value":"      <"}]},{"type":"element","tag":"span","props":{"class":"ct-73f499"},"children":[{"type":"text","value":"AtomsMarker"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ab5332"},"children":[{"type":"text","value":"        "}]},{"type":"element","tag":"span","props":{"class":"ct-73f499"},"children":[{"type":"text","value":"v-for"}]},{"type":"element","tag":"span","props":{"class":"ct-ab5332"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-ab5332"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-419cef"},"children":[{"type":"text","value":"marker"}]},{"type":"element","tag":"span","props":{"class":"ct-ab5332"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-6b8caf"},"children":[{"type":"text","value":"in"}]},{"type":"element","tag":"span","props":{"class":"ct-ab5332"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-419cef"},"children":[{"type":"text","value":"markers"}]},{"type":"element","tag":"span","props":{"class":"ct-ab5332"},"children":[{"type":"text","value":"\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ab5332"},"children":[{"type":"text","value":"        :"}]},{"type":"element","tag":"span","props":{"class":"ct-73f499"},"children":[{"type":"text","value":"key"}]},{"type":"element","tag":"span","props":{"class":"ct-ab5332"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-ab5332"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-6e6c0d"},"children":[{"type":"text","value":"marker"}]},{"type":"element","tag":"span","props":{"class":"ct-ab5332"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-419cef"},"children":[{"type":"text","value":"id"}]},{"type":"element","tag":"span","props":{"class":"ct-ab5332"},"children":[{"type":"text","value":"\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ab5332"},"children":[{"type":"text","value":"        :"}]},{"type":"element","tag":"span","props":{"class":"ct-73f499"},"children":[{"type":"text","value":"position"}]},{"type":"element","tag":"span","props":{"class":"ct-ab5332"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-ab5332"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-ab5332"},"children":[{"type":"text","value":"{ "}]},{"type":"element","tag":"span","props":{"class":"ct-419cef"},"children":[{"type":"text","value":"lat"}]},{"type":"element","tag":"span","props":{"class":"ct-ab5332"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-6e6c0d"},"children":[{"type":"text","value":"marker"}]},{"type":"element","tag":"span","props":{"class":"ct-ab5332"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-419cef"},"children":[{"type":"text","value":"lat"}]},{"type":"element","tag":"span","props":{"class":"ct-ab5332"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-419cef"},"children":[{"type":"text","value":"lng"}]},{"type":"element","tag":"span","props":{"class":"ct-ab5332"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-6e6c0d"},"children":[{"type":"text","value":"marker"}]},{"type":"element","tag":"span","props":{"class":"ct-ab5332"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-419cef"},"children":[{"type":"text","value":"lon"}]},{"type":"element","tag":"span","props":{"class":"ct-ab5332"},"children":[{"type":"text","value":" }"}]},{"type":"element","tag":"span","props":{"class":"ct-ab5332"},"children":[{"type":"text","value":"\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ab5332"},"children":[{"type":"text","value":"      />"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ab5332"},"children":[{"type":"text","value":"    </"}]},{"type":"element","tag":"span","props":{"class":"ct-73f499"},"children":[{"type":"text","value":"AtomsGmap"}]},{"type":"element","tag":"span","props":{"class":"ct-ab5332"},"children":[{"type":"text","value":">"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ab5332"},"children":[{"type":"text","value":"  </"}]},{"type":"element","tag":"span","props":{"class":"ct-73f499"},"children":[{"type":"text","value":"div"}]},{"type":"element","tag":"span","props":{"class":"ct-ab5332"},"children":[{"type":"text","value":">"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ab5332"},"children":[{"type":"text","value":"</"}]},{"type":"element","tag":"span","props":{"class":"ct-419cef"},"children":[{"type":"text","value":"template"}]},{"type":"element","tag":"span","props":{"class":"ct-ab5332"},"children":[{"type":"text","value":">"}]}]}]}]}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"position:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"required - LatLngObj: latitude and longitude"}]}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"customIcon:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"optional - string: path to the markerIcon. This will override the marker icon in nuxt.config.ts"}]}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"customActiveIcon"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"optional - string:  path to the active markerIcon. This will override the active marker icon in nuxt.config.ts"}]}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Events"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"clicked"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"mouseovered"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"mouseoutered"}]}]}]}]},{"type":"element","tag":"h2","props":{"id":"atomsgcluster"},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"AtomsGcluster"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"This component will cluster the markers using Official "},{"type":"element","tag":"a","props":{"href":"https://github.com/googlemaps/js-markerclusterer","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"GoogleClusterer"}]}]}]},{"type":"element","tag":"code","props":{"code":"<template>\n  <div class=\"store-locator-page\">\n    <AtomsGmap :options=\"mapOptions\" :key=\"myReactiveKey\">\n      <AtomsGcluster>\n        <AtomsMarker\n          v-for=\"marker in markers\"\n          :key=\"marker.id\"\n          :position=\"{ lat: marker.lat, lng: marker.lon }\"\n        />\n      </AtomsGcluster>\n    </AtomsGmap>\n  </div>\n</template>\n","language":"vue"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ab5332"},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"class":"ct-419cef"},"children":[{"type":"text","value":"template"}]},{"type":"element","tag":"span","props":{"class":"ct-ab5332"},"children":[{"type":"text","value":">"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ab5332"},"children":[{"type":"text","value":"  <"}]},{"type":"element","tag":"span","props":{"class":"ct-73f499"},"children":[{"type":"text","value":"div"}]},{"type":"element","tag":"span","props":{"class":"ct-ab5332"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-73f499"},"children":[{"type":"text","value":"class"}]},{"type":"element","tag":"span","props":{"class":"ct-ab5332"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-dc3b87"},"children":[{"type":"text","value":"\"store-locator-page\""}]},{"type":"element","tag":"span","props":{"class":"ct-ab5332"},"children":[{"type":"text","value":">"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ab5332"},"children":[{"type":"text","value":"    <"}]},{"type":"element","tag":"span","props":{"class":"ct-73f499"},"children":[{"type":"text","value":"AtomsGmap"}]},{"type":"element","tag":"span","props":{"class":"ct-ab5332"},"children":[{"type":"text","value":" :"}]},{"type":"element","tag":"span","props":{"class":"ct-73f499"},"children":[{"type":"text","value":"options"}]},{"type":"element","tag":"span","props":{"class":"ct-ab5332"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-ab5332"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-419cef"},"children":[{"type":"text","value":"mapOptions"}]},{"type":"element","tag":"span","props":{"class":"ct-ab5332"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-ab5332"},"children":[{"type":"text","value":" :"}]},{"type":"element","tag":"span","props":{"class":"ct-73f499"},"children":[{"type":"text","value":"key"}]},{"type":"element","tag":"span","props":{"class":"ct-ab5332"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-ab5332"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-419cef"},"children":[{"type":"text","value":"myReactiveKey"}]},{"type":"element","tag":"span","props":{"class":"ct-ab5332"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-ab5332"},"children":[{"type":"text","value":">"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ab5332"},"children":[{"type":"text","value":"      <"}]},{"type":"element","tag":"span","props":{"class":"ct-73f499"},"children":[{"type":"text","value":"AtomsGcluster"}]},{"type":"element","tag":"span","props":{"class":"ct-ab5332"},"children":[{"type":"text","value":">"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ab5332"},"children":[{"type":"text","value":"        <"}]},{"type":"element","tag":"span","props":{"class":"ct-73f499"},"children":[{"type":"text","value":"AtomsMarker"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ab5332"},"children":[{"type":"text","value":"          "}]},{"type":"element","tag":"span","props":{"class":"ct-73f499"},"children":[{"type":"text","value":"v-for"}]},{"type":"element","tag":"span","props":{"class":"ct-ab5332"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-ab5332"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-419cef"},"children":[{"type":"text","value":"marker"}]},{"type":"element","tag":"span","props":{"class":"ct-ab5332"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-6b8caf"},"children":[{"type":"text","value":"in"}]},{"type":"element","tag":"span","props":{"class":"ct-ab5332"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-419cef"},"children":[{"type":"text","value":"markers"}]},{"type":"element","tag":"span","props":{"class":"ct-ab5332"},"children":[{"type":"text","value":"\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ab5332"},"children":[{"type":"text","value":"          :"}]},{"type":"element","tag":"span","props":{"class":"ct-73f499"},"children":[{"type":"text","value":"key"}]},{"type":"element","tag":"span","props":{"class":"ct-ab5332"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-ab5332"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-6e6c0d"},"children":[{"type":"text","value":"marker"}]},{"type":"element","tag":"span","props":{"class":"ct-ab5332"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-419cef"},"children":[{"type":"text","value":"id"}]},{"type":"element","tag":"span","props":{"class":"ct-ab5332"},"children":[{"type":"text","value":"\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ab5332"},"children":[{"type":"text","value":"          :"}]},{"type":"element","tag":"span","props":{"class":"ct-73f499"},"children":[{"type":"text","value":"position"}]},{"type":"element","tag":"span","props":{"class":"ct-ab5332"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-ab5332"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-ab5332"},"children":[{"type":"text","value":"{ "}]},{"type":"element","tag":"span","props":{"class":"ct-419cef"},"children":[{"type":"text","value":"lat"}]},{"type":"element","tag":"span","props":{"class":"ct-ab5332"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-6e6c0d"},"children":[{"type":"text","value":"marker"}]},{"type":"element","tag":"span","props":{"class":"ct-ab5332"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-419cef"},"children":[{"type":"text","value":"lat"}]},{"type":"element","tag":"span","props":{"class":"ct-ab5332"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-419cef"},"children":[{"type":"text","value":"lng"}]},{"type":"element","tag":"span","props":{"class":"ct-ab5332"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-6e6c0d"},"children":[{"type":"text","value":"marker"}]},{"type":"element","tag":"span","props":{"class":"ct-ab5332"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-419cef"},"children":[{"type":"text","value":"lon"}]},{"type":"element","tag":"span","props":{"class":"ct-ab5332"},"children":[{"type":"text","value":" }"}]},{"type":"element","tag":"span","props":{"class":"ct-ab5332"},"children":[{"type":"text","value":"\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ab5332"},"children":[{"type":"text","value":"        />"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ab5332"},"children":[{"type":"text","value":"      </"}]},{"type":"element","tag":"span","props":{"class":"ct-73f499"},"children":[{"type":"text","value":"AtomsGcluster"}]},{"type":"element","tag":"span","props":{"class":"ct-ab5332"},"children":[{"type":"text","value":">"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ab5332"},"children":[{"type":"text","value":"    </"}]},{"type":"element","tag":"span","props":{"class":"ct-73f499"},"children":[{"type":"text","value":"AtomsGmap"}]},{"type":"element","tag":"span","props":{"class":"ct-ab5332"},"children":[{"type":"text","value":">"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ab5332"},"children":[{"type":"text","value":"  </"}]},{"type":"element","tag":"span","props":{"class":"ct-73f499"},"children":[{"type":"text","value":"div"}]},{"type":"element","tag":"span","props":{"class":"ct-ab5332"},"children":[{"type":"text","value":">"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ab5332"},"children":[{"type":"text","value":"</"}]},{"type":"element","tag":"span","props":{"class":"ct-419cef"},"children":[{"type":"text","value":"template"}]},{"type":"element","tag":"span","props":{"class":"ct-ab5332"},"children":[{"type":"text","value":">"}]}]}]}]}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"icon:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"options - string: path to the clusterIcon. This will override the cluster icon in nuxt.config.ts"}]}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"sizes:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"optional - SizesObj: icon clusterer sizes. Example: { width: 50, height: 50 }"}]}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"color"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"optional - string: set the color for the "},{"type":"element","tag":"a","props":{"href":"https://developers.google.com/maps/documentation/javascript/markers#marker_labels","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"GoogleClusterLabel"}]}]}]}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"fontSize"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"optional - string: set the font size for the "},{"type":"element","tag":"a","props":{"href":"https://developers.google.com/maps/documentation/javascript/markers#marker_labels","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"GoogleClusterLabel"}]}]}]}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"lineHeight"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"optional - string: set the line height for the "},{"type":"element","tag":"a","props":{"href":"https://developers.google.com/maps/documentation/javascript/markers#marker_labels","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"GoogleClusterLabel"}]}]}]}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"fontFamily"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"optional - string: set the font family for the "},{"type":"element","tag":"a","props":{"href":"https://developers.google.com/maps/documentation/javascript/markers#marker_labels","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"GoogleClusterLabel"}]}]}]}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"label"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"optional - ItemsObj: override the previous values if provided an object of "},{"type":"element","tag":"a","props":{"href":"https://developers.google.com/maps/documentation/javascript/markers#marker_labels","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"GoogleClusterLabel"}]}]}]}]}]}]},{"type":"element","tag":"alert","props":{"type":"info"},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"If your markers are reactives and they will change for any reason like in the example remember to provide a key prop to the AtomsGmap component."}]}]},{"type":"element","tag":"h2","props":{"id":"atomsgautocomplete"},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"AtomsGautocomplete"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"This component will render the Official Google Autocomplete search "},{"type":"element","tag":"a","props":{"href":"https://developers.google.com/maps/documentation/javascript/places-autocomplete","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"GoogleAutocomplete"}]}]}]},{"type":"element","tag":"code","props":{"code":"<template>\n  <div class=\"atoms-autocomplete\">\n    <AtomsGautocomplete @searched=\"getCoordinates($event)\" />\n  </div>\n</template>\n\n<script setup lang=\"ts\">\nconst getCoordinates = (searchedObj) => {\n  console.log('searchedObj', searchedObj)\n}\n</script>\n","language":"vue"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ab5332"},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"class":"ct-419cef"},"children":[{"type":"text","value":"template"}]},{"type":"element","tag":"span","props":{"class":"ct-ab5332"},"children":[{"type":"text","value":">"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ab5332"},"children":[{"type":"text","value":"  <"}]},{"type":"element","tag":"span","props":{"class":"ct-73f499"},"children":[{"type":"text","value":"div"}]},{"type":"element","tag":"span","props":{"class":"ct-ab5332"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-73f499"},"children":[{"type":"text","value":"class"}]},{"type":"element","tag":"span","props":{"class":"ct-ab5332"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-dc3b87"},"children":[{"type":"text","value":"\"atoms-autocomplete\""}]},{"type":"element","tag":"span","props":{"class":"ct-ab5332"},"children":[{"type":"text","value":">"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ab5332"},"children":[{"type":"text","value":"    <"}]},{"type":"element","tag":"span","props":{"class":"ct-73f499"},"children":[{"type":"text","value":"AtomsGautocomplete"}]},{"type":"element","tag":"span","props":{"class":"ct-ab5332"},"children":[{"type":"text","value":" @"}]},{"type":"element","tag":"span","props":{"class":"ct-73f499"},"children":[{"type":"text","value":"searched"}]},{"type":"element","tag":"span","props":{"class":"ct-ab5332"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-ab5332"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-e1f58d"},"children":[{"type":"text","value":"getCoordinates"}]},{"type":"element","tag":"span","props":{"class":"ct-ab5332"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-419cef"},"children":[{"type":"text","value":"$event"}]},{"type":"element","tag":"span","props":{"class":"ct-ab5332"},"children":[{"type":"text","value":")"}]},{"type":"element","tag":"span","props":{"class":"ct-ab5332"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-ab5332"},"children":[{"type":"text","value":" />"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ab5332"},"children":[{"type":"text","value":"  </"}]},{"type":"element","tag":"span","props":{"class":"ct-73f499"},"children":[{"type":"text","value":"div"}]},{"type":"element","tag":"span","props":{"class":"ct-ab5332"},"children":[{"type":"text","value":">"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ab5332"},"children":[{"type":"text","value":"</"}]},{"type":"element","tag":"span","props":{"class":"ct-419cef"},"children":[{"type":"text","value":"template"}]},{"type":"element","tag":"span","props":{"class":"ct-ab5332"},"children":[{"type":"text","value":">"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ab5332"},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"class":"ct-419cef"},"children":[{"type":"text","value":"script"}]},{"type":"element","tag":"span","props":{"class":"ct-ab5332"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-73f499"},"children":[{"type":"text","value":"setup"}]},{"type":"element","tag":"span","props":{"class":"ct-ab5332"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-73f499"},"children":[{"type":"text","value":"lang"}]},{"type":"element","tag":"span","props":{"class":"ct-ab5332"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-dc3b87"},"children":[{"type":"text","value":"\"ts\""}]},{"type":"element","tag":"span","props":{"class":"ct-ab5332"},"children":[{"type":"text","value":">"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-6b8caf"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-ab5332"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-e1f58d"},"children":[{"type":"text","value":"getCoordinates"}]},{"type":"element","tag":"span","props":{"class":"ct-ab5332"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-ebd406"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-ab5332"},"children":[{"type":"text","value":" ("}]},{"type":"element","tag":"span","props":{"class":"ct-419cef"},"children":[{"type":"text","value":"searchedObj"}]},{"type":"element","tag":"span","props":{"class":"ct-ab5332"},"children":[{"type":"text","value":") "}]},{"type":"element","tag":"span","props":{"class":"ct-6b8caf"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"class":"ct-ab5332"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ab5332"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-6e6c0d"},"children":[{"type":"text","value":"console"}]},{"type":"element","tag":"span","props":{"class":"ct-ab5332"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-e1f58d"},"children":[{"type":"text","value":"log"}]},{"type":"element","tag":"span","props":{"class":"ct-ab5332"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-dc3b87"},"children":[{"type":"text","value":"'searchedObj'"}]},{"type":"element","tag":"span","props":{"class":"ct-ab5332"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-419cef"},"children":[{"type":"text","value":"searchedObj"}]},{"type":"element","tag":"span","props":{"class":"ct-ab5332"},"children":[{"type":"text","value":")"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ab5332"},"children":[{"type":"text","value":"}"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ab5332"},"children":[{"type":"text","value":"</"}]},{"type":"element","tag":"span","props":{"class":"ct-419cef"},"children":[{"type":"text","value":"script"}]},{"type":"element","tag":"span","props":{"class":"ct-ab5332"},"children":[{"type":"text","value":">"}]}]}]}]}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"label:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"optional - string: input search label"}]}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"requiredLabel:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"optional - boolean: force required input validation"}]}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"inputName"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"optional - string: name input field"}]}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"autocompleteOptions"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"optional - ItemsObj: "},{"type":"element","tag":"a","props":{"href":"https://developers.google.com/maps/documentation/javascript/reference/places-widget#AutocompleteOptions","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"'GoogleAutocomplete'"}]}]}]}]}]},{"type":"element","tag":"h2","props":{"id":"atomsginfowindow"},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"AtomsGInfoWindow"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"This component will render the Official Google Info-Window box relative to the marker position. "},{"type":"element","tag":"a","props":{"href":"https://developers.google.com/maps/documentation/javascript/infowindows","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"GoogleInfoWindow"}]}]},{"type":"text","value":"\nIt's possible to style the box with custom CSS and using the slots availables"}]},{"type":"element","tag":"code","props":{"code":"<template>\n  ...\n    <AtomsGInfoWindow :position-x=\"0\" :position-y=\"90\">\n      <template #content-window> lorem ipsum </template>\n      <template #close-icon-window>close icon</template>\n    </AtomsGInfoWindow>\n  ...\n</template>\n","language":"vue"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ab5332"},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"class":"ct-419cef"},"children":[{"type":"text","value":"template"}]},{"type":"element","tag":"span","props":{"class":"ct-ab5332"},"children":[{"type":"text","value":">"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ab5332"},"children":[{"type":"text","value":"  ..."}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ab5332"},"children":[{"type":"text","value":"    <"}]},{"type":"element","tag":"span","props":{"class":"ct-73f499"},"children":[{"type":"text","value":"AtomsGInfoWindow"}]},{"type":"element","tag":"span","props":{"class":"ct-ab5332"},"children":[{"type":"text","value":" :"}]},{"type":"element","tag":"span","props":{"class":"ct-73f499"},"children":[{"type":"text","value":"position-x"}]},{"type":"element","tag":"span","props":{"class":"ct-ab5332"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-ab5332"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-73f499"},"children":[{"type":"text","value":"0"}]},{"type":"element","tag":"span","props":{"class":"ct-ab5332"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-ab5332"},"children":[{"type":"text","value":" :"}]},{"type":"element","tag":"span","props":{"class":"ct-73f499"},"children":[{"type":"text","value":"position-y"}]},{"type":"element","tag":"span","props":{"class":"ct-ab5332"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-ab5332"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-73f499"},"children":[{"type":"text","value":"90"}]},{"type":"element","tag":"span","props":{"class":"ct-ab5332"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-ab5332"},"children":[{"type":"text","value":">"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ab5332"},"children":[{"type":"text","value":"      <"}]},{"type":"element","tag":"span","props":{"class":"ct-73f499"},"children":[{"type":"text","value":"template"}]},{"type":"element","tag":"span","props":{"class":"ct-ab5332"},"children":[{"type":"text","value":" #"}]},{"type":"element","tag":"span","props":{"class":"ct-73f499"},"children":[{"type":"text","value":"content-window"}]},{"type":"element","tag":"span","props":{"class":"ct-ab5332"},"children":[{"type":"text","value":"> "}]},{"type":"element","tag":"span","props":{"class":"ct-73f499"},"children":[{"type":"text","value":"lorem"}]},{"type":"element","tag":"span","props":{"class":"ct-ab5332"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-73f499"},"children":[{"type":"text","value":"ipsum"}]},{"type":"element","tag":"span","props":{"class":"ct-ab5332"},"children":[{"type":"text","value":" </"}]},{"type":"element","tag":"span","props":{"class":"ct-73f499"},"children":[{"type":"text","value":"template"}]},{"type":"element","tag":"span","props":{"class":"ct-ab5332"},"children":[{"type":"text","value":">"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ab5332"},"children":[{"type":"text","value":"      <"}]},{"type":"element","tag":"span","props":{"class":"ct-73f499"},"children":[{"type":"text","value":"template"}]},{"type":"element","tag":"span","props":{"class":"ct-ab5332"},"children":[{"type":"text","value":" #"}]},{"type":"element","tag":"span","props":{"class":"ct-73f499"},"children":[{"type":"text","value":"close-icon-window"}]},{"type":"element","tag":"span","props":{"class":"ct-ab5332"},"children":[{"type":"text","value":">"}]},{"type":"element","tag":"span","props":{"class":"ct-73f499"},"children":[{"type":"text","value":"close"}]},{"type":"element","tag":"span","props":{"class":"ct-ab5332"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-73f499"},"children":[{"type":"text","value":"icon"}]},{"type":"element","tag":"span","props":{"class":"ct-ab5332"},"children":[{"type":"text","value":"</"}]},{"type":"element","tag":"span","props":{"class":"ct-73f499"},"children":[{"type":"text","value":"template"}]},{"type":"element","tag":"span","props":{"class":"ct-ab5332"},"children":[{"type":"text","value":">"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ab5332"},"children":[{"type":"text","value":"    </"}]},{"type":"element","tag":"span","props":{"class":"ct-73f499"},"children":[{"type":"text","value":"AtomsGInfoWindow"}]},{"type":"element","tag":"span","props":{"class":"ct-ab5332"},"children":[{"type":"text","value":">"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ab5332"},"children":[{"type":"text","value":"  ..."}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-ab5332"},"children":[{"type":"text","value":"</"}]},{"type":"element","tag":"span","props":{"class":"ct-419cef"},"children":[{"type":"text","value":"template"}]},{"type":"element","tag":"span","props":{"class":"ct-ab5332"},"children":[{"type":"text","value":">"}]}]}]}]}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"positionX:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"required - number: set the X offset for the box"}]}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"positionY:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"required - number: set the Y offset for the box"}]}]}]}]},{"type":"element","tag":"style","children":[{"type":"text","value":".ct-ebd406{color:#56B6C2}.ct-e1f58d{color:#61AFEF}.ct-6e6c0d{color:#E5C07B}.ct-6b8caf{color:#C678DD}.ct-dc3b87{color:#98C379}.ct-73f499{color:#D19A66}.ct-419cef{color:#E06C75}.ct-ab5332{color:#ABB2BF}"}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"atomsgmap","depth":2,"text":"AtomsGmap"},{"id":"atomsmarker","depth":2,"text":"AtomsMarker"},{"id":"atomsgcluster","depth":2,"text":"AtomsGcluster"},{"id":"atomsgautocomplete","depth":2,"text":"AtomsGautocomplete"},{"id":"atomsginfowindow","depth":2,"text":"AtomsGInfoWindow"}]}},"_type":"markdown","_id":"content:3.atoms-components.md","_source":"content","_file":"3.atoms-components.md","_extension":"md"}