title: How can I overlay SVG diagrams on Google Maps?
body: <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>