Clever Geek Handbook

Google Maps - SVG marker disabled

Why are my svg icons for google.maps.Marker disabled? I've tried many combinations with size and scaledSize ...

var marker = new google.maps.Marker({
            position: new google.maps.LatLng({lat: el.lat, lng: el.lon}),
            icon: {
                url: "/images/icons/observation_" + el.rate + ".svg",
                size: new google.maps.Size(20, 20),
                origin: new google.maps.Point(0, 0),
                anchor: new google.maps.Point(10, 10),
                scaledSize: new google.maps.Size(20, 20)
            },
            zIndex: 6,
            map: map.map
        });

Svg icons should be 20x20 px.

https://jsfiddle.net/d3v5huzr/

Here's a preview: Google Maps SVG Markers

+3


source to share


2 answers


You have to set the width and height attributes of the svg element like this:

<svg height="40px" width="40px" ... >


https://jsfiddle.net/zvtnohyv/

+3


source


You can use zoom_changed

from events and add an event listener to update the marker icon on zoom

Screenshot Demo



Code below

var map;

map = new google.maps.Map(document.getElementById('map'), {
  center: {
    lat: -34.397,
    lng: 150.644
  },
  zoom: 8
});
var icon = {
  url: "http://svgshare.com/i/1jz.svg",
}
var marker = new google.maps.Marker({
  position: new google.maps.LatLng({
    lat: -34.397,
    lng: 150.644
  }),
  icon: icon,
  /*icon: {
    url: "http://svgshare.com/i/1jz.svg",
    // size: new google.maps.Size(20, 20),
    // origin: new google.maps.Point(5, 5),
    // anchor: new google.maps.Point(10, 10),
    // scaledSize: new google.maps.Size(20, 20)
  },*/
  zIndex: 6,
  map: map
});
google.maps.event.addListener(map, 'zoom_changed', function() {
  marker.setIcon(icon);
});
+2


source






More articles:


All Articles