googlemap-custom-marker-vue v1.1.0

googlemap-custom-marker-vue

This component makes it simple to display some custom Vue reactive components on a google map.

⚠️ important note

This project is a plugin for @fawmi/vue-google-maps. It was adapted from the repository eregnier/vue2-gmap-custom-marker.

Installation

Install the package from npm:

npm i googlemap-custom-marker-vue

Basic Usage

Import the component and use it in the components object.

import GmapCustomMarker from 'googlemap-custom-marker-vue';

Use the custom marker inside the map component. Add HTML or other Vue components inside the custom marker to be rendered on the map.

<GmapMap>
  <GmapCustomMarker :marker="marker">
    <img src="http://lorempixel.com/800/600/nature/" />
    <my-component></my-component>
  </GmapCustomMarker>
</GmapMap>

<script>
export default = {
  [...],
  data() {
    return {
      marker: {
        lat: 50.60229509638775,
        lng: 3.0247059387528408
      }
    }
  [...]
}
</script>

Use the @click event with the .native modifier to bind a function to the clicking of the custom marker.

<GmapMap>
  <GmapCustomMarker
    :marker="{ lat: 50.60229509638775, lng: 3.0247059387528408 }"
    @click.native="someFunction"
  >
    <img src="http://lorempixel.com/800/600/nature/" />
    <my-component></my-component>
  </GmapCustomMarker>
</GmapMap>

Specify 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.

<GmapCustomMarker
 :marker="marker"
 alignment="bottomright"
>
</GmapCustomMarker>

Manually 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.

<GmapCustomMarker
 :marker="marker"
 :offsetX="-10"
 :offsetY="17.5"
>
</GmapCustomMarker>

Reference