How to Extract the Path of SVG file to Use it as a Marker on Google Maps

In the following video clip which I uploaded on YouTube, I show you the most efficient way to convert any PNG/Jpeg file to SVG format. Then extract SVG path as a single string, so it can be used to define the path of the icon used as a maker on Google Maps. By doing this you can place the same marker with any color/size/rotartion you want, and you can embed the definition of the icons in your HTML file.

One way to create a marker using Google Maps API is to introduce the icon as a symbol with a SVG path specified as a string:

Using this method, you can define several markers with the same icon, but various colors. Also the definition of the icon is embedded in HTMl file. But extracting all the shapes of a SVG file as a single path is a little bit tricky, and I explained in this video what is the most efficient way to handle that.

 

  1. var opts = {
  2. position: {lat: 37.883524, lng: -123.0125427},
  3. draggable: false,
  4. map: map,
  5. icon: {
  6. path: String containg all the data of SVG path of the symbol,
  7. scale: 1,
  8. strokeWeight: 0.2,
  9. strokeColor: #xxxxxx,
  10. strokeOpacity: 1,
  11. fillColor: #xxxxxx,
  12. fillOpacity: 0.7,
  13. rotation: a number between 0 & 359 degree
  14. },
  15. title: something
  16. };
  17. new google.maps.Marker(opts);

Comments

I have been struggling with the same thing for a weeks. I will try this out. Also, have you tried using the anchor property to center the icon over the actual lat & lng point?