CODEWITHSUNDEEP
vue.jsgoogle-mapsnuxt.jsgoogle-maps-markersvue2-google-maps
Naveen
Naveen

Reputation: 165

How to add dashed border around marker using vue2-google-maps

enter image description here

I want to add border around the car image on click of the marker. how can i do it?

        <gmap-marker
          :key="index"
          v-for="(m, index) in markers"
          :position="{
            lat: m.location.latitude,
            lng: m.location.longitude,
          }"
          :icon="markerOptions"
        >
        </gmap-marker>
      </gmap-cluster>

  markerOptions: {
    url: require('~/assets/images/car.svg'),
    scaledSize: { width: 50, height: 50, f: 'px', b: 'px' },
  },

Upvotes: -1

Views: 363

Answers (1)

Pagemag
Pagemag

Reputation: 2977

You can do this by using 2 types of icons - one with your current car icon then another car icon with border.To do this, here are the steps:

  1. Put your 2 icons(url) inside the data.
 data: {
          center: {
            lat: 10.0,
            lng: 10.0
          },
          icon: 'http://maps.google.com/mapfiles/kml/shapes/donut.png',
          newIcon: 'http://maps.google.com/mapfiles/kml/shapes/target.png',

  1. Then you also make a variable for a selected marker flag inside data with value null: selectedMarker: null

  2. Inside <google-marker/> put a method value in your @click then pass the marker and the key: @click="markerClicked(m, key)"

Then on the methods, declare the markerClicked then pass the key to the selectedMarker you declared earlier. This will hold the value of the key of the selected marker:

 markerClicked: function(marker, key) {
            this.selectedMarker = key
          },
  1. Inside <google-marker/> put a method value in your :icon. This will handle which icon you will show. :icon=getIcon(key)

Then on the methods, declare the getIcon passing the key. Then you will check if the selectedMarker is equal to this key. If yes, this means that this is the active marker and you will show a new Icon which has the border and if it is not equal, you will just show the marker without border.

getIcon: function(key) {
            if (this.selectedMarker == key) {
              return this.newIcon
            }else{
            return this.icon
            }
          }

Here's a working code.

Upvotes: 0

Related Questions