javascript - add custom svg layer on google map (api v3) - Stack Overflow

admin管理员组

文章数量:1287086

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 plex 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 :

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="" xmlns: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 :

/

Thanks for help!

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 plex 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./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/2000/svg" xmlns:svg="http://www.w3/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/7b3byzrf/27/

Thanks for help!

• javascript
• css
• google-maps
• google-maps-api-3
• svg

Share Improve this question Follow asked Feb 18, 2015 at 14:57 Julo0sSJulo0sS 2,10255 gold badges3131 silver badges5353 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 10

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

本文标签： javascriptadd custom svg layer on google map (api v3)Stack Overflow