{"_path":"/atoms-composables","_draft":false,"_partial":false,"_empty":false,"title":"Atoms Composables","description":"Learn how to use the atoms composables in your Nuxt 3 application.","excerpt":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"This module exposes composables that are "},{"type":"element","tag":"a","props":{"href":"https://v3.nuxtjs.org/docs/directory-structure/composables","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"auto-imported"}]},{"type":"text","value":" by Nuxt 3."}]},{"type":"element","tag":"h2","props":{"id":"usegooglekey"},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"useGoogleKey"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"This composable return the Google Api Key provided in the nuxt.config.ts"}]},{"type":"element","tag":"code","props":{"code":"<script setup lang=\"ts\">\n  const API_KEY = useGoogleKey()\n  console.log('my google key', API_KEY)\n</script>\n","language":"vue"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"<script setup lang=\"ts\">\n  const API_KEY = useGoogleKey()\n  console.log('my google key', API_KEY)\n</script>\n"}]}]}]},{"type":"element","tag":"h2","props":{"id":"usegooglemapref"},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"useGoogleMapRef"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"This is a global state composable which provide the Google Map instance after initialization."}]},{"type":"element","tag":"code","props":{"code":"<script setup lang=\"ts\">\n  const { init, mapInstance } = useGoogleMapRef()\n  console.log('my mapInstance', mapInstance.value)\n\n  onMounted(() => {\n    init(DomElement)\n  })\n</script>\n","language":"vue"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"<script setup lang=\"ts\">\n  const { init, mapInstance } = useGoogleMapRef()\n  console.log('my mapInstance', mapInstance.value)\n\n  onMounted(() => {\n    init(DomElement)\n  })\n</script>\n"}]}]}]},{"type":"element","tag":"h2","props":{"id":"usegoogleclusterer"},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"useGoogleClusterer"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"This is a global state composable which deals with the Google Map markers instance."}]},{"type":"element","tag":"code","props":{"code":"<script setup lang=\"ts\">\n  const { markersInstance, addGoogleMarker } = useGoogleClusterer()\n  console.log('my reactive markers', markersInstance.value)\n\n  onMounted(() => {\n    addGoogleMarker(GoogleMarker)\n  })\n</script>\n","language":"vue"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"<script setup lang=\"ts\">\n  const { markersInstance, addGoogleMarker } = useGoogleClusterer()\n  console.log('my reactive markers', markersInstance.value)\n\n  onMounted(() => {\n    addGoogleMarker(GoogleMarker)\n  })\n</script>\n"}]}]}]},{"type":"element","tag":"h3","props":{"id":"markersinstance"},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"markersInstance"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Returns the reactive google markers."}]},{"type":"element","tag":"h3","props":{"id":"clusterericon"},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"clustererIcon"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Returns the path for the clustererIcon provided in the nuxt.config.ts"}]},{"type":"element","tag":"h3","props":{"id":"addgooglemarker"},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"addGoogleMarker"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Adds a marker in the markersInstance. It needs to be a google Marker."}]},{"type":"element","tag":"h3","props":{"id":"deletegooglemarker"},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"deleteGoogleMarker"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Removes a marker in the markersInstance. It needs to be a google Marker."}]},{"type":"element","tag":"h2","props":{"id":"usemarkericons"},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"useMarkerIcons"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Returns the path for the markerIcon and activeMarkerIcon provided in the nuxt.config.ts"}]},{"type":"element","tag":"code","props":{"code":"<script setup lang=\"ts\">\n  const { markerIcon, activeMarkerIcon } = useMarkerIcons()\n  console.log('icon path', markerIcon.value)\n  console.log('active icon path', activeMarkerIcon.value)\n</script>\n","language":"vue"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"<script setup lang=\"ts\">\n  const { markerIcon, activeMarkerIcon } = useMarkerIcons()\n  console.log('icon path', markerIcon.value)\n  console.log('active icon path', activeMarkerIcon.value)\n</script>\n"}]}]}]}]},"body":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"This module exposes composables that are "},{"type":"element","tag":"a","props":{"href":"https://v3.nuxtjs.org/docs/directory-structure/composables","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"auto-imported"}]},{"type":"text","value":" by Nuxt 3."}]},{"type":"element","tag":"h2","props":{"id":"usegooglekey"},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"useGoogleKey"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"This composable return the Google Api Key provided in the nuxt.config.ts"}]},{"type":"element","tag":"code","props":{"code":"<script setup lang=\"ts\">\n  const API_KEY = useGoogleKey()\n  console.log('my google key', API_KEY)\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-0c34a8"},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"class":"ct-b61ca2"},"children":[{"type":"text","value":"script"}]},{"type":"element","tag":"span","props":{"class":"ct-0c34a8"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-4da37f"},"children":[{"type":"text","value":"setup"}]},{"type":"element","tag":"span","props":{"class":"ct-0c34a8"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-4da37f"},"children":[{"type":"text","value":"lang"}]},{"type":"element","tag":"span","props":{"class":"ct-0c34a8"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-b902b8"},"children":[{"type":"text","value":"\"ts\""}]},{"type":"element","tag":"span","props":{"class":"ct-0c34a8"},"children":[{"type":"text","value":">"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-0c34a8"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-56e59f"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-0c34a8"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-de9550"},"children":[{"type":"text","value":"API_KEY"}]},{"type":"element","tag":"span","props":{"class":"ct-0c34a8"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-21b689"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-0c34a8"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-3b2d9f"},"children":[{"type":"text","value":"useGoogleKey"}]},{"type":"element","tag":"span","props":{"class":"ct-0c34a8"},"children":[{"type":"text","value":"()"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-0c34a8"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-de9550"},"children":[{"type":"text","value":"console"}]},{"type":"element","tag":"span","props":{"class":"ct-0c34a8"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-3b2d9f"},"children":[{"type":"text","value":"log"}]},{"type":"element","tag":"span","props":{"class":"ct-0c34a8"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-b902b8"},"children":[{"type":"text","value":"'my google key'"}]},{"type":"element","tag":"span","props":{"class":"ct-0c34a8"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-de9550"},"children":[{"type":"text","value":"API_KEY"}]},{"type":"element","tag":"span","props":{"class":"ct-0c34a8"},"children":[{"type":"text","value":")"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-0c34a8"},"children":[{"type":"text","value":"</"}]},{"type":"element","tag":"span","props":{"class":"ct-b61ca2"},"children":[{"type":"text","value":"script"}]},{"type":"element","tag":"span","props":{"class":"ct-0c34a8"},"children":[{"type":"text","value":">"}]}]}]}]}]},{"type":"element","tag":"h2","props":{"id":"usegooglemapref"},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"useGoogleMapRef"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"This is a global state composable which provide the Google Map instance after initialization."}]},{"type":"element","tag":"code","props":{"code":"<script setup lang=\"ts\">\n  const { init, mapInstance } = useGoogleMapRef()\n  console.log('my mapInstance', mapInstance.value)\n\n  onMounted(() => {\n    init(DomElement)\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-0c34a8"},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"class":"ct-b61ca2"},"children":[{"type":"text","value":"script"}]},{"type":"element","tag":"span","props":{"class":"ct-0c34a8"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-4da37f"},"children":[{"type":"text","value":"setup"}]},{"type":"element","tag":"span","props":{"class":"ct-0c34a8"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-4da37f"},"children":[{"type":"text","value":"lang"}]},{"type":"element","tag":"span","props":{"class":"ct-0c34a8"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-b902b8"},"children":[{"type":"text","value":"\"ts\""}]},{"type":"element","tag":"span","props":{"class":"ct-0c34a8"},"children":[{"type":"text","value":">"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-0c34a8"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-56e59f"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-0c34a8"},"children":[{"type":"text","value":" { "}]},{"type":"element","tag":"span","props":{"class":"ct-de9550"},"children":[{"type":"text","value":"init"}]},{"type":"element","tag":"span","props":{"class":"ct-0c34a8"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-de9550"},"children":[{"type":"text","value":"mapInstance"}]},{"type":"element","tag":"span","props":{"class":"ct-0c34a8"},"children":[{"type":"text","value":" } "}]},{"type":"element","tag":"span","props":{"class":"ct-21b689"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-0c34a8"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-3b2d9f"},"children":[{"type":"text","value":"useGoogleMapRef"}]},{"type":"element","tag":"span","props":{"class":"ct-0c34a8"},"children":[{"type":"text","value":"()"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-0c34a8"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-de9550"},"children":[{"type":"text","value":"console"}]},{"type":"element","tag":"span","props":{"class":"ct-0c34a8"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-3b2d9f"},"children":[{"type":"text","value":"log"}]},{"type":"element","tag":"span","props":{"class":"ct-0c34a8"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-b902b8"},"children":[{"type":"text","value":"'my mapInstance'"}]},{"type":"element","tag":"span","props":{"class":"ct-0c34a8"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-de9550"},"children":[{"type":"text","value":"mapInstance"}]},{"type":"element","tag":"span","props":{"class":"ct-0c34a8"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-b61ca2"},"children":[{"type":"text","value":"value"}]},{"type":"element","tag":"span","props":{"class":"ct-0c34a8"},"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-0c34a8"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-3b2d9f"},"children":[{"type":"text","value":"onMounted"}]},{"type":"element","tag":"span","props":{"class":"ct-0c34a8"},"children":[{"type":"text","value":"(() "}]},{"type":"element","tag":"span","props":{"class":"ct-56e59f"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"class":"ct-0c34a8"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-0c34a8"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-3b2d9f"},"children":[{"type":"text","value":"init"}]},{"type":"element","tag":"span","props":{"class":"ct-0c34a8"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-b61ca2"},"children":[{"type":"text","value":"DomElement"}]},{"type":"element","tag":"span","props":{"class":"ct-0c34a8"},"children":[{"type":"text","value":")"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-0c34a8"},"children":[{"type":"text","value":"  })"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-0c34a8"},"children":[{"type":"text","value":"</"}]},{"type":"element","tag":"span","props":{"class":"ct-b61ca2"},"children":[{"type":"text","value":"script"}]},{"type":"element","tag":"span","props":{"class":"ct-0c34a8"},"children":[{"type":"text","value":">"}]}]}]}]}]},{"type":"element","tag":"h2","props":{"id":"usegoogleclusterer"},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"useGoogleClusterer"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"This is a global state composable which deals with the Google Map markers instance."}]},{"type":"element","tag":"code","props":{"code":"<script setup lang=\"ts\">\n  const { markersInstance, addGoogleMarker } = useGoogleClusterer()\n  console.log('my reactive markers', markersInstance.value)\n\n  onMounted(() => {\n    addGoogleMarker(GoogleMarker)\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-0c34a8"},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"class":"ct-b61ca2"},"children":[{"type":"text","value":"script"}]},{"type":"element","tag":"span","props":{"class":"ct-0c34a8"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-4da37f"},"children":[{"type":"text","value":"setup"}]},{"type":"element","tag":"span","props":{"class":"ct-0c34a8"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-4da37f"},"children":[{"type":"text","value":"lang"}]},{"type":"element","tag":"span","props":{"class":"ct-0c34a8"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-b902b8"},"children":[{"type":"text","value":"\"ts\""}]},{"type":"element","tag":"span","props":{"class":"ct-0c34a8"},"children":[{"type":"text","value":">"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-0c34a8"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-56e59f"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-0c34a8"},"children":[{"type":"text","value":" { "}]},{"type":"element","tag":"span","props":{"class":"ct-de9550"},"children":[{"type":"text","value":"markersInstance"}]},{"type":"element","tag":"span","props":{"class":"ct-0c34a8"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-de9550"},"children":[{"type":"text","value":"addGoogleMarker"}]},{"type":"element","tag":"span","props":{"class":"ct-0c34a8"},"children":[{"type":"text","value":" } "}]},{"type":"element","tag":"span","props":{"class":"ct-21b689"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-0c34a8"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-3b2d9f"},"children":[{"type":"text","value":"useGoogleClusterer"}]},{"type":"element","tag":"span","props":{"class":"ct-0c34a8"},"children":[{"type":"text","value":"()"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-0c34a8"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-de9550"},"children":[{"type":"text","value":"console"}]},{"type":"element","tag":"span","props":{"class":"ct-0c34a8"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-3b2d9f"},"children":[{"type":"text","value":"log"}]},{"type":"element","tag":"span","props":{"class":"ct-0c34a8"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-b902b8"},"children":[{"type":"text","value":"'my reactive markers'"}]},{"type":"element","tag":"span","props":{"class":"ct-0c34a8"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-de9550"},"children":[{"type":"text","value":"markersInstance"}]},{"type":"element","tag":"span","props":{"class":"ct-0c34a8"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-b61ca2"},"children":[{"type":"text","value":"value"}]},{"type":"element","tag":"span","props":{"class":"ct-0c34a8"},"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-0c34a8"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-3b2d9f"},"children":[{"type":"text","value":"onMounted"}]},{"type":"element","tag":"span","props":{"class":"ct-0c34a8"},"children":[{"type":"text","value":"(() "}]},{"type":"element","tag":"span","props":{"class":"ct-56e59f"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"class":"ct-0c34a8"},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-0c34a8"},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"class":"ct-3b2d9f"},"children":[{"type":"text","value":"addGoogleMarker"}]},{"type":"element","tag":"span","props":{"class":"ct-0c34a8"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-b61ca2"},"children":[{"type":"text","value":"GoogleMarker"}]},{"type":"element","tag":"span","props":{"class":"ct-0c34a8"},"children":[{"type":"text","value":")"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-0c34a8"},"children":[{"type":"text","value":"  })"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-0c34a8"},"children":[{"type":"text","value":"</"}]},{"type":"element","tag":"span","props":{"class":"ct-b61ca2"},"children":[{"type":"text","value":"script"}]},{"type":"element","tag":"span","props":{"class":"ct-0c34a8"},"children":[{"type":"text","value":">"}]}]}]}]}]},{"type":"element","tag":"h3","props":{"id":"markersinstance"},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"markersInstance"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Returns the reactive google markers."}]},{"type":"element","tag":"h3","props":{"id":"clusterericon"},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"clustererIcon"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Returns the path for the clustererIcon provided in the nuxt.config.ts"}]},{"type":"element","tag":"h3","props":{"id":"addgooglemarker"},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"addGoogleMarker"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Adds a marker in the markersInstance. It needs to be a google Marker."}]},{"type":"element","tag":"h3","props":{"id":"deletegooglemarker"},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"deleteGoogleMarker"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Removes a marker in the markersInstance. It needs to be a google Marker."}]},{"type":"element","tag":"h2","props":{"id":"usemarkericons"},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"useMarkerIcons"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Returns the path for the markerIcon and activeMarkerIcon provided in the nuxt.config.ts"}]},{"type":"element","tag":"code","props":{"code":"<script setup lang=\"ts\">\n  const { markerIcon, activeMarkerIcon } = useMarkerIcons()\n  console.log('icon path', markerIcon.value)\n  console.log('active icon path', activeMarkerIcon.value)\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-0c34a8"},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"class":"ct-b61ca2"},"children":[{"type":"text","value":"script"}]},{"type":"element","tag":"span","props":{"class":"ct-0c34a8"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-4da37f"},"children":[{"type":"text","value":"setup"}]},{"type":"element","tag":"span","props":{"class":"ct-0c34a8"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-4da37f"},"children":[{"type":"text","value":"lang"}]},{"type":"element","tag":"span","props":{"class":"ct-0c34a8"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-b902b8"},"children":[{"type":"text","value":"\"ts\""}]},{"type":"element","tag":"span","props":{"class":"ct-0c34a8"},"children":[{"type":"text","value":">"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-0c34a8"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-56e59f"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-0c34a8"},"children":[{"type":"text","value":" { "}]},{"type":"element","tag":"span","props":{"class":"ct-de9550"},"children":[{"type":"text","value":"markerIcon"}]},{"type":"element","tag":"span","props":{"class":"ct-0c34a8"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-de9550"},"children":[{"type":"text","value":"activeMarkerIcon"}]},{"type":"element","tag":"span","props":{"class":"ct-0c34a8"},"children":[{"type":"text","value":" } "}]},{"type":"element","tag":"span","props":{"class":"ct-21b689"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-0c34a8"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-3b2d9f"},"children":[{"type":"text","value":"useMarkerIcons"}]},{"type":"element","tag":"span","props":{"class":"ct-0c34a8"},"children":[{"type":"text","value":"()"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-0c34a8"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-de9550"},"children":[{"type":"text","value":"console"}]},{"type":"element","tag":"span","props":{"class":"ct-0c34a8"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-3b2d9f"},"children":[{"type":"text","value":"log"}]},{"type":"element","tag":"span","props":{"class":"ct-0c34a8"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-b902b8"},"children":[{"type":"text","value":"'icon path'"}]},{"type":"element","tag":"span","props":{"class":"ct-0c34a8"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-de9550"},"children":[{"type":"text","value":"markerIcon"}]},{"type":"element","tag":"span","props":{"class":"ct-0c34a8"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-b61ca2"},"children":[{"type":"text","value":"value"}]},{"type":"element","tag":"span","props":{"class":"ct-0c34a8"},"children":[{"type":"text","value":")"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-0c34a8"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-de9550"},"children":[{"type":"text","value":"console"}]},{"type":"element","tag":"span","props":{"class":"ct-0c34a8"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-3b2d9f"},"children":[{"type":"text","value":"log"}]},{"type":"element","tag":"span","props":{"class":"ct-0c34a8"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"class":"ct-b902b8"},"children":[{"type":"text","value":"'active icon path'"}]},{"type":"element","tag":"span","props":{"class":"ct-0c34a8"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"class":"ct-de9550"},"children":[{"type":"text","value":"activeMarkerIcon"}]},{"type":"element","tag":"span","props":{"class":"ct-0c34a8"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-b61ca2"},"children":[{"type":"text","value":"value"}]},{"type":"element","tag":"span","props":{"class":"ct-0c34a8"},"children":[{"type":"text","value":")"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-0c34a8"},"children":[{"type":"text","value":"</"}]},{"type":"element","tag":"span","props":{"class":"ct-b61ca2"},"children":[{"type":"text","value":"script"}]},{"type":"element","tag":"span","props":{"class":"ct-0c34a8"},"children":[{"type":"text","value":">"}]}]}]}]}]},{"type":"element","tag":"style","children":[{"type":"text","value":".ct-3b2d9f{color:#61AFEF}.ct-21b689{color:#56B6C2}.ct-de9550{color:#E5C07B}.ct-56e59f{color:#C678DD}.ct-b902b8{color:#98C379}.ct-4da37f{color:#D19A66}.ct-b61ca2{color:#E06C75}.ct-0c34a8{color:#ABB2BF}"}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"usegooglekey","depth":2,"text":"useGoogleKey"},{"id":"usegooglemapref","depth":2,"text":"useGoogleMapRef"},{"id":"usegoogleclusterer","depth":2,"text":"useGoogleClusterer","children":[{"id":"markersinstance","depth":3,"text":"markersInstance"},{"id":"clusterericon","depth":3,"text":"clustererIcon"},{"id":"addgooglemarker","depth":3,"text":"addGoogleMarker"},{"id":"deletegooglemarker","depth":3,"text":"deleteGoogleMarker"}]},{"id":"usemarkericons","depth":2,"text":"useMarkerIcons"}]}},"_type":"markdown","_id":"content:4.atoms-composables.md","_source":"content","_file":"4.atoms-composables.md","_extension":"md"}