StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POHow can I overlay SVG diagrams on Google Maps?
text
Body
copied!<p>I would like to add an overlay image on a Google Map. The image is a SVG file I have generated (Python with SVGFig).</p> <p>I am using the following code:</p> <pre><code>if (GBrowserIsCompatible()) { var map = new GMap2(document.getElementById("map_canvas")); map.setCenter(new GLatLng(48.8, 2.4), 12); // ground overlay var boundaries = new GLatLngBounds(new GLatLng(48.283188032632829, 1.9675270369830129), new GLatLng(49.187215000000002, 2.7771877478303999)); var oldmap = new GGroundOverlay("test.svg", boundaries); map.addControl(new GSmallMapControl()); map.addControl(new GMapTypeControl()); map.addOverlay(oldmap); } </code></pre> <p>Surprisingly, it works with Safari 4, but it doesn't work with Firefox (with Safari 3, the background is not transparent).</p> <p>Does anyone have an idea on how I could overlay an SVG?</p> <p>PS1: I read some works like <a href="http://www.bdcc.co.uk/Gmaps/BdccGmapBits.htm" rel="noreferrer">this</a> or the source code of swa.ethz.ch/googlemaps, but it seems that they have to use JavaScript code to parse the SVG and add one by one all the elements (but I did not understand all the source...).</p> <p>PS2: The SVG is composed of different filled paths and circles, with transparency. If there is no solution to overlay my SVG, I can use 2 alternative solutions:</p> <ul> <li>rasterize the SVG</li> <li>convert the paths and circles in GPolygons</li> </ul> <p>But I do not really like the 1st solution because of the poor quality of the bitmap and the time to generate it with antialiasing.</p> <p>And for the 2nd solution, the arcs, ellipses and circles will have to be decomposed into small polylines. A lot of them will be necessary for a good result. But I have around 3000 arcs and circles to draw, so...</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload