Individual Marker Icons and Info Windows

[Amelior-Scout]

I'm pretty new to coding :( and I was wondering: Is it currently possible to make multiple markers with individual icons and info windows on them? I'd really like to see this in the Docs if it can be done :']

Thanks for listening, have an amazing week! :]

[fawmi]

You can define a different marker and markup per location.
Simply add an icon and infowindow data properties to the locations.

[Amelior-Scout]

Thank you so very much! I'll attempt to figure this out 😂 :]

[fawmi]

@Amelior-Scout
Hier is an example, if haven't managed to create it.

<template>
  <GMapMap
    :center="center"
    :zoom="10"
    map-type-id="terrain"
    style="width: 100vw; height: 20rem"
  >
    <GMapCluster :zoomOnClick="true">
      <GMapMarker
        :key="index"
        v-for="(m, index) in markers"
        :position="m.position"
        :icon="m.icon"
        :clickable="true"
        :draggable="true"
        @click="center = m.position"
      />
    </GMapCluster>
  </GMapMap>
</template>

<script>
export default {
  data() {
    return {
      center: { lat: 51.093048, lng: 6.84212 },
      markers: [
        {
          position: {
            lat: 51.093048,
            lng: 6.84212,
          },
          icon: 'http://placehold.jp/3d4070/ffffff/150x150.png?text=One',
        },
        {
          position: {
            lat: 51.198429,
            lng: 6.69529,
          },
          icon: 'http://placehold.jp/3d4070/ffffff/150x150.png?text=Two',
        },
        {
          position: {
            lat: 51.165218,
            lng: 7.067116,
          },
          icon: 'http://placehold.jp/3d4070/ffffff/150x150.png?text=Three',
        },
        {
          position: {
            lat: 51.09256,
            lng: 6.84074,
          },
          icon: 'http://placehold.jp/3d4070/ffffff/150x150.png?text=Four',
        },
      ],
    };
  },
};
</script>

<style>
body {
  margin: 0;
}
</style>

[fawmi]

And a sandbox link:

https://stackblitz.com/edit/vue-google-maps-marker-xjxdjn?file=src%2Fcomponents%2FComponentWithMap.vue

[Amelior-Scout]

Oh, yes yes yes. THANK YOU!!! I did actually figure it out, but I'm sure this example will help me understand the code a little better :D!

THANK YOU fawmi!!! :3

Just had a death in the family, so I really, really appreciate your helpfulness :']