Custom Markers in Google Maps not Showing up in Fi

问题:

I have a map that I have created in rails using the google maps for rails gem. It works in Chrome and Safari but it does not display custom .svg markers in Firefox 29. It does display the custom image for clusters (which is a png).

I have bumped into a number of threads from the far past (FF 8 and 9) that said there was an issue that was resolved in 9 or 10 related to cors. However, it does not seem like it has been an issue for awhile, and especially not for 29.

Does anyone know if this is a firefox issue or google maps for rails gem issue? If it is either one what is the solution.

Update: Swapping svg for png works for now. This does not however solve the underlying issue. I would like to use a svg so I can pass in color variables.

Still no luck, both chrome and firefox show that the image is being download in developer tools. The image is viewable in firefox and chrome in the images directory. Below is the code for my SVG:

    <?xml version="1.0" encoding="utf-8"?>
    <!-- Generator: Adobe Illustrator 17.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
    <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"     "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
    <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg"       xmlns:xlink="http://www.w3.org/1999/xlink" x="20px" y="20px"
 viewBox="0 0 15 15" enable-background="new 0 0 15 15" xml:space="preserve">
     <circle fill="#45A6DD" cx="7.5" cy="7.5" r="5.6"/>
   </svg>

回答1:

Try defining a width and height for your SVG

<?xml version="1.0" encoding="utf-8"?>
    <!-- Generator: Adobe Illustrator 17.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
    <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"     "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
    <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg"       xmlns:xlink="http://www.w3.org/1999/xlink" x="20px" y="20px" height="20px" width="20px"
 viewBox="0 0 15 15" enable-background="new 0 0 15 15" xml:space="preserve">
     <circle fill="#45A6DD" cx="7.5" cy="7.5" r="5.6"/>
   </svg>

I have found that it can be picky when drawing SVGs with no defined width/height.

Addition

@Justin Lau has added that the marker when defined in Javascript will need the original size, even if you're using scaledSize

Many thanks to Justin for the contribution.

回答2:

Need to add a detail - when an SVG is served via a data URL and the SVG is URL encoded (not base64..), Firefox seems to choke on '#' so I had to switch to using fill="rgb()" notation and/or named colors.

Some references as to why / when to use data URL for SVG: https://codepen.io/tigt/post/optimizing-svgs-in-data-uris How to use SVG markers in Google Maps API v3

Hope this helps someone!

回答3:

To supplement Idiot211's answer, besides adding the width and height attributes to the SVG element, you must define the marker icon object with size to make it works on FireFox, if you only have scaledSize previously.

// es6 syntax
const markerIcon = {
    url: '../map-marker.svg',
    size: new google.maps.Size(100, 100),     // original size you defined in the SVG file
    scaledSize: new google.maps.Size(50, 50), // desired display size
    anchor: new maps.Point(25, 50),
};