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 nothi

Answer 1

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%;
}