I have integrated vue2-google-maps to display a map and add markers on specific locations. Here is the code snippet showing the map components along with the props passed to it.
<gmap-map id="map" :center="center" :zoom="5" map-type-id="terrain">
<gmap-marker
v-for="(marker, index) in markers"
:key="index"
:position="getPosition(marker.coords)"
:animation="2"
:icon="getMarkerIcon(marker.type)">
</gmap-marker>
</gmap-map>
The getMarkerIcon function is responsible for returning the SVG icon options as shown below.
getMarkerIcon(type) {
const labels = {
paid: "client/public/img/icons/Paid.svg",
errorPaid: "client/public/img/icons/PaidError.svg",
label: "client/public/img/icons/Label.svg",
errorLabel: "client/public/img/icons/LabelError.svg",
};
const options = {
url: labels[type],
size: { width: 60, height: 90, f: "px", b: "px" },
scaledSize: { width: 30, height: 45, f: "px", b: "px" },
};
return options;
},
If I neglect to pass the icon prop, default markers from the API are displayed. However, when I pass the icon prop along with the method, the markers do not render without any error message in the console. I even attempted passing just the icon URL without specifying any size parameters, but still no luck. It's worth mentioning that there are only 4 types of markers based on the labels object defined in the method.