add custom svg layer on google map (api v3)

Question

Here is the problem,

I try to add a custom layer (svg) on a google map. The layer I chose is really simple, it is just a "rect" but sooner or later these are gonna be much more complex with paths & so on... but that's not the problem actually.

I finally could add the svg on the map and make it visible, but, since svg are not like image tags, i cannot find a way to scale/size the svg with the google map like simple images would...

here is a google example, when you scale (mousewheel) the map, the custom overlay size is changing too :

https://developers.google.com/maps/documentation/javascript/examples/overlay-simple

And, here is the svg I tried to add on the map, you will notice that the div (container) is located at specific points (lat/lng), and scales correctly with mousewheel on the map. BUT, the svg layer I tried to add into it, is jut NOT into it at all, and, does not scale on mousewheel... the only point going fine with this svg layer is that it's working with map dragging...

svg layer should be contained in the defined div (with bounds...). Svg is a simple layer :

<svg width="400" height="400" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg" class="svg-editor">
    <g>
        <rect id="svg_5" height="181" width="311" y="95.25" x="47.75" stroke-width="5" fill="#FF0000"/>
    </g>
</svg>

here is the fiddle :

http://jsfiddle.net/7b3byzrf/27/

Thanks for help!

Answer 1

If you want your svg image to be correctly scaled, you need to have

• a viewBox (you've put it, this part is OK)
• no dimension in the svg element (here's the problem).

Remove those lines :

svg.setAttribute('width','400');
svg.setAttribute('height','400');

Demonstration