i've simple map svg file marker icon. when map loaded no problem but, if try zoom in or out, image became bigger , cutoff. behavior change browser browser:
- google chrome starts ok if try zoom reveals issue.
- safari works well
- firefox shows nothing
i think svg related issue, can't find bug is. i've created jsfiddle code
var mapoptions = { zoom: 5, maptypeid: google.maps.maptypeid.roadmap, center: new google.maps.latlng(52.373743,4.893114) }; map = new google.maps.map(document.getelementbyid('map-canvas'), mapoptions); var icon = { url: "http://filippopoderini.com/marker-07.svg", anchor: new google.maps.point(23,60), scaledsize: new google.maps.size(46,60) } var marker = new google.maps.marker({ position: new google.maps.latlng(52.373743, 4.893114), map: map, draggable: false, icon: icon, }); and svg code
<?xml version="1.0" encoding="utf-8"?> <!-- generator: adobe illustrator 19.1.0, svg export plug-in . svg version: 6.00 build 0) --> <svg version="1.1" id="capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewbox="-2339.1 129.2 289 375" style="enable-background:new -2339.1 129.2 289 375;" xml:space="preserve"> <style type="text/css"> .st0{fill:#32abdf;stroke:#424242;stroke-width:3;stroke-miterlimit:10;} .st1{fill:#a9a9a9;stroke:#424242;stroke-width:3;stroke-miterlimit:10;} .st2{fill:#424242;} .st3{fill:#ffffff;} .st4{fill:#32abdf;} </style> <g> <path class="st2" d="m-2298,370.3l-2298,370.3c-5-5.3-9.5-10.9-13.5-16.8c-16.1-23.5-24.6-51.1-24.6-79.7 c0-78,63.5-141.5,141.5-141.5s141.5,63.5,141.5,141.5c0,28.6-8.5,56.2-24.6,79.7c-4,5.9-8.6,11.6-13.5,16.8l-0.1,0.1l-103.4,129.1 l-2298,370.3z"/> <path class="st3" d="m-2194.6,135.2c37,0,71.8,14.4,97.9,40.6c26.2,26.2,40.6,60.9,40.6,97.9c0,28-8.3,55-24,78 c-3.9,5.8-8.4,11.3-13.2,16.5l-0.2,0.2l-0.1,0.2l-101,126.1l-101-126.1l-0.1-0.2l-0.2-0.2c-4.8-5.1-9.2-10.6-13.1-16.4 c-15.8-23-24.1-50-24.1-78c0-37,14.4-71.8,40.6-97.9c-2266.3,149.6-2231.6,135.2-2194.6,135.2 m-2194.6,129.2 c-79.8,0-144.5,64.7-144.5,144.5c0,30.2,9.3,58.2,25.1,81.4h0l0,0c4.1,6,8.7,11.8,13.7,17.1l105.7,132l105.7-131.9 c5-5.4,9.6-11.1,13.7-17.2l0,0c15.8-23.2,25.1-51.2,25.1-81.4c-2050.1,193.9-2114.8,129.2-2194.6,129.2l-2194.6,129.2z"/> </g> <g> <path class="st3" d="m-2194.6,198.3c-0.6,0-1.3,0.3-1.7,0.7l-56.7,59c-0.9,0.9-0.9,2.4,0.1,3.3c0.9,0.9,2.5,0.9,3.4-0.1l7.5-7.8 v63.2h30.8v-54.5h33.2v54.5h30.8v-63.2l7.5,7.8c0.5,0.5,1.1,0.7,1.7,0.7c0.6,0,1.2-0.2,1.7-0.7c0.9-0.9,1-2.4,0.1-3.3l-56.7-59 c-2193.3,198.5-2193.9,198.3-2194.6,198.3z m-2170.8,210v7.2l14.2,14.8v-22h-2170.8z m-2206.4,266.9v49.8h23.7v-49.8h-2206.4z"/> </g> </svg>
try explicitly update marker icon once map zoom changed demonstrated below:
google.maps.event.addlistener(map, 'zoom_changed', function() { marker.seticon(icon); }); modified jsfiddle
function initmap() { var map; var polyline; var polyoptions; var mapoptions = { zoom: 6, maptypeid: google.maps.maptypeid.roadmap, center: new google.maps.latlng(52.373743, 4.893114) }; map = new google.maps.map(document.getelementbyid('map-canvas'), mapoptions); var icon = { url: "http://filippopoderini.com/marker-07.svg", //anchor: new google.maps.point(23, 60), //scaledsize: new google.maps.size(46, 60), size: new google.maps.size(46, 60) } var marker = new google.maps.marker({ position: new google.maps.latlng(52.373743, 4.893114), map: map, draggable: false, icon: icon, }); google.maps.event.addlistener(map, 'zoom_changed', function() { marker.seticon(icon); }); } google.maps.event.adddomlistener(window, 'load', initmap);#map-canvas { height: 400px; }<script src="https://maps.google.com/maps/api/js"></script> <div id="map-canvas"></div>p.s. have been verified in chrome
v51
Comments
Post a Comment