is there a way to make the transparency in the google map marker not clickable

Question

ok so i have a google map app i read in svgs from my html, and then make markers out of them. But now the problem is that the transparency that comes with the marker is clickable aswell, now this creates a problem in close clusters. So my question is, is it possible to make only the bit of the marker that has a path clickable instead of the whole area, aside from using "path:" instead of "url:" in google map markers.

So currently:

//gets it from my html and treats it like a path
 var iconUrl = "data:image/svg+xml;charset=utf-8," + escape(document.getElementById("builtMarker").innerHTML);
 var sizeX = 160;
 var sizeY = 140;
 //make my custom icon
 var icon = {
     url: iconUrl,
     scaledSize: new google.maps.Size(sizeX, sizeY),
     anchor: new google.maps.Point(sizeX / 2, sizeY / 2)
 };

loc = new google.maps.LatLng(63.68212926717004, -99.33484864981511);
marker = new google.maps.Marker({
     position: loc,
     map: map,
     draggable: false,
     icon: icon,
     zIndex: -20,
 });

https://jsfiddle.net/y8yj86og/3/

So if you look at that fiddle the "hover" hand changes before it actually gets to the icon, my svg markers are quite complex and change on size depending on parameters, so changing the viewbox size will cause it to be cut off when i make a bigger icon. Is there any other way to go about this? Like a way to set the viewbox size to auto or something

Answer 1

There is a shape option for a google.maps.Marker that allows you to specify the "clickable" region for the marker for non-IE browsers.

MarkerShape object specification

google.maps.MarkerShape object specification

This object defines the clickable region of a marker image for browsers other than Internet Explorer . The shape consists of two properties — type and coord — which define the non-transparent region of an image. A MarkerShape object is not required on Internet Explorer since the browser does not fire events on the transparent region of an image by default.

For your icon (at least the one you provided in your example) that shape is approximately a triangle:

marker = new google.maps.Marker({
  position: loc,
  map: map,
  draggable: false,
  icon: icon,
  zIndex: -20,
  shape: { 
      type: 'poly',
      coords: [50,50,  105,50,  75,90,  50,50]
  } 
});

updated fiddle

