[
  {
    "path": ".gitignore",
    "content": ".idea/\nnode_modules/\nyarn.lock\n.env\n"
  },
  {
    "path": "LICENSE",
    "content": "MIT License\n\nCopyright (c) 2019 eric regnier\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.\n"
  },
  {
    "path": "README.md",
    "content": "# 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<GmapMap>\n  <gmap-custom-marker :marker=\"marker\">\n    <img src=\"http://lorempixel.com/800/600/nature/\" />\n    <my-component></my-component>\n  </gmap-custom-marker>\n</GmapMap>\n\n<script>\nexport default = {\n  [...],\n  data() {\n    return {\n      marker: {\n        lat: 50.60229509638775,\n        lng: 3.0247059387528408\n      }\n    }\n  [...]\n}\n</script>\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<GmapMap>\n  <gmap-custom-marker\n    :marker=\"{ lat: 50.60229509638775, lng: 3.0247059387528408 }\"\n    @click.native=\"someFunction\"\n  >\n    <img src=\"http://lorempixel.com/800/600/nature/\" />\n    <my-component></my-component>\n  </gmap-custom-marker>\n</GmapMap>\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 <gmap-custom-marker\n  :marker=\"marker\"\n  alignment=\"bottomright\"\n>\n</gmap-custom-marker>\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 <gmap-custom-marker\n  :marker=\"marker\"\n  :offsetX=\"-10\"\n  :offsetY=\"17.5\"\n>\n</gmap-custom-marker>\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<vue-gmap :center=\"markerCenter\" :zoom=\"10\" style=\"width: 100%\" @click=\"onMapClick\">\n    <cluster>\n        <gmap-custom-marker :marker=\"marker\">\n            <img src=\"https://vuejs.org/images/logo.png\" />\n        </gmap-custom-marker>\n    </cluster>\n<vue-gmap>\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&hosted_button_id=UV5GR9QWPAEMS)\n\n"
  },
  {
    "path": "gmap-custom-marker.vue",
    "content": "<template>\n  <div :style=\"{opacity: opacity}\">\n    <slot />\n  </div>\n</template>\n<script>\n  import * as VueGoogleMaps from \"gmap-vue\";\n  export default {\n    mixins: [VueGoogleMaps.MapElementMixin],\n    props: {\n      marker: {\n        type: Object,\n        default: undefined\n      },\n      offsetX: {\n        type: Number,\n        default: 0\n      },\n      offsetY: {\n        type: Number,\n        default: 0\n      },\n      alignment: {\n        type: String,\n        default: \"top\"\n      },\n      zIndex: {\n        type: Number,\n        default: 50\n      },\n      cssPosition: {\n        type: Boolean,\n        default: false\n      },\n      nuxtMode: {\n        type: Boolean,\n        default: false,\n      },\n    },\n    inject: {\n      $clusterPromise: {\n        default: null\n      }\n    },\n    beforeCreate (options) {\n      if (this.$clusterPromise) {\n        options.map = null;\n      }\n\n      return this.$clusterPromise;\n    },\n    methods: {\n      afterCreate (inst) {\n        if (this.$clusterPromise && !this.isMarkerAdded) {\n          this.$clusterPromise.then(co => {\n            co.addMarker(inst);\n            this.$clusterObject = co;\n            this.isMarkerAdded = true;\n          });\n        }\n      }\n    },\n    data () {\n      return {\n        opacity: 0.01\n      };\n    },\n    watch: {\n      marker (val) {\n        this.$mapPromise.then(map => this.$overlay.setPosition());\n      },\n      zIndex (val) {\n        if (this.$overlay) {\n          this.$overlay.repaint()\n        }\n      }\n    },\n    provide () {\n      const self = this;\n      return this.$mapPromise.then(map => {\n        class Overlay extends google.maps.OverlayView {\n          constructor(map) {\n            super();\n            this.setMap(map);\n            this.draw = () => this.repaint();\n            this.setPosition = () => this.repaint();\n          }\n          repaint () {\n            const div = self.$el;\n            if (self.nuxtMode && !div.offsetWidth && !div.offsetHeight) {\n              return;\n            }\n            const projection = this.getProjection();\n            if (projection && div) {\n              const posPixel = projection.fromLatLngToDivPixel(self.latLng);\n              let x, y;\n              switch (self.alignment) {\n                case \"top\":\n                  x = posPixel.x - div.offsetWidth / 2;\n                  y = posPixel.y - div.offsetHeight;\n                  break;\n                case \"bottom\":\n                  x = posPixel.x - div.offsetWidth / 2;\n                  y = posPixel.y;\n                  break;\n                case \"left\":\n                  x = posPixel.x - div.offsetWidth;\n                  y = posPixel.y - div.offsetHeight / 2;\n                  break;\n                case \"right\":\n                  x = posPixel.x;\n                  y = posPixel.y - div.offsetHeight / 2;\n                  break;\n                case \"center\":\n                  x = posPixel.x - div.offsetWidth / 2;\n                  y = posPixel.y - div.offsetHeight / 2;\n                  break;\n                case \"topleft\":\n                case \"lefttop\":\n                  x = posPixel.x - div.offsetWidth;\n                  y = posPixel.y - div.offsetHeight;\n                  break;\n                case \"topright\":\n                case \"righttop\":\n                  x = posPixel.x;\n                  y = posPixel.y - div.offsetHeight;\n                  break;\n                case \"bottomleft\":\n                case \"leftop\":\n                  x = posPixel.x - div.offsetWidth;\n                  y = posPixel.y;\n                  break;\n                case \"bottomright\":\n                case \"rightbottom\":\n                  x = posPixel.x;\n                  y = posPixel.y;\n                  break;\n                default:\n                  throw new Error(\"Invalid alignment type of custom marker!\");\n                  break;\n              }\n              if (self.cssPosition) {\n                div.style.transform = `translate(${x + self.offsetX}px, ${y + self.offsetY}px)`;\n              } else {\n                div.style.left = x + self.offsetX + \"px\";\n                div.style.top = y + self.offsetY + \"px\";\n              }\n              div.style[\"z-index\"] = self.zIndex;\n            }\n          }\n          onAdd () {\n            const div = self.$el;\n            const panes = this.getPanes();\n            div.style.position = \"absolute\";\n            div.style.display = \"inline-block\";\n            div.style.zIndex = self.zIndex;\n            panes.overlayLayer.appendChild(div);\n            panes.overlayMouseTarget.appendChild(div);\n            this.getDraggable = () => false;\n            this.getPosition = () => {\n              return new google.maps.LatLng(self.lat, self.lng);\n            };\n            self.afterCreate(this);\n          }\n          onRemove () {\n            if (self.$el) {\n              const ua = window.navigator.userAgent\n              const msie = ua.indexOf(\"MSIE \")\n              if (msie > 0 || !!ua.match(/Trident.*rv\\:11\\./)) {\n                self.$el.parentNode.removeChild(self.$el)\n              } else {\n                self.$el.remove();\n              }\n            }\n          }\n        }\n        this.$overlay = new Overlay(map);\n        setTimeout(() => {\n          if (this.$overlay) {\n            this.$overlay.repaint();\n            this.opacity = 1;\n          }\n        }, 100);\n      });\n    },\n    computed: {\n      lat () {\n        return parseFloat(\n          isNaN(this.marker.lat) ? this.marker.latitude : this.marker.lat\n        );\n      },\n      lng () {\n        return parseFloat(\n          isNaN(this.marker.lng) ? this.marker.longitude : this.marker.lng\n        );\n      },\n      latLng () {\n        if (this.marker instanceof google.maps.LatLng) {\n          return this.marker;\n        }\n        return new google.maps.LatLng(this.lat, this.lng);\n      }\n    },\n    destroyed () {\n      if (this.$clusterObject) {\n        this.$clusterObject.removeMarker(this.$overlay, true);\n      } else {\n\tif (this.$overlay) {\n          this.$overlay.setMap(null);\n          this.$overlay = undefined;\n\t}\n      }\n    }\n  };\n</script>\n"
  },
  {
    "path": "index.js",
    "content": "require('gmap-custom-marker.vue');"
  },
  {
    "path": "package.json",
    "content": "{\n  \"name\": \"vue2-gmap-custom-marker\",\n  \"version\": \"6.1.0\",\n  \"description\": \"vue 2 google map custom marker component allowing display custom html content on google map using gmap-vue\",\n  \"main\": \"gmap-custom-marker.vue\",\n  \"scripts\": {\n    \"test\": \"echo \\\"Error: no test specified\\\" && exit 1\"\n  },\n  \"repository\": {\n    \"type\": \"git\",\n    \"url\": \"git+https://github.com/eregnier/vue2-gmap-custom-marker.git\"\n  },\n  \"keywords\": [\n    \"vue\",\n    \"js\",\n    \"google\",\n    \"map\",\n    \"marker\",\n    \"custom\"\n  ],\n  \"author\": \"Eric Régnier\",\n  \"license\": \"MIT\",\n  \"bugs\": {\n    \"url\": \"https://github.com/eregnier/vue2-gmap-custom-marker/issues\"\n  },\n  \"homepage\": \"https://github.com/eregnier/vue2-gmap-custom-marker#readme\",\n  \"dependencies\": {\n    \"gmap-vue\": \"^1.5.0\",\n    \"vue\": \"^2.x\"\n  }\n}\n"
  }
]