<p>Turns out, there was a bug in Smart Map which made this impossible. Fortunately, it's now fixed!</p>
<p>As of Smart Map <strong>v2.4.2</strong>, it is possible to build more elaborate markers using a nested syntax for the <code>markerOptions</code> value. Try something like this...</p>
<pre><code>{% set options = {
    markerOptions: {
        icon: {
            url: '/path/to/svg/file',
            scaledSize: 'new google.maps.Size(50,50)'
        }
    }
} %}
</code></pre>

CC BY-SA 4.0
2018-01-31T06:43:14.450Z
2021-01-01T06:56:27.333Z
2021-01-01T06:56:27.333Z
Lindsey D
<p>I have a smart map where I'm trying to use linked SVG files for the marker icons. In Safari, the files load at actual size, which in this case is fine, but in Chrome and Edge, they are scaled up, and in Firefox and IE, they don't show up at all.</p>

<p>I tried setting a size using marker options, but it looks like that doesn't support google.maps.MarkerLabel properties:</p>

<pre><code>{% set options = {
    markerOptions: {
        scaledSize: 'new google.maps.Size(50,50)',
    },
} %}
</code></pre>

<p>If I replace the SVG icon with PNGs, they work fine in all browsers.
Is there a different way to specify the icon size/path for SVGs?</p>

<plugin-smartmap><svg><google-maps>
Smart Map with linked SVG icons for markers
# Smart Map with linked SVG icons for markers

(Asked by: username_0 on 2017-09-13)

I have a smart map where I'm trying to use linked SVG files for the marker icons. In Safari, the files load at actual size, which in this case is fine, but in Chrome and Edge, they are scaled up, and in Firefox and IE, they don't show up at all.
I tried setting a size using marker options, but it looks like that doesn't support google.maps.MarkerLabel properties:
{% set options = {
    markerOptions: {
        scaledSize: 'new google.maps.Size(50,50)',
    },
} %}

If I replace the SVG icon with PNGs, they work fine in all browsers.
Is there a different way to specify the icon size/path for SVGs?

**Tags:** plugin-smartmap, svg, google-maps


---

## 1 answers

### Answer by username_1 on 2018-01-31. Score: 2

Turns out, there was a bug in Smart Map which made this impossible. Fortunately, it's now fixed!
As of Smart Map v2.4.2, it is possible to build more elaborate markers using a nested syntax for the markerOptions value. Try something like this...
{% set options = {
    markerOptions: {
        icon: {
            url: '/path/to/svg/file',
            scaledSize: 'new google.maps.Size(50,50)'
        }
    }
} %}


---

