resize svg icon for google map marker

Question

I'm having problem with icon resizing in google map. I have an svg file for make it responsive.

this is how I call the svg file

MyGreenSVG = {
    url: 'greenFill.svg',
    size: new google.maps.Size(20, 35)
};

the property: size doesn't change the size of my icon, but only crop it. the only way is to change the width and height in my svg file, and make 2 versions of it. so I loose the interest of using svg...

this is a preview of my svg file :

<svg version="1.1"
x="0px" y="0px" width="41.8px" height="74px" viewBox="0 0 41.8 74" enable-background="new 0 0 41.8 74" xml:space="preserve">

Answer 1

I'm also unable to resize using scale. I did find that if I use a MarkerImage then I can scale the svg and it looks pretty good, way better than a png as far as how smooth it is. I don't think it's a 'symbol' any more if I'm using MarkerImage though.

function initialize() {
  var mapOptions = {
    zoom: 4,
    center: new google.maps.LatLng(-25.363882, 131.044922)
  };

var map = new google.maps.Map(document.getElementById('map-canvas'),
  mapOptions);

var marker = new google.maps.Marker({
  position: map.getCenter(),
  icon: new google.maps.MarkerImage('icons/myIcon.svg',
    null, null, null, new google.maps.Size(200,200)),
  draggable: false,
  map: map
  });
}

google.maps.event.addDomListener(window, 'load', initialize);

I'm still looking for better solution too.

UPDATE (04/14/2015)

I found this on the docs at the bottom of complex icons and just above the link to symbols:

Converting MarkerImage objects to type Icon

Until version 3.10 of the Google Maps JavaScript API, complex icons were defined as MarkerImage objects. The Icon object literal was added in version 3.10, and replaces MarkerImage from version 3.11 onwards. Icon object literals support the same parameters as MarkerImage, allowing you to easily convert a MarkerImage to an Icon by removing the constructor, wrapping the previous parameters in {}'s, and adding the names of each parameter. For example:

var image = new google.maps.MarkerImage(
  place.icon,
  new google.maps.Size(71, 71),
  new google.maps.Point(0, 0),
  new google.maps.Point(17, 34),
  new google.maps.Size(25, 25));

becomes

var image = {
  url: place.icon,
  size: new google.maps.Size(71, 71),
  origin: new google.maps.Point(0, 0),
  anchor: new google.maps.Point(17, 34),
  scaledSize: new google.maps.Size(25, 25)
};

I was playing around with the size and scaledSize and have an example here. It seems like I can comment out the size and scaledSize works fine. If the size is smaller than scaledSize the graphic gets cut off.

Answer 2

As kaplan pointed out, you can resize SVG markers with size and scaledSize. In my case, the result was still buggy - some instances of the same icon were rendered correctly, others left strange artifacts on the map.

I solved this problem in a very simple way: I defined width and height in the <svg> element.

Answer 3

I know this is an old post, so just an update from me.

This works for me without using MarkerImage, but it's imperative that the svg has its width and height properties set.

And you must use the icon property "scaledSize" to set the size of the icon on the map

Answer 4

Here is a solution on scaling markers based on the zoom

  var someMarker;
  var title = "Some title";

  // A SVG flag marker
  someMarker = new google.maps.Marker({
      position: latlon,
      map: map,
      icon: {
          path: 'M0 -36 L0 -20 24 -20 24 -36 M0 -36 L0 0 1 0 1 -20z', // SVG for flag
          scale: 1.0,
          fillColor: "#E6BD00",
          fillOpacity: 0.8,
          strokeWeight: 0.3,
          anchor: new google.maps.Point(0, 0),
          rotation: 0
      },
      title:title
  });

  // scale marker on different zooms
  google.maps.event.addListener(map, 'zoom_changed', function() {
      var zoom = map.getZoom();
      var picon = someMarker.getIcon();

      if(zoom >=16 && zoom <= 17 && picon.scale != 0.6)
      { picon.scale=0.6;
        someMarker.setOptions({icon:picon});
      }
      else if(zoom == 18 && picon.scale != 0.8)
      {
        picon.scale=0.8;
        someMarker.setOptions({icon:picon});
      }
      else if(zoom > 18 && picon.scale != 2.0)
      {
        picon.scale=2.0;
        someMarker.setOptions({icon:picon});
      }
  });

Answer 5

For single path SVG icon below code is worked for me

var icons = {
        path: "M-20,0a20,20 0 1,0 40,0a20,20 0 1,0 -40,0",
        strokeColor: '#f00',
        fillColor: '#0000ff',
        strokeWeight:1,
        scale: 0.15
    };

 marker= new google.maps.Marker({
  position: latlng,
  map: map,
  icon: icons,
   });

in above code scale is used to change the size of svg icon in google map marker.

Answer 6

var icon = marker.icon; // make a copy of the svg icon currently in there
icon.scale = newValue; // change it to whatever new value
marker.setOptions({icon:icon}); // dump it back into the map

I made my marker pulse to draw attention to it:

var iconscale = 0;
function animateMarker() {
    iconscale += .05; // sin() is in rads, not degs
    var icon = marker.icon;
    icon.scale = 1.8 + 0.3 * Math.sin(iconscale); // pulse around scale of 1.8
    marker.setOptions({icon:icon});
}

setInterval( animateMarker, 100 );

Answer 7

had the same problem, it solved by using scale:

MyGreenSVG = {
    url: 'greenFill.svg',
    scale: 0.5
};

The weird part is that i spend one hour yesterday trying to make it work and it didn't, today i changed the number from 0.3 to 0.2 and worked perfectly. so be careful with cache and stuff.