code snippet:

 var myLatlng = new google.maps.LatLng(38.392303, -86.931067); map = new google.maps.Map(document.getElementById("map-canvas"), { zoom: 4, center: myLatlng, mapTypeId: google.maps.MapTypeId.ROADMAP }); var iconUrl = "data:image/svg+xml;charset=utf-8," + escape(document.getElementById("builtMarker").innerHTML); var sizeX = 160; var sizeY = 140; var icon = { url: iconUrl, scaledSize: new google.maps.Size(sizeX, sizeY), anchor: new google.maps.Point(sizeX / 2, sizeY / 2) }; loc = new google.maps.LatLng(63.68212926717004, -99.33484864981511); marker = new google.maps.Marker({ title: "SVG mark", position: loc, map: map, draggable: false, icon: icon, zIndex: -20, shape: { type: 'poly', coords: [50, 50, 105, 50, 75, 90, 50, 50] } }); map.panTo(loc); 

 <script src="https://maps.googleapis.com/maps/api/js?v=3"></script> <div id="map-canvas" style="height:600px"></div> <div id="builtMarker"> <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="595.28px" height="841.89px" viewBox="0 0 595.28 841.89" enable-background="new 0 0 595.28 841.89" xml:space="preserve"> <path fill="#74C380" stroke="#000000" stroke-miterlimit="10" d="M319.669,455.002c-11.99-16.691-22.492-15.168-22.492-15.168v0.016 c-0.006,0-10.504-1.488-22.475,15.23c1.299,3.563,22.51,61.154,22.51,61.154l0.004-0.02 C297.216,516.213,318.372,458.568,319.669,455.002z" /> <path opacity="0.54" fill="#74C380" stroke="#000000" stroke-miterlimit="10" d="M297.187,440.656" /> <path fill="#234821" stroke="#000000" stroke-miterlimit="10" d="M297.171,422.465c0,0-13.275-0.682-26.111,12.199 c0.713,1.557,4.797,9.029,6.254,11.705c10.332-10.494,19.873-9.631,19.873-9.631s9.543-0.877,19.9,9.602 c1.451-2.68,5.516-10.158,6.225-11.717C310.444,421.764,297.171,422.465,297.171,422.465z" /> <path fill="#C52727" stroke="#000000" stroke-miterlimit="10" d="M297.165,404.046c0,0-17.482-0.683-34.387,12.198 c0.939,1.557,6.316,9.029,8.236,11.705c13.607-10.494,26.174-9.629,26.174-9.629s12.568-0.879,26.209,9.6 c1.906-2.68,7.262-10.156,8.195-11.717C314.646,403.344,297.165,404.046,297.165,404.046z" /> <path fill="#D8E022" stroke="#000000" stroke-miterlimit="10" d="M297.157,385.625c0,0-21.969-0.682-43.213,12.199 c1.18,1.557,7.938,9.029,10.352,11.705c17.098-10.494,32.895-9.63,32.895-9.63s15.793-0.878,32.936,9.601 c2.396-2.68,9.127-10.157,10.301-11.717C319.13,384.924,297.157,385.625,297.157,385.625z" /> <path fill="#3F52A4" stroke="#000000" stroke-miterlimit="10" d="M297.149,367.205c0,0-28.982-0.682-57.008,12.199 c1.559,1.557,10.471,9.029,13.654,11.705c22.557-10.494,43.396-9.63,43.396-9.63s20.834-0.878,43.447,9.601 c3.16-2.68,12.041-10.157,13.59-11.717C326.132,366.504,297.149,367.205,297.149,367.205z" /> <path fill="#3B98D4" stroke="#000000" stroke-miterlimit="10" d="M297.142,348.785c0,0-35.719-0.682-70.26,12.198 c1.922,1.557,12.906,9.03,16.828,11.706c27.803-10.494,53.484-9.631,53.484-9.631s25.676-0.877,53.549,9.601 c3.893-2.679,14.838-10.157,16.746-11.716C332.86,348.083,297.142,348.785,297.142,348.785z" /> <path fill="#B24F9E" stroke="#000000" stroke-miterlimit="10" d="M297.13,325.867c0,0-44.416-0.811-87.363,14.494 c2.389,1.85,16.049,10.729,20.924,13.909c34.572-12.469,66.506-11.443,66.506-11.443s31.926-1.043,66.584,11.408 c4.842-3.184,18.453-12.068,20.824-13.922C341.546,325.032,297.13,325.867,297.13,325.867z" /> <linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="271.417" y1="434.4395" x2="323.6689" y2="434.4395"> <stop offset="0.0545" style="stop-color:#C6E09B;stop-opacity:0.66" /> <stop offset="0.1343" style="stop-color:#B2C98A;stop-opacity:0.5676" /> <stop offset="0.2804" style="stop-color:#88A069;stop-opacity:0.3983" /> <stop offset="0.475" style="stop-color:#4F6B3C;stop-opacity:0.1729" /> <stop offset="0.6242" style="stop-color:#234821;stop-opacity:0" /> </linearGradient> <path fill="url(#SVGID_1_)" d="M297.528,422.491c0,0-13.275-0.682-26.111,12.199c0.713,1.557,4.797,9.029,6.254,11.705 c10.332-10.494,19.873-9.631,19.873-9.631s9.543-0.877,19.9,9.602c1.451-2.68,5.516-10.158,6.225-11.717 C310.802,421.79,297.528,422.491,297.528,422.491z" /> <linearGradient id="SVGID_2_" gradientUnits="userSpaceOnUse" x1="263.124" y1="415.9946" x2="332.5928" y2="415.9946"> <stop offset="0.0545" style="stop-color:#C6E09B;stop-opacity:0.66" /> <stop offset="0.1343" style="stop-color:#B2C98A;stop-opacity:0.5676" /> <stop offset="0.2804" style="stop-color:#88A069;stop-opacity:0.3983" /> <stop offset="0.475" style="stop-color:#4F6B3C;stop-opacity:0.1729" /> <stop offset="0.6242" style="stop-color:#234821;stop-opacity:0" /> </linearGradient> <path fill="url(#SVGID_2_)" d="M297.839,404.046c0,0-17.649-0.682-34.715,12.199c0.948,1.557,6.377,9.029,8.314,11.705 c13.736-10.494,26.421-9.631,26.421-9.631s12.688-0.877,26.458,9.602c1.929-2.68,7.333-10.158,8.275-11.717 C315.485,403.345,297.839,404.046,297.839,404.046z" /> <linearGradient id="SVGID_3_" gradientUnits="userSpaceOnUse" x1="253.9443" y1="397.5737" x2="340.4268" y2="397.5737"> <stop offset="0.0545" style="stop-color:#C6E09B;stop-opacity:0.66" /> <stop offset="0.1343" style="stop-color:#B2C98A;stop-opacity:0.5676" /> <stop offset="0.2804" style="stop-color:#88A069;stop-opacity:0.3983" /> <stop offset="0.475" style="stop-color:#4F6B3C;stop-opacity:0.1729" /> <stop offset="0.6242" style="stop-color:#234821;stop-opacity:0" /> </linearGradient> <path fill="url(#SVGID_3_)" d="M297.161,385.625c0,0-21.972-0.682-43.217,12.199c1.18,1.557,7.938,9.029,10.351,11.705 c17.101-10.494,32.892-9.631,32.892-9.631s15.796-0.877,32.938,9.602c2.401-2.68,9.129-10.158,10.303-11.717 C319.129,384.924,297.161,385.625,297.161,385.625z" /> <linearGradient id="SVGID_4_" gradientUnits="userSpaceOnUse" x1="240.1416" y1="378.8638" x2="355.2295" y2="378.8638"> <stop offset="0.0545" style="stop-color:#C6E09B;stop-opacity:0.66" /> <stop offset="0.1343" style="stop-color:#B2C98A;stop-opacity:0.5676" /> <stop offset="0.2804" style="stop-color:#88A069;stop-opacity:0.3983" /> <stop offset="0.475" style="stop-color:#4F6B3C;stop-opacity:0.1729" /> <stop offset="0.6242" style="stop-color:#234821;stop-opacity:0" /> </linearGradient> <path fill="url(#SVGID_4_)" d="M297.654,367.205c0,0-29.24-0.665-57.513,11.903c1.57,1.519,10.564,8.81,13.774,11.421 c22.757-10.239,43.771-9.397,43.771-9.397s21.02-0.855,43.832,9.369c3.195-2.615,12.147-9.912,13.71-11.433 C326.888,366.521,297.654,367.205,297.654,367.205z" /> <linearGradient id="SVGID_5_" gradientUnits="userSpaceOnUse" x1="225.4072" y1="360.7339" x2="370.3096" y2="360.7339"> <stop offset="0.0545" style="stop-color:#C6E09B;stop-opacity:0.66" /> <stop offset="0.1343" style="stop-color:#B2C98A;stop-opacity:0.5676" /> <stop offset="0.2804" style="stop-color:#88A069;stop-opacity:0.3983" /> <stop offset="0.475" style="stop-color:#4F6B3C;stop-opacity:0.1729" /> <stop offset="0.6242" style="stop-color:#234821;stop-opacity:0" /> </linearGradient> <path fill="url(#SVGID_5_)" d="M297.818,349.075c0,0-36.814-0.665-72.411,11.903c1.978,1.519,13.301,8.81,17.343,11.421 c28.651-10.239,55.11-9.397,55.11-9.397s26.465-0.855,55.188,9.369c4.022-2.615,15.295-9.912,17.262-11.433 C334.626,348.391,297.818,349.075,297.818,349.075z" /> <linearGradient id="SVGID_6_" gradientUnits="userSpaceOnUse" x1="207.0791" y1="339.6611" x2="388.25" y2="339.6611"> <stop offset="0.0545" style="stop-color:#C6E09B;stop-opacity:0.66" /> <stop offset="0.1343" style="stop-color:#B2C98A;stop-opacity:0.5676" /> <stop offset="0.2804" style="stop-color:#88A069;stop-opacity:0.3983" /> <stop offset="0.475" style="stop-color:#4F6B3C;stop-opacity:0.1729" /> <stop offset="0.6242" style="stop-color:#234821;stop-opacity:0" /> </linearGradient> <path fill="url(#SVGID_6_)" d="M297.614,325.407c0,0-46.028-0.813-90.535,14.553c2.472,1.856,16.63,10.771,21.684,13.964 c35.823-12.519,68.904-11.489,68.904-11.489s33.089-1.046,69.001,11.455c5.029-3.198,19.124-12.119,21.582-13.979 C343.636,324.57,297.614,325.407,297.614,325.407z" /> </svg> </div>