custom marker for vue2-google-maps

Question

I am trying to add my own images for a custom marker in vue2-google-maps without success. I know this is a bug and when I add an :icon="{url:'../assets/my_image'}" in tag the marker disappears. Has anyone managed to make it work?

Answer 1

You need to load the image in this case, like this:

:icon="{ url: require('../../assets/img/marker-a.png')}"

An example:

<GmapMarker
  v-for="(m, index) in markers"
  :key="index"
  :ref="`marker${index}`"
  :position="m.position"
  :clickable="true"
  :draggable="true"
  :icon="{ url: require('../../assets/img/marker-a.png')}" />

Answer 2

Just in case if you like to scale the size of the custom marker to look better in retina screen:

in <template>

<GmapMarker
  v-for="(m, index) in markers"
  :key="index"
  :ref="`marker${index}`"
  :position="m.position"
  :clickable="true"
  :draggable="true"
  :icon="markerOptions" />

in script

const mapMarker = require('~/assets/images/layout/map-marker.png');
data() {
  return {
    markerOptions: {
      url: mapMarker,
      size: {width: 60, height: 90, f: 'px', b: 'px',},
      scaledSize: {width: 30, height: 45, f: 'px', b: 'px',},
    },
  };
},