Use an SVG for a marker in Google Maps?

Question

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.

Answer 1

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:

Answer 2

When referencing an external SVG you need to use scaledSize instead of size for the icon. See code snippet below...

function initMap() {
  var springfield = {
    lat: 39.9354165,
    lng: -83.8215624
  };

  var homer = {
    url: 'http://thenewcode.com/assets/images/thumbnails/homer-simpson.svg',
    scaledSize: new google.maps.Size(64, 64),
    origin: new google.maps.Point(0, 0),
    anchor: new google.maps.Point(0, 32)
  }

  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 4,
    center: springfield
  });

  var marker = new google.maps.Marker({
    position: springfield,
    map: map,
    icon: homer,
    draggable: true
  });
}

#map {
  height: 400px;
  width: 100%;
}

<script async defer src="//maps.googleapis.com/maps/api/js?callback=initMap"></script>
<div id="map"></div>