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?

score 20 · Accepted Answer · answered Aug 14 '18 at 01:28

20

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')}" />

answered Aug 14 '18 at 01:28

kevinvo

216
2
3

can we add this a class name? – Leopoldz Mar 09 '21 at 09:58
In my case i had to get rid of require function due I have my images in public laravel directory and this works pretty good – Fernando Torres Nov 14 '21 at 23:24

score 8 · Answer 2 · answered Jan 29 '19 at 10:02

8

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',},
    },
  };
},

answered Jan 29 '19 at 10:02

Syed

15,657
13
120
154

is there any way to add the url dynamically? coming from an API endpoint? – Junaid Farooq Feb 28 '19 at 07:24
1

@JunaidFarooq, just make it `const mapMarker = 'www.lorem.com/path/to/marker/serveing/from/end-point'` – Syed Feb 28 '19 at 18:38
Can we add this a class name or id? – Leopoldz Mar 09 '21 at 09:59
were do we find more information about more options of icon prop? – Fernando Torres Nov 15 '21 at 02:59
here, i found it https://developers.google.com/maps/documentation/javascript/reference/marker#Icon – Fernando Torres Nov 15 '21 at 03:01

custom marker for vue2-google-maps

2 Answers2

Linked