{"id":13810538,"url":"https://github.com/inocan-group/vue3-google-map","last_synced_at":"2025-05-14T10:33:59.803Z","repository":{"id":37289712,"uuid":"299700654","full_name":"inocan-group/vue3-google-map","owner":"inocan-group","description":"A set of composable components for easy use of Google Maps in your Vue 3 projects.","archived":false,"fork":false,"pushed_at":"2025-04-28T15:05:53.000Z","size":13115,"stargazers_count":331,"open_issues_count":28,"forks_count":70,"subscribers_count":7,"default_branch":"develop","last_synced_at":"2025-05-06T19:12:54.407Z","etag":null,"topics":["google-maps","typescript","vue","vue3"],"latest_commit_sha":null,"homepage":"https://vue3-google-map.com","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/inocan-group.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2020-09-29T18:12:42.000Z","updated_at":"2025-05-04T16:19:21.000Z","dependencies_parsed_at":"2023-02-19T19:45:44.538Z","dependency_job_id":"cb60677c-d189-4c89-88cb-9dc3c177ec56","html_url":"https://github.com/inocan-group/vue3-google-map","commit_stats":null,"previous_names":["inocan-group/vue3-google-maps"],"tags_count":44,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/inocan-group%2Fvue3-google-map","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/inocan-group%2Fvue3-google-map/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/inocan-group%2Fvue3-google-map/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/inocan-group%2Fvue3-google-map/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/inocan-group","download_url":"https://codeload.github.com/inocan-group/vue3-google-map/tar.gz/refs/heads/develop","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254121209,"owners_count":22018121,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["google-maps","typescript","vue","vue3"],"created_at":"2024-08-04T02:00:58.446Z","updated_at":"2025-05-14T10:33:54.780Z","avatar_url":"https://github.com/inocan-group.png","language":"TypeScript","funding_links":[],"categories":["TypeScript"],"sub_categories":[],"readme":"# vue3-google-map\n\n![Build Status](https://github.com/inocan-group/vue3-google-map/actions/workflows/build.yml/badge.svg)\n[![License](https://img.shields.io/github/license/inocan-group/vue3-google-map)](https://github.com/inocan-group/vue3-google-map/blob/develop/LICENSE)\n\n\u003e Composable components for easy use of Google Maps with Vue 3\n\n`vue3-google-map` offers a set of composable components for easy use of Google Maps in your Vue 3 projects.\n\nNote: Please refer to the [documentation site](https://vue3-google-map.com/) for rendered examples.\n\n## Table of Contents\n\n- [Getting Started](#getting-started)\n  - [Installation](#installation)\n  - [Your First Map](#your-first-map)\n- [Components](#components)\n  - [Advanced Marker](#advanced-marker)\n  - [Marker](#marker)\n  - [Polyline](#polyline)\n  - [Polygon](#polygon)\n  - [Rectangle](#rectangle)\n  - [Circle](#circle)\n  - [Info Window](#info-window)\n  - [Custom Marker](#custom-marker)\n  - [Custom Control](#custom-control)\n  - [Marker Cluster](#marker-cluster)\n  - [Heatmap Layer](#heatmap-layer)\n- [Advanced Usage](#advanced-usage)\n- [Contribution](#contribution)\n- [License](#license)\n\n## Getting Started\n\n### Installation\n\n#### NPM\n\n```bash\nnpm install vue3-google-map\n# OR\npnpm add vue3-google-map\n```\n\n#### CDN\n\nInclude the following script tag in your `index.html` (make sure to include it after Vue 3's global build).\n\n```html\n\u003cscript src=\"https://unpkg.com/vue3-google-map\"\u003e\u003c/script\u003e\n```\n\nAll the map components are available on the `Vue3GoogleMap` global variable.\n\n[Codepen demo](https://codepen.io/husamibrahim/pen/poQXZbR)\n\n### Your First Map\n\nTo construct a map using `vue3-google-map` you'll need to use the base `GoogleMap` component which receives your [Google Maps API key](https://developers.google.com/maps/documentation/javascript/get-api-key), styles (e.g. setting width and height), and any [MapOptions](https://developers.google.com/maps/documentation/javascript/reference/map#MapOptions) to configure your map ([see this](https://github.com/inocan-group/vue3-google-map/blob/develop/src/components/GoogleMap.vue#L36-L230) for all the supported `MapOptions`).\nOther map features can be added to your map by passing map subcomponents ([Marker](#marker), [Polyline](#polyline), [Polygon](#polygon), [Rectangle](#rectangle), [Circle](#circle), [InfoWindow](#info-window), [CustomMarker](#custom-marker), [CustomControl](#custom-control), or [MarkerCluster](#marker-cluster)) to the default slot of the `GoogleMap` component.\n\nThe [the following events](https://developers.google.com/maps/documentation/javascript/reference/map#Map-Events) will be emitted by the `GoogleMap` component and can be listened to by using `@event_name`.\n\n```vue\n\u003cscript setup\u003e\nimport { GoogleMap, Marker } from 'vue3-google-map'\n\nconst center = { lat: 40.689247, lng: -74.044502 }\n\u003c/script\u003e\n\n\u003ctemplate\u003e\n  \u003cGoogleMap\n  api-key=\"YOUR_GOOGLE_MAPS_API_KEY\"\n  style=\"width: 100%; height: 500px\"\n  :center=\"center\"\n  :zoom=\"15\"\n  \u003e\n    \u003cMarker :options=\"{ position: center }\" /\u003e\n  \u003c/GoogleMap\u003e\n\u003c/template\u003e\n```\n\n## Components\n\nThis library is intended to be used in a composable fashion. Therefore you will find yourself using nested components to build your map rather than just a complicated inline format.\n\nThe main mapping component is `GoogleMap`, however the following components are available at your disposal:\n\n- [AdvancedMarker](#advanced-marker)\n- [Marker](#marker)\n- [Polyline](#polyline)\n- [Polygon](#polygon)\n- [Rectangle](#rectangle)\n- [Circle](#circle)\n- [InfoWindow](#info-window)\n- [CustomMarker](#custom-marker)\n- [CustomControl](#custom-control)\n- [MarkerCluster](#marker-cluster)\n\n### Advanced Marker\n\nUse the `AdvancedMarker` component to draw markers, drop pins or any custom icons on a map. `AdvancedMarker` is the new version offered by google when deprecated the `Marker` component ([read more here](https://developers.google.com/maps/deprecations#googlemapsmarker_in_the_deprecated_as_of_february_2024)).\n\nIn order to use the `AdvancedMarker` component is necessary to specify a MapId on declaring the `GoogleMap` component ([see more here](https://developers.google.com/maps/documentation/javascript/advanced-markers/start#create_a_map_id)).\n\n#### Options\n\nYou can pass a [AdvancedMarkerElementOptions](https://developers.google.com/maps/documentation/javascript/reference/advanced-markers#AdvancedMarkerElementOptions) object to the `options` prop to configure your marker.\n\nYou can also pass a [PinElementOptions interface](https://developers.google.com/maps/documentation/javascript/reference/advanced-markers#PinElementOptions) object to custumize pin used by the marker.\n\n```vue\n\u003cscript setup\u003e\nimport { GoogleMap, AdvancedMarker } from 'vue3-google-map'\n\nconst center = { lat: 40.689247, lng: -74.044502 }\nconst markerOptions = { position: center, label: 'L', title: 'LADY LIBERTY' }\nconst pinOptions = { background: '#FBBC04' }\n\u003c/script\u003e\n\n\u003ctemplate\u003e\n  \u003cGoogleMap\n    api-key=\"YOUR_GOOGLE_MAPS_API_KEY\"\n    mapId=\"DEMO_MAP_ID\"\n    style=\"width: 100%; height: 500px\"\n    :center=\"center\"\n    :zoom=\"15\"\n  \u003e\n    \u003cAdvancedMarker :options=\"markerOptions\" :pin-options=\"pinOptions\"/\u003e\n  \u003c/GoogleMap\u003e\n\u003c/template\u003e\n```\n\n#### Events\n\nYou can listen for [the following events](https://developers.google.com/maps/documentation/javascript/reference/advanced-markers#AdvancedMarkerElement-Events) on the `AdvancedMarker` component.\n\n### Marker\n\nUse the `Marker` component to draw markers, drop pins or any custom icons on a map.\n\n#### Options\n\nYou can pass a [MarkerOptions](https://developers.google.com/maps/documentation/javascript/reference/marker#MarkerOptions) object to the `options` prop to configure your marker.\n\n```vue\n\u003cscript setup\u003e\nimport { GoogleMap, Marker } from 'vue3-google-map'\n\nconst center = { lat: 40.689247, lng: -74.044502 }\nconst markerOptions = { position: center, label: 'L', title: 'LADY LIBERTY' }\n\u003c/script\u003e\n\n\u003ctemplate\u003e\n  \u003cGoogleMap\n    api-key=\"YOUR_GOOGLE_MAPS_API_KEY\"\n    style=\"width: 100%; height: 500px\"\n    :center=\"center\"\n    :zoom=\"15\"\n  \u003e\n    \u003cMarker :options=\"markerOptions\" /\u003e\n  \u003c/GoogleMap\u003e\n\u003c/template\u003e\n```\n\n#### Events\n\nYou can listen for [the following events](https://developers.google.com/maps/documentation/javascript/reference/marker#Marker-Events) on the `Marker` component.\n\n### Polyline\n\nUse the `Polyline` component to draw paths and arbitrary shapes on a map.\n\n#### Options\n\nYou can pass a [PolylineOptions](https://developers.google.com/maps/documentation/javascript/reference/polygon#PolylineOptions) object to the `options` prop to configure your polyline.\n\n```vue\n\u003cscript setup\u003e\nimport { GoogleMap, Polyline } from 'vue3-google-map'\n\nconst center = { lat: 0, lng: -180 }\nconst flightPlanCoordinates = [\n  { lat: 37.772, lng: -122.214 },\n  { lat: 21.291, lng: -157.821 },\n  { lat: -18.142, lng: 178.431 },\n  { lat: -27.467, lng: 153.027 },\n]\nconst flightPath = {\n  path: flightPlanCoordinates,\n  geodesic: true,\n  strokeColor: '#FF0000',\n  strokeOpacity: 1.0,\n  strokeWeight: 2,\n}\n\u003c/script\u003e\n\n\u003ctemplate\u003e\n  \u003cGoogleMap\n    api-key=\"YOUR_GOOGLE_MAPS_API_KEY\"\n    style=\"width: 100%; height: 500px\"\n    :center=\"center\"\n    :zoom=\"3\"\n  \u003e\n    \u003cPolyline :options=\"flightPath\" /\u003e\n  \u003c/GoogleMap\u003e\n\u003c/template\u003e\n```\n\n#### Events\n\nYou can listen for [the following events](https://developers.google.com/maps/documentation/javascript/reference/polygon#Polyline-Events) on the `Polyline` component.\n\n### Polygon\n\nUse the `Polygon` component to draw polgons (arbitrary number of sides) on a map.\n\n#### Options\n\nYou can pass a [PolylgonOptions](https://developers.google.com/maps/documentation/javascript/reference/polygon#PolygonOptions) object to the `options` prop to configure your polyline.\n\n```vue\n\u003cscript setup\u003e\nimport { GoogleMap, Polygon } from 'vue3-google-map'\n\nconst center = { lat: 24.886, lng: -70.268 }\nconst triangleCoords = [\n  { lat: 25.774, lng: -80.19 },\n  { lat: 18.466, lng: -66.118 },\n  { lat: 32.321, lng: -64.757 },\n  { lat: 25.774, lng: -80.19 },\n]\nconst bermudaTriangle = {\n  paths: triangleCoords,\n  strokeColor: '#FF0000',\n  strokeOpacity: 0.8,\n  strokeWeight: 2,\n  fillColor: '#FF0000',\n  fillOpacity: 0.35,\n}\n\u003c/script\u003e\n\n\u003ctemplate\u003e\n  \u003cGoogleMap\n    api-key=\"YOUR_GOOGLE_MAPS_API_KEY\"\n    style=\"width: 100%; height: 500px\"\n    :center=\"center\"\n    :zoom=\"5\"\n  \u003e\n    \u003cPolygon :options=\"bermudaTriangle\" /\u003e\n  \u003c/GoogleMap\u003e\n\u003c/template\u003e\n```\n\n#### Events\n\nYou can listen for [the following events](https://developers.google.com/maps/documentation/javascript/reference/polygon#Polygon-Events) on the `Polygon` component.\n\n### Rectangle\n\nUse the `Rectangle` component to draw simple rectangles on a map.\n\n#### Options\n\nYou can pass a [RectangleOptions](https://developers.google.com/maps/documentation/javascript/reference/polygon#RectangleOptions) object to the `options` prop to configure your rectangle.\n\n```vue\n\u003cscript setup\u003e\nimport { GoogleMap, Rectangle } from 'vue3-google-map'\n\nconst center = { lat: 33.678, lng: -116.243 }\nconst rectangle = {\n  strokeColor: '#FF0000',\n  strokeOpacity: 0.8,\n  strokeWeight: 2,\n  fillColor: '#FF0000',\n  fillOpacity: 0.35,\n  bounds: {\n    north: 33.685,\n    south: 33.671,\n    east: -116.234,\n    west: -116.251,\n  },\n}\n\u003c/script\u003e\n\n\u003ctemplate\u003e\n  \u003cGoogleMap\n    api-key=\"YOUR_GOOGLE_MAPS_API_KEY\"\n    style=\"width: 100%; height: 500px\"\n    mapTypeId=\"terrain\"\n    :center=\"center\"\n    :zoom=\"11\"\n  \u003e\n    \u003cRectangle :options=\"rectangle\" /\u003e\n  \u003c/GoogleMap\u003e\n\u003c/template\u003e\n```\n\n#### Events\n\nYou can listen for [the following events](https://developers.google.com/maps/documentation/javascript/reference/polygon#Rectangle-Events) on the `Rectangle` component.\n\n### Circle\n\nUse the `Circle` component to draw circles on a map.\n\n#### Options\n\nYou can pass a [CircleOptions](https://developers.google.com/maps/documentation/javascript/reference/polygon#CircleOptions) object to the `options` prop to configure your circle.\n\n```vue\n\u003cscript setup\u003e\nimport { GoogleMap, Circle } from 'vue3-google-map'\n\nconst center = { lat: 37.09, lng: -95.712 }\nconst cities = {\n  chicago: {\n    center: { lat: 41.878, lng: -87.629 },\n    population: 2714856,\n  },\n  newyork: {\n    center: { lat: 40.714, lng: -74.005 },\n    population: 8405837,\n  },\n  losangeles: {\n    center: { lat: 34.052, lng: -118.243 },\n    population: 3857799,\n  },\n  vancouver: {\n    center: { lat: 49.25, lng: -123.1 },\n    population: 603502,\n  },\n}\n\nconst circles = {}\n\nfor (const key in cities) {\n  circles[key] = {\n    center: cities[key].center,\n    radius: Math.sqrt(cities[key].population) * 100,\n    strokeColor: '#FF0000',\n    strokeOpacity: 0.8,\n    strokeWeight: 2,\n    fillColor: '#FF0000',\n    fillOpacity: 0.35,\n  }\n}\n\u003c/script\u003e\n\n\u003ctemplate\u003e\n  \u003cGoogleMap\n    api-key=\"YOUR_GOOGLE_MAPS_API_KEY\"\n    style=\"width: 100%; height: 500px\"\n    mapTypeId=\"terrain\"\n    :center=\"center\"\n    :zoom=\"4\"\n  \u003e\n    \u003cCircle v-for=\"circle in circles\" :options=\"circle\" /\u003e\n  \u003c/GoogleMap\u003e\n\u003c/template\u003e\n```\n\n#### Events\n\nYou can listen for [the following events](https://developers.google.com/maps/documentation/javascript/reference/polygon#Circle-Events) on the `Circle` component.\n\n### Info Window\n\nUse the `InfoWindow` component to display content in a popup window above the map, at a given location.\n\n#### Options\n\nYou can pass an [InfoWindowOptions](https://developers.google.com/maps/documentation/javascript/reference#InfoWindowOptions) object to the `options` prop to configure your info window. Note that you can optionally pass your content to the default slot of the `InfoWindow` component.\n\n```vue\n\u003cscript setup\u003e\nimport { GoogleMap, InfoWindow } from 'vue3-google-map'\n\nconst center = { lat: -33.9, lng: 151.1 }\n\u003c/script\u003e\n\n\u003ctemplate\u003e\n  \u003cGoogleMap\n    api-key=\"YOUR_GOOGLE_MAPS_API_KEY\"\n    style=\"width: 100%; height: 500px\"\n    :center=\"center\"\n    :zoom=\"10\"\n  \u003e\n    \u003cInfoWindow :options=\"{ position: center, content: 'Hello World!' }\" /\u003e\n    \u003cInfoWindow :options=\"{ position: { lat: center.lat, lng: 150.8 } }\"\u003e\n      Content passed through slot\n    \u003c/InfoWindow\u003e\n  \u003c/GoogleMap\u003e\n\u003c/template\u003e\n```\n\n#### Use with Marker\n\nYou can nest the `InfoWindow` component inside the `Marker` component to display an info window when the marker is clicked.\n\n```vue\n\u003cscript setup\u003e\nimport { GoogleMap, Marker, InfoWindow } from 'vue3-google-map'\n\nconst center = { lat: -25.363, lng: 131.044 }\n\u003c/script\u003e\n\n\u003ctemplate\u003e\n  \u003cGoogleMap\n    api-key=\"YOUR_GOOGLE_MAPS_API_KEY\"\n    style=\"width: 100%; height: 500px\"\n    :center=\"center\"\n    :zoom=\"4\"\n  \u003e\n    \u003cMarker :options=\"{ position: center }\"\u003e\n      \u003cInfoWindow\u003e\n        \u003cdiv id=\"content\"\u003e\n          \u003cdiv id=\"siteNotice\"\u003e\u003c/div\u003e\n          \u003ch1 id=\"firstHeading\" class=\"firstHeading\"\u003eUluru\u003c/h1\u003e\n          \u003cdiv id=\"bodyContent\"\u003e\n            \u003cp\u003e\u003cb\u003eUluru\u003c/b\u003e, also referred to as \u003cb\u003eAyers Rock\u003c/b\u003e, is a large\n            sandstone rock formation in the southern part of the\n            Northern Territory, central Australia. It lies 335\u0026#160;km (208\u0026#160;mi)\n            south west of the nearest large town, Alice Springs; 450\u0026#160;km\n            (280\u0026#160;mi) by road. Kata Tjuta and Uluru are the two major\n            features of the Uluru - Kata Tjuta National Park. Uluru is\n            sacred to the Pitjantjatjara and Yankunytjatjara, the\n            Aboriginal people of the area. It has many springs, waterholes,\n            rock caves and ancient paintings. Uluru is listed as a World\n            Heritage Site.\u003c/p\u003e\n            \u003cp\u003eAttribution: Uluru, \u003ca href=\"https://en.wikipedia.org/w/index.php?title=Uluru\u0026oldid=297882194\"\u003e\n            https://en.wikipedia.org/w/index.php?title=Uluru\u003c/a\u003e\n            (last visited June 22, 2009).\u003c/p\u003e\n          \u003c/div\u003e\n        \u003c/div\u003e\n      \u003c/InfoWindow\u003e\n    \u003c/Marker\u003e\n  \u003c/GoogleMap\u003e\n\u003c/template\u003e\n```\n\n#### Open and close the Info Window\n\nYou can use `v-model` to manage the state of the info window programmatically or to know whether it's open or closed\n\n```vue\n\u003cscript setup\u003e\nimport { ref, watch } from 'vue';\nimport { GoogleMap, Marker, InfoWindow } from 'vue3-google-map';\n\nconst center = { lat: -25.363, lng: 131.044 };\nconst infowindow = ref(true); // Will be open when mounted\n\nwatch(infowindow, (v) =\u003e {\n  alert('infowindow has been ' + (v ? 'opened' : 'closed'));\n});\n\u003c/script\u003e\n\n\u003ctemplate\u003e\n  \u003cGoogleMap\n    api-key=\"YOUR_GOOGLE_MAPS_API_KEY\"\n    style=\"width: 100%; height: 500px\"\n    :center=\"center\"\n    :zoom=\"4\"\n  \u003e\n    \u003cMarker :options=\"{ position: center }\"\u003e\n      \u003cInfoWindow v-model=\"infowindow\"\u003e\n        \u003cdiv id=\"content\"\u003eThis is the infowindow content\u003c/div\u003e\n      \u003c/InfoWindow\u003e\n    \u003c/Marker\u003e\n  \u003c/GoogleMap\u003e\n\u003c/template\u003e\n```\n\n#### Events\n\nYou can listen for [the following events](https://developers.google.com/maps/documentation/javascript/reference/info-window#InfoWindow-Events) on the `InfoWindow` component.\n\n### Custom Marker\n\nRegular markers can be customized a great deal but if you need to you can use the `CustomMarker` component and provide your own custom markup through it's `default` slot.\n\n#### Options\n\n| Parameter | Type     | Description                |\n| :-------- | :------- | :------------------------- |\n| `position` | `{ lat: number, lng: number}` | Sets the marker position. |\n| `anchorPoint` | `'CENTER' \\| 'TOP_CENTER' \\|'BOTTOM_CENTER' \\| 'LEFT_CENTER' \\| 'RIGHT_CENTER' \\| 'TOP_LEFT' \\| 'TOP_RIGHT' \\| 'BOTTOM_LEFT' \\| 'BOTTOM_RIGHT'` | Sets how the marker is anchored relative to it's `position` point. Default is `CENTER`. |\n| `offsetX` | `number` | Horizontal offset from the `position` point. |\n| `offsetY` | `number` | Vertical offset from the `position` point. |\n| `zIndex` | `number` | `z-index` value of the marker. |\n\n```vue\n\u003cscript setup\u003e\nimport { GoogleMap, CustomMarker } from 'vue3-google-map'\n\nconst center = { lat: 52.36834, lng: 4.88635 }\n\u003c/script\u003e\n\n\u003ctemplate\u003e\n  \u003cGoogleMap\n    api-key=\"YOUR_GOOGLE_MAPS_API_KEY\"\n    style=\"width: 100%; height: 500px\"\n    :center=\"center\"\n    :zoom=\"15\"\n  \u003e\n    \u003cCustomMarker :options=\"{ position: center, anchorPoint: 'BOTTOM_CENTER' }\"\u003e\n      \u003cdiv style=\"text-align: center\"\u003e\n        \u003cdiv style=\"font-size: 1.125rem\"\u003eVuejs Amsterdam\u003c/div\u003e\n        \u003cimg src=\"https://vuejs.org/images/logo.png\" width=\"50\" height=\"50\" style=\"margin-top: 8px\" /\u003e\n      \u003c/div\u003e\n    \u003c/CustomMarker\u003e\n  \u003c/GoogleMap\u003e\n\u003c/template\u003e\n```\n\n### Custom Control\n\nUse the `CustomControl` component to add custom buttons/controls to your map.\n\n#### Usage\n\nYou can define the markup of your custom control in the `default` slot of the `CustomControl` component. The component itself takes two props:\n\n- `position`: Defines the position of your custom control on the map. Its value must be one of the [ControlPosition](https://developers.google.com/maps/documentation/javascript/reference/control#ControlPosition) constants.\n- `index` (optional): Controls the order of placement for custom controls that occupy the same position.\n\nRefer to the [Google Maps documentation](https://developers.google.com/maps/documentation/javascript/controls#CustomControls) on custom controls positioning.\n\n```vue\n\u003cscript setup\u003e\nimport { GoogleMap, CustomControl } from 'vue3-google-map'\n\nconst center = { lat: 35, lng: -95 }\nconst sayHi = () =\u003e alert('Hi!')\n\u003c/script\u003e\n\n\u003ctemplate\u003e\n  \u003cGoogleMap\n    api-key=\"YOUR_GOOGLE_MAPS_API_KEY\"\n    style=\"width: 100%; height: 500px\"\n    :center=\"center\"\n    :zoom=\"13\"\n  \u003e\n    \u003cCustomControl position=\"BOTTOM_CENTER\"\u003e\n      \u003cbutton class=\"custom-btn\" @click=\"sayHi\"\u003e👋\u003c/button\u003e\n    \u003c/CustomControl\u003e\n  \u003c/GoogleMap\u003e\n\u003c/template\u003e\n\n\u003cstyle scoped\u003e\n.custom-btn {\n  box-sizing: border-box;\n  background: white;\n  height: 40px;\n  width: 40px;\n  border-radius: 2px;\n  border: 0px;\n  margin: 10px;\n  padding: 0px;\n  font-size: 1.25rem;\n  text-transform: none;\n  appearance: none;\n  cursor: pointer;\n  user-select: none;\n  box-shadow: rgba(0, 0, 0, 0.3) 0px 1px 4px -1px;\n  overflow: hidden;\n}\n\u003c/style\u003e\n```\n\n### Marker Cluster\n\nUse the `MarkerCluster` component to display a large number of markers on a map. It will combine markers of close proximity into clusters, and simplify the display of markers on the map. Can be used with the `Marker` or `CustomMarker` components.\n\n#### Usage\n\nSimply pass your `Marker`/`CustomMarker`(s) in the `default` slot of the `MarkerCluster` component.\n\n```vue\n\u003cscript setup\u003e\nimport { GoogleMap, Marker, MarkerCluster } from 'vue3-google-map'\n\nconst center = { lat: -28.024, lng: 140.887 }\n\nconst locations = [\n  { lat: -31.56391, lng: 147.154312 },\n  { lat: -33.718234, lng: 150.363181 },\n  { lat: -33.727111, lng: 150.371124 },\n  { lat: -33.848588, lng: 151.209834 },\n  { lat: -33.851702, lng: 151.216968 },\n  { lat: -34.671264, lng: 150.863657 },\n  { lat: -35.304724, lng: 148.662905 },\n  { lat: -36.817685, lng: 175.699196 },\n  { lat: -36.828611, lng: 175.790222 },\n  { lat: -37.75, lng: 145.116667 },\n  { lat: -37.759859, lng: 145.128708 },\n  { lat: -37.765015, lng: 145.133858 },\n  { lat: -37.770104, lng: 145.143299 },\n  { lat: -37.7737, lng: 145.145187 },\n  { lat: -37.774785, lng: 145.137978 },\n  { lat: -37.819616, lng: 144.968119 },\n  { lat: -38.330766, lng: 144.695692 },\n  { lat: -39.927193, lng: 175.053218 },\n  { lat: -41.330162, lng: 174.865694 },\n  { lat: -42.734358, lng: 147.439506 },\n  { lat: -42.734358, lng: 147.501315 },\n  { lat: -42.735258, lng: 147.438 },\n  { lat: -43.999792, lng: 170.463352 },\n]\n\u003c/script\u003e\n\n\u003ctemplate\u003e\n  \u003cGoogleMap\n    api-key=\"YOUR_GOOGLE_MAPS_API_KEY\"\n    style=\"width: 100%; height: 500px\"\n    :center=\"center\"\n    :zoom=\"3\"\n  \u003e\n    \u003cMarkerCluster\u003e\n      \u003cMarker\n        v-for=\"(location, i) in locations\"\n        :key=\"i\"\n        :options=\"{ position: location }\"\n      /\u003e\n    \u003c/MarkerCluster\u003e\n  \u003c/GoogleMap\u003e\n\u003c/template\u003e\n```\n\n#### Options\n\n`MarkerCluster` accepts an `options` prop (an object) where you can configure `algorithm`, `onClusterClick`, and `renderer` from the [MarkerClustererOptions](https://googlemaps.github.io/js-markerclusterer/interfaces/MarkerClustererOptions.html) interface. Note that all these options are completely optional but non-reactive.\n\n#### Events\n\nYou can listen for [the following events](https://googlemaps.github.io/js-markerclusterer/enums/MarkerClustererEvents.html) on the `MarkerCluster` component.\n\n### Heatmap Layer\n\nUse the `HeatmapLayer` component to depict the intensity of data at geographical points on the map. Make sure to include the `visualization` library in the `libraries` prop of the `GoogleMap` component.\n\n#### Options\n\nYou can pass a [HeatmapLayerOptions](https://developers.google.com/maps/documentation/javascript/reference/visualization#HeatmapLayerOptions) object to the `options` prop to configure your heatmap layer. Note that for convenience you can use [LatLngLiteral](https://developers.google.com/maps/documentation/javascript/reference/coordinates#LatLngLiteral)s if you wish for the locations.\n\n```vue\n\u003cscript setup\u003e\nimport { GoogleMap, HeatmapLayer } from 'vue3-google-map'\n\nconst sanFrancisco = { lat: 37.774546, lng: -122.433523 }\n\nconst heatmapData = [\n  { location: { lat: 37.782, lng: -122.447 }, weight: 0.5 },\n  { lat: 37.782, lng: -122.445 },\n  { location: { lat: 37.782, lng: -122.443 }, weight: 2 },\n  { location: { lat: 37.782, lng: -122.441 }, weight: 3 },\n  { location: { lat: 37.782, lng: -122.439 }, weight: 2 },\n  { lat: 37.782, lng: -122.437 },\n  { location: { lat: 37.782, lng: -122.435 }, weight: 0.5 },\n\n  { location: { lat: 37.785, lng: -122.447 }, weight: 3 },\n  { location: { lat: 37.785, lng: -122.445 }, weight: 2 },\n  { lat: 37.785, lng: -122.443 },\n  { location: { lat: 37.785, lng: -122.441 }, weight: 0.5 },\n  { lat: 37.785, lng: -122.439 },\n  { location: { lat: 37.785, lng: -122.437 }, weight: 2 },\n  { location: { lat: 37.785, lng: -122.435 }, weight: 3 },\n]\n\u003c/script\u003e\n\n\u003ctemplate\u003e\n  \u003cGoogleMap\n    api-key=\"YOUR_GOOGLE_MAPS_API_KEY\"\n    :libraries=\"['visualization']\"\n    style=\"width: 100%; height: 500px\"\n    :center=\"sanFrancisco\"\n    :zoom=\"13\"\n  \u003e\n    \u003cHeatmapLayer :options=\"{ data: heatmapData }\" /\u003e\n  \u003c/GoogleMap\u003e\n\u003c/template\u003e\n```\n\n## Advanced Usage\n\nThe basic components that `vue3-google-map` provides are fully reactive and will get you pretty far. Should you need to access the Google Maps API, however, the `GoogleMap` component exposes the following:\n\n- `ready`: A boolean indicating when the Google Maps script has been loaded. By this point the map instance has been created, the API is ready for use and event listeners have been set up on the map.\n- `map`: The [Map](https://developers.google.com/maps/documentation/javascript/reference/map#Map) class instance.\n- `api`: The [Google Maps API](https://developers.google.com/maps/documentation/javascript/reference).\n- `mapTilesLoaded`: A boolean indicating when the map tiles have been fully loaded.\n\nIn addition, most of the subcomponents expose their instance should you need it:\n\n- `Marker` exposes `marker` (a [Marker](https://developers.google.com/maps/documentation/javascript/reference/marker#Marker) class instance).\n- `Polyline` exposes `polyline` (a [Polyline](https://developers.google.com/maps/documentation/javascript/reference/polygon#Polyline) class instance).\n- `Polygon` exposes `polygon` (a [Polygon](https://developers.google.com/maps/documentation/javascript/reference/polygon#Polygon) class instance).\n- `Rectangle` exposes `rectangle` (a [Rectangle](https://developers.google.com/maps/documentation/javascript/reference/polygon#Rectangle) class instance).\n- `Circle` exposes `circle` (a [Circle](https://developers.google.com/maps/documentation/javascript/reference/polygon#Circle) class instance).\n- `InfoWindow` exposes `infoWindow` (an [InfoWindow](https://developers.google.com/maps/documentation/javascript/reference/info-window#InfoWindow) class instance).\n- `MarkerCluster` exposes `markerCluster` (a [MarkerClusterer](https://googlemaps.github.io/js-markerclusterer/classes/MarkerClusterer.html) class instance).\n- `HeatmapLayer` exposes `heatmapLayer` (a [HeatmapLayer](https://developers.google.com/maps/documentation/javascript/reference/visualization#HeatmapLayer) class instance).\n\n### Usage Patterns\n\n```vue\n\u003cscript setup\u003e\nimport { ref, computed, watch } from 'vue'\nimport { GoogleMap } from 'vue3-google-map'\n\nconst mapRef = ref(null)\n\n// First pattern: compute some value using the API or map instance when \"ready\"\nconst markerIcon = computed(() =\u003e mapRef.value?.ready\n  ? {\n    url: /* icon image url */,\n    scaledSize: new mapRef.value.api.Size(20, 20)\n  }\n  : null)\n\n// Second pattern: watch for \"ready\" then do something with the API or map instance\nwatch(() =\u003e mapRef.value?.ready, (ready) =\u003e {\n  if (!ready) return\n\n  // do something with the api using `mapRef.value.api`\n  // or with the map instance using `mapRef.value.map`\n})\n\u003c/script\u003e\n\n\u003ctemplate\u003e\n  \u003cGoogleMap ref=\"mapRef\"\u003e\n    \u003ctemplate #default=\"{ ready, api, map, mapTilesLoaded }\"\u003e\n      \u003c!-- Third pattern: Here you have access to the API and map instance.\n      \"ready\" is a boolean that indicates when the Google Maps script\n      has been loaded and the api and map instance are ready to be used --\u003e\n    \u003c/template\u003e\n  \u003c/GoogleMap\u003e\n\u003c/template\u003e\n```\n\nExample:\n\n```vue\n\u003cscript setup\u003e\nimport { ref, computed, watch } from 'vue'\nimport { GoogleMap } from 'vue3-google-map'\n\nconst mapRef = ref(null)\nconst center = { lat: 0, lng: 0 }\n\nconst _lng = ref(0)\nconst lng = computed({\n  get: () =\u003e _lng.value,\n  set: v =\u003e {\n    if (!Number.isFinite(v)) {\n      _lng.value = 0\n    } else if (v \u003e 180) {\n      _lng.value = 180\n    } else if (v \u003c -180) {\n      _lng.value = -180\n    } else {\n      _lng.value = v\n    }\n  },\n})\n\nwatch([() =\u003e mapRef.value?.ready, lng], ([ready, lng]) =\u003e {\n  if (!ready)\n    return\n\n  mapRef.value.map.panTo({ lat: 0, lng })\n})\n\u003c/script\u003e\n\n\u003ctemplate\u003e\n  \u003cGoogleMap\n    ref=\"mapRef\"\n    api-key=\"YOUR_GOOGLE_MAPS_API_KEY\"\n    class=\"map\"\n    :center=\"center\"\n    :zoom=\"2\"\n  /\u003e\n  \u003clabel for=\"lng\"\u003eLongitude\u003c/label\u003e\n  \u003cinput v-model.number=\"lng\" id=\"lng\" type=\"number\" min=\"-180\" max=\"180\" step=\"10\" /\u003e\n\u003c/template\u003e\n\n\u003cstyle scoped\u003e\n.map {\n  position: relative;\n  width: 100%;\n  height: 500px;\n}\n\n.map::after {\n  position: absolute;\n  content: '';\n  width: 1px;\n  height: 100%;\n  top: 0;\n  left: 50%;\n  background: red;\n}\n\nlabel {\n  font-weight: 500;\n}\n\ninput[type='number'] {\n  margin-top: 20px;\n  margin-left: 10px;\n  outline: 1px solid #ccc;\n  border-radius: 4px;\n}\n\u003c/style\u003e\n```\n\n### Loading the Google Maps API script externally\n\nBy default you would pass your API key as a prop to the `GoogleMap` component and it handles the loading of the Google Maps API script for you. There are cases, however, where you might want to load the script yourself. For example, you might be using other Google Maps components or your Vue app might be a part of a larger app that uses the Google Maps API elsewhere. In these cases you can use the `apiPromise` prop to pass a promise that resolves to the Google Maps API global `google` object.\n\n```vue\n\u003cscript setup\u003e\nimport { GoogleMap, Marker } from 'vue3-google-map';\nimport { Loader } from '@googlemaps/js-api-loader';\n\nconst loader = new Loader({\n  apiKey: '',\n  version: 'weekly',\n  libraries: ['places'],\n});\n\nconst apiPromise = loader.load();\n\nconst center = { lat: 40.689247, lng: -74.044502 };\n\u003c/script\u003e\n\n\u003ctemplate\u003e\n  \u003cGoogleMap\n    :api-promise=\"apiPromise\"\n    style=\"width: 100%; height: 500px\"\n    :center=\"center\"\n    :zoom=\"15\"\n  \u003e\n    \u003cMarker :options=\"{ position: center }\" /\u003e\n  \u003c/GoogleMap\u003e\n\u003c/template\u003e\n```\n\n## Contribution\n\nAll contributions are welcome. Before submitting a PR though it would be nice if you created an issue explaining what you want to acheive and why.\n\n## License\n\n[MIT](http://opensource.org/licenses/MIT)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Finocan-group%2Fvue3-google-map","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Finocan-group%2Fvue3-google-map","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Finocan-group%2Fvue3-google-map/lists"}