Use an SVG for a marker in Google Maps?

user_476923 0
Viewed 22033

i know it's possible to add svg overlays to google maps. i'm wondering if you can use svg files as markers. i tried setting it just like you would a png or jpg file, but nothing shows up. let me know if i should post my code, but i think i am probably approaching it in the wrong way.

thanks.

google-maps-markers svg google-maps
5 Answers

As some mentioned above, scaledSize is the property that makes the magic happens:

  window.userimage = {
    url: '/img/user.svg',
    scaledSize: new google.maps.Size(64, 64),
    origin: new google.maps.Point(0, 0),
    anchor: new google.maps.Point(0, 0)
  };


  window.usermarker = new google.maps.Marker({
    map: minimap,
    animation: google.maps.Animation.DROP,
    anchorPoint: new google.maps.Point(0, -29),
    icon: userimage,
  });

Result: enter image description here

user_35307070 
var marker = new google.maps.Marker({
        icon: {
            size: new google.maps.Size(21, 45),
            origin: new google.maps.Point(0, 0),
            anchor: new google.maps.Point(21, 45),
            url: `data:image/svg+xml;utf-8,
                        <svg width="21" height="45" viewBox="0 0 21 45" xmlns="http://www.w3.org/2000/svg"><title>POINT</title><desc>Created with Sketch.</desc><g transform="translate(-651 -1250) translate(651 1250)" fill="#F76A4C"><circle cx="10.5" cy="10.5" r="10.5"/><path d="M9 19h3v26h-3z"/></g></svg>`
        }
    });

Live example on codepen.

user_41596940
Related