Пользовательские маркеры в Google Maps не отображаются в Firefox

У меня есть карта, которую я создал в рельсах, используя карты google для rails gem. Он работает в Chrome и Safari, но не отображает пользовательские маркеры .svg в Firefox 29. Он отображает пользовательское изображение для кластеров (это png).

Я столкнулся с несколькими потоками из далекого прошлого (FF 8 и 9), в котором говорилось, что проблема была решена в 9 или 10, связанных с cors. Тем не менее, похоже, что это не проблема, а особенно не для 29.

Кто-нибудь знает, является ли это проблемой firefox или картами google для проблемы с рельсами? Если это то, что является решением.

Update: На данный момент работает swapping svg для png. Однако это не решает основной проблемы. Я хотел бы использовать svg, чтобы передать цветные переменные.

По-прежнему не повезло, и хром, и firefox показывают, что изображение загружается в средствах разработчика. Изображение можно просмотреть в firefox и chrome в каталоге изображений. Ниже приведен код моего 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

Попробуйте определить ширину и высоту вашего 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>

Я обнаружил, что он может быть разборчивым при рисовании SVG без определенной ширины/высоты.

Добавление

@Юстин Лау добавил, что маркер, определенный в Javascript, будет иметь оригинальный размер, даже если вы используете scaledSize

Большое спасибо Джастину за вклад.

Ответ 2

Нужно добавить деталь - когда SVG обслуживается через URL-адрес данных, а SVG кодируется URL (а не base64..), Firefox, похоже, задыхается от "#", поэтому мне пришлось переключиться на использование обозначения fill="rgb()" и/или названные цвета.

Некоторые рекомендации относительно того, почему/когда использовать URL-адрес данных для SVG: https://codepen.io/tigt/post/optimizing-svgs-in-data-uris Как использовать маркеры SVG в API Google Maps v3

Надеюсь, это поможет кому-то!

Ответ 3

Чтобы добавить ответ Idiot211, добавив атрибуты width и height к элементу SVG, вы должны определить объект значка маркера с помощью size, чтобы он работал на FireFox, если у вас есть только scaledSize ранее.

// 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),
};