Default markers at the start and end of a poly-line places above my custom markers in Google maps JavaScript/Vue

Question

In Vue2 I am trying to change the google maps default marker to a custom Image. created custom markers showing on the map but, when I draw the poly-line between them default red color markers get place above the custom marker. I couldn't hide or replace the default markers.

suggested answer here is for way-points marker not start and end of a poly-line.

I uses vue2-google-maps package.

this is a screenshot of the map

this is the template

<template>
  <div>
    <GmapMap
      :center="center"
      :zoom="zoom"
      map-type-id="roadmap"
      style="width: 100%; height: 300px"
      ref="map"
      >
      <GmapMarker
        v-for="(m, index) in markers"
        :key="index"
        :ref="`marker${index}`"
        :position="m.position"
        :clickable="true"
        :icon="m.icon"
      />
      <DirectionsRenderer
       v-if='start!=null'
      travelMode="DRIVING"
      :origin="origin"
      :destination="destionation"/>
    </GmapMap>
  </div>
</template>

and this is the script part

<script>
import DirectionsRenderer from './DirectionsRenderer.js'
export default{
  components: {DirectionsRenderer},
  data:()=>({
    markers:[],
    center:{lat:49.2831066, lng:-123.1031387},
    zoom:10,
    start:null,
    end:null,
  }),
 
  computed: {
    origin() {
      if (!this.start) return null;
      return { query: this.start };
    },
    destionation() {
      if (!this.end) return null;
      return { query: this.end };
    }
  },
  methods:{
    drawRoute(){
      this.start = this.order.from.formatted_address;
      this.end = this.order.to.formatted_address;
    },
    setBounds(){
      const bounds = new google.maps.LatLngBounds()
        for (let m of this.markers) {
          bounds.extend(m.position)
        }
        this.$refs.map.fitBounds(bounds)
    },
    init(){
      this.markers=[
        {
          position: {lat:49.2831066 ,lng:-123.1031387},
          icon: 
          { 
            url: '/images/icons/pickup.png',
            size: {width: 60, height: 60, f: 'px', b: 'px',},
            scaledSize: {width: 20, height: 20, f: 'px', b: 'px',},
          }
        },
        {
          position: {lat:49.2544622,lng:-123.1053708},
          icon:{ 
            url: '/images/icons/destination.png',
            size: {width: 60, height: 60, f: 'px', b: 'px',},
            scaledSize: {width: 20, height: 20, f: 'px', b: 'px',},
          }
        }
      ];
      
    }
   this.setBounds();
  },
  created(){
    this.init();
  }
}
</script>

and this is DirectionsRenderer.js script

import { MapElementFactory } from "vue2-google-maps";

export default MapElementFactory({
    name: "directionsRenderer",

    ctr() {
        return google.maps.DirectionsRenderer;
    },

    events: [],

    mappedProps: {},

    props: {
        origin: { type: Object },
        destination: { type: Object },
        travelMode: { type: String }
    },

    afterCreate(directionsRenderer) {
        let directionsService = new google.maps.DirectionsService();

        this.$watch(
            () => [this.origin, this.destination, this.travelMode],
            () => {
                let { origin, destination, travelMode } = this;
                if (!origin || !destination || !travelMode) return;

                directionsService.route(
                    {
                        origin,
                        destination,
                        travelMode
                    },
                    (response, status) => {
                        if (status !== "OK") return;
                        directionsRenderer.setDirections(response);
                    }
                );
            }
        );
    }
});

directionsRenderer.setDirections(response); in bellow snipet draw a line with default markers at the beginning and end of the line.

directionsService.route(
                    {
                        origin,
                        destination,
                        travelMode
                    },
                    (response, status) => {
                        if (status !== "OK") return;
                        directionsRenderer.setDirections(response);
                    }
                );

any idea how can I solve this problem?

Duplicate of [Custom and waypoint markers in Google Maps](https://stackoverflow.com/questions/22639178/custom-and-waypoint-markers-in-google-maps) — MrUpsidown, Feb 09 '23 at 08:33

score 0 · Answer 1 · answered Feb 08 '23 at 07:45

I solved it, If anyone having the same problem I share my solution here.

In the bellow code

directionsService.route(
                    {
                        origin,
                        destination,
                        travelMode
                    },
                    (response, status) => {
                        if (status !== "OK") return;
                        //directionsRenderer.setDirections(response);
                    }
                );

on directionService.route() callback instead of directionRenderer.setDirections(response) loop through overview_path and push all the cordinates into path.

var vm = this;
directionsService.route(request,function(result,status){
                if(status =='OK'){
                  const route = result.routes[0];
                  route.overview_path.forEach(e=>{
                      var latlng = {
                        lat: e.lat(),
                        lng: e.lng()
                      };
                      vm.path.push(latlng);
                  })
                }
            });

The overview path, as its name says is an overview, simplified path. Not the way to go. — MrUpsidown, Feb 09 '23 at 08:36

score -1 · Answer 2 · answered Feb 08 '23 at 06:28

You need to load the image like this

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

For example

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

Set the proper image path

this.markers = [{
            position: {
                lat: 49.2831066,
                lng: -123.1031387
            },
            icon: {
                url: require('/images/icons/pickup.png'), 
                size: {
                    width: 60,
                    height: 60,
                    f: 'px',
                    b: 'px',
                },
                scaledSize: {
                    width: 20,
                    height: 20,
                    f: 'px',
                    b: 'px',
                },
            }
        },
        {
            position: {
                lat: 49.2544622,
                lng: -123.1053708
            },
            icon: {
                url: require('/images/icons/destination.png'),
                size: {
                    width: 60,
                    height: 60,
                    f: 'px',
                    b: 'px',
                },
                scaledSize: {
                    width: 20,
                    height: 20,
                    f: 'px',
                    b: 'px',
                },
            }
        }
    ];

I don't have problem with loading images, the icons leading with no issue, what I need is; replacing the default marker with my custom one. — Zia, Feb 08 '23 at 06:46

Default markers at the start and end of a poly-line places above my custom markers in Google maps JavaScript/Vue

2 Answers2