{"id":13937934,"url":"https://github.com/eregnier/vue2-gmap-custom-marker","last_synced_at":"2025-04-08T11:09:56.479Z","repository":{"id":50885848,"uuid":"120316866","full_name":"eregnier/vue2-gmap-custom-marker","owner":"eregnier","description":"vue google map custom marker component","archived":false,"fork":false,"pushed_at":"2024-10-24T21:46:58.000Z","size":2901,"stargazers_count":136,"open_issues_count":1,"forks_count":27,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-03-28T03:07:49.220Z","etag":null,"topics":["custom-marker","map","slot","vue"],"latest_commit_sha":null,"homepage":"","language":"Vue","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/eregnier.png","metadata":{"files":{"readme":"README.md","changelog":null,"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":"2018-02-05T14:38:52.000Z","updated_at":"2025-03-11T23:17:50.000Z","dependencies_parsed_at":"2024-11-08T08:34:02.406Z","dependency_job_id":"754561e9-328b-496b-9b67-2fa132d9cccc","html_url":"https://github.com/eregnier/vue2-gmap-custom-marker","commit_stats":{"total_commits":91,"total_committers":15,"mean_commits":6.066666666666666,"dds":0.4065934065934066,"last_synced_commit":"abc6b2a3217791f3f016f9f3d569154f8506745b"},"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/eregnier%2Fvue2-gmap-custom-marker","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/eregnier%2Fvue2-gmap-custom-marker/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/eregnier%2Fvue2-gmap-custom-marker/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/eregnier%2Fvue2-gmap-custom-marker/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/eregnier","download_url":"https://codeload.github.com/eregnier/vue2-gmap-custom-marker/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247730068,"owners_count":20986404,"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":["custom-marker","map","slot","vue"],"created_at":"2024-08-07T23:04:07.041Z","updated_at":"2025-04-08T11:09:56.457Z","avatar_url":"https://github.com/eregnier.png","language":"Vue","funding_links":["https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick\u0026hosted_button_id=UV5GR9QWPAEMS"],"categories":["UI Components [🔝](#readme)","Vue","Components \u0026 Libraries"],"sub_categories":["UI Components"],"readme":"# vue2-gmap-custom-marker\n\n[\n ![npm](https://img.shields.io/npm/v/vue2-gmap-custom-marker.svg)\n ![npm](https://img.shields.io/npm/dm/vue2-gmap-custom-marker.svg)\n](https://www.npmjs.com/package/vue2-gmap-custom-marker)\n![vue2](https://img.shields.io/badge/vue-2.x-brightgreen.svg)\n\nThis component makes it simple to display some custom vue js reactive components on a google map.\n\n🆕 There is a plugin package for [gmap vue 3 here](https://github.com/eregnier/vue3-gmap-custom-marker)\n\n## ⚠️ important note\n\nThis project is originally a plugin for [vue-google-maps](https://github.com/xkjyeah/vue-google-maps).\nNow this project seems no more maintained and a maintained [fork](https://github.com/diegoazh/gmap-vue) has started, As this is a fork, this plugin should work on it seeminglessly. The demo for this project started using this project on 2020-11-10.\nread [this](https://github.com/xkjyeah/vue-google-maps#attention) for more information about this.\n\nFor legacy projects using vue-google-maps, you have to stick to this projects tag [5.6.2](https://github.com/eregnier/vue2-gmap-custom-marker/releases/tag/5.6.2).\n\nYou might force the 5.6.2 version in your package.json for this plugin to keep compatibility until you want to switch to gmap-vue.\n\nFor those that use clusters with this plugin, the new release might break things. For this plugin website demo, I had to create [this folder](https://github.com/eregnier/vue2-gmap-custom-marker-demo/tree/master/public/images) that contains clusters images the clusters uses in vue-gmap. In case you have troubles with this, just create the same folder with the images from the link above in public foler of your vue project (or served in `/images/m1.png` for exemples depending on you webserver configuration.)\n\n## Demo\n\n[Demo](https://vue2-gmap-custom-marker-demo.pages.dev/)\n\nYou might look at this [demo code repository](https://github.com/eregnier/vue2-gmap-custom-marker-demo) for features usage and complete exemple around this plugin.\n\n## Features\n\n* Display reactive custom html into markers on google map using slot system\n\n* Live property change allows simple interaction with coordonates and zindex of html marker element\n\n* Google map clustering support (see demo for exemple)\n\n* Simple positionning system for marker around the origin point\n\n* Specific markers offset X and Y for more control about html element display\n\n* Almost all API of the component is optional, just start with lon, lat property\n\n* Work (around) with nuxt with [this trick](https://github.com/eregnier/vue2-gmap-custom-marker/issues/15#issuecomment-544203425)\n\n## Example\n\n![custom markers on vue google map](sample.png)\n\n## Installation\n\nInstall the package from [npm](https://www.npmjs.com/package/vue2-gmap-custom-marker):\n\n`npm i vue2-gmap-custom-marker`\n\n## Basic Usage\n\nImport the component and use it in the components object.\n\n```javascript\nimport GmapCustomMarker from 'vue2-gmap-custom-marker';\n\nexport default = {\n  [...],\n  components: {\n      'gmap-custom-marker': GmapCustomMarker\n  },\n  [...]\n}\n```\n\nUse the custom marker inside the map component. Add HTML or other Vue components inside the custom marker to be rendered on the map.\n\n```vue\n\u003cGmapMap\u003e\n  \u003cgmap-custom-marker :marker=\"marker\"\u003e\n    \u003cimg src=\"http://lorempixel.com/800/600/nature/\" /\u003e\n    \u003cmy-component\u003e\u003c/my-component\u003e\n  \u003c/gmap-custom-marker\u003e\n\u003c/GmapMap\u003e\n\n\u003cscript\u003e\nexport default = {\n  [...],\n  data() {\n    return {\n      marker: {\n        lat: 50.60229509638775,\n        lng: 3.0247059387528408\n      }\n    }\n  [...]\n}\n\u003c/script\u003e\n```\n\nUse the `@click` event with the `.native` modifier to bind a function to the clicking of the custom marker.\n\n```vue\n\u003cGmapMap\u003e\n  \u003cgmap-custom-marker\n    :marker=\"{ lat: 50.60229509638775, lng: 3.0247059387528408 }\"\n    @click.native=\"someFunction\"\n  \u003e\n    \u003cimg src=\"http://lorempixel.com/800/600/nature/\" /\u003e\n    \u003cmy-component\u003e\u003c/my-component\u003e\n  \u003c/gmap-custom-marker\u003e\n\u003c/GmapMap\u003e\n```\n\nSpecify the alignment of the marker with the `alignment` prop. Accepts 13 values: `top`, `bottom`, `left`, `right`, `center`, `topleft` | `lefttop`, `topright` | `righttop`, `bottomleft` | `leftbottom`, `bottomright` | `rightbottom`. Defines the alignment of the marker relative to the lat/lng specified, e.g. `bottomright` - the marker will be below and on the right of the location.\n\n ```vue\n \u003cgmap-custom-marker\n  :marker=\"marker\"\n  alignment=\"bottomright\"\n\u003e\n\u003c/gmap-custom-marker\u003e\n ```\n\n ![custom markers on vue google map](alignment.png)\n\nManually specify an offset value for the marker in pixels with prop `offsetX` | `offsetY`. A positive `offsetX` moves the marker further right, and a positive `offsetY` moves the marker further down the page. Can be used with the `alignment` prop.\n\n ```vue\n \u003cgmap-custom-marker\n  :marker=\"marker\"\n  :offsetX=\"-10\"\n  :offsetY=\"17.5\"\n\u003e\n\u003c/gmap-custom-marker\u003e\n```\n\n## Clusters\n\nThis component supports cluster markers and works like normal vue gmap clusters (since v5.4.3)\n\nYou can use cluster marker folowing the guide below:\n\n* Install *marker-clusterer-plus* : `npm i --save marker-clusterer-plus`\n\n* Use plugin cluster in you main.js or so (where vue and plugins are initialized)\n\n```javascript\n// Using Cluster requires marker-clusterer-plus to be installed.\nimport GmapCluster from \"gmap-vue/dist/components/cluster\";\n\n// Note: the name \"cluster\" below is the one to use in the template tags\nVue.component(\"cluster\", GmapCluster);\n```\n\n* Wrap your custom markers in the gmap component\n\n```vue\n\u003cvue-gmap :center=\"markerCenter\" :zoom=\"10\" style=\"width: 100%\" @click=\"onMapClick\"\u003e\n    \u003ccluster\u003e\n        \u003cgmap-custom-marker :marker=\"marker\"\u003e\n            \u003cimg src=\"https://vuejs.org/images/logo.png\" /\u003e\n        \u003c/gmap-custom-marker\u003e\n    \u003c/cluster\u003e\n\u003cvue-gmap\u003e\n```\n\nAll markers into the cluster tag will be managed as a cluster automatically. That's all.\n\n## Reference\n\n**Prop**|**Type**|**Default**|**Description**|**Supported Values**\n:-----:|:-----:|:-----:|:-----:|:-----:\n`marker`|Object|`null`|Provide the latitude and longitude values that the marker should be displayed at. **Required**|Provide an Object with `lat` and `lng` properties. `{ lat: Number, lng: Number }`\n`offsetX`|Number|`0`|The number of pixels to move the marker by in the x-direction. Postive values move the marker to the right|Positive or negative number.\n`offsetY`|Number|`0`|The number of pixels to move the marker by in the y-direction. Postive values move the marker to down the page.|Positive or negative number.\n`alignment`|String|`top`|The alignment of the marker element relative to the location it is displayed. e.g. `bottomright` - the marker will be below and on the right of the location.|`top`, `bottom`, `left`, `right`, `center`, `topleft`  `lefttop`, `topright`, `righttop`, `bottomleft`, `leftbottom`, `bottomright`, `rightbottom`\n`zIndex`|Number|`50`| z-index of the marker. | Positive number.\n`nuxtMode`|Boolean|true| Avoid marker displacement on navigation in Nuxt. | `true`, `false`\n\n## Licence\n\n[MIT](https://en.wikipedia.org/wiki/MIT_License)\n\n## Support\n\nIf you want to support this plugin it is possible :smile: \n\n[![paypal](https://www.paypalobjects.com/en_US/i/btn/btn_donate_LG.gif)](https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick\u0026hosted_button_id=UV5GR9QWPAEMS)\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Feregnier%2Fvue2-gmap-custom-marker","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Feregnier%2Fvue2-gmap-custom-marker","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Feregnier%2Fvue2-gmap-custom-marker/lists"}