I want to implement a custom SVG icon as a marker on Google Maps.
I have obtained this SVG file:
<svg xmlns="http://www.w3.org/2000/svg" width="510px" height="510px" viewBox="0 0 510 510">
<g
stroke="black"
stroke-width="10"
fill="white"
>
<path d="M497.25,357v-51l-204-127.5V38.25C293.25,17.85,275.4,0,255,0c-20.4,0-38.25,17.85-38.25,38.25V178.5L12.75,306v51
l204-63.75V433.5l-51,38.25V510L255,484.5l89.25,25.5v-38.25l-51-38.25V293.25L497.25,357z"/>
</g>
</svg>
Although I am not very familiar with SVGs, I was able to use the path attribute d from the SVG file as a string successfully:
mounted() {
new google.maps.Marker({
position: this.flight.position,
flight: this.flight,
map: this.map,
icon: {
path: "M497.25,357v-51l-204-the-string-goes-on-and-on",
scale: .04,
fillColor: '#FFFFFF',
fillOpacity: 1,
strokeWeight: 1,
rotation: this.flight.trueTrack,
anchor: new google.maps.Point(250, 400)
}
})
}
However, I would like to avoid using a long string for path. Is it possible, for instance, to import the SVG file from the asset folder and reference its path attribute d as a variable?
Pseudocode (I may be completely off):
import svgFile from '../assets/file.svg';
const path = document.querySelector("path");
const d = path.getAttribute("d");
(...)
mounted() {
new google.maps.Marker({
position: this.flight.position,
flight: this.flight,
map: this.map,
icon: {
path: d,
(...)
}
})
}
Or perhaps there is another, more efficient way to eliminate hardcoded strings in path? Any help would be greatly appreciated!