SVG маркеры на Google картах

30 декабря 2014 Автор: Роман Татауров

Потребовалось использовать в качестве маркера для карт гугла вот эту иконку — http://bluefirex.de/material-icons/icons/core/home.svg. Полез разбираться с SVG маркерами для гугловых карт.

Открываем SVG файл. Как известно это обычный XML-файл. Собственно из всего файла нам важен тэг path в котором собственно и находится набор команд для рисования иконки.

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="20px" height="19px" viewBox="0 0 20 19" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
    <!-- Generator: Sketch 3.0.3 (7891) - http://www.bohemiancoding.com/sketch -->
    <title>home</title>
    <desc>Created with Sketch.</desc>
    <defs></defs>
    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
        <g id="Core" sketch:type="MSLayerGroup" transform="translate(-506.000000, -255.000000)" fill="#000000">
            <g id="home" transform="translate(506.000000, 255.500000)" sketch:type="MSShapeGroup">
                <path d="M8,17 L8,11 L12,11 L12,17 L17,17 L17,9 L20,9 L10,0 L0,9 L3,9 L3,17 L8,17 Z" id="Shape"></path>
            </g>
        </g>
    </g>
</svg>

Создаём объект

iconHome: ->
  {
    anchor: new google.maps.Point(8, 17),
    path: 'M8,17 L8,11 L12,11 L12,17 L17,17 L17,9 L20,9 L10,0 L0,9 L3,9 L3,17 L8,17 Z',
    ...

Первый элемент в path это M8,17 т. е. Move 8,17. Соответственно начало координат маркеры надо сдвинуть на это значение. Для этого и добавлен параметр anchor со смещением.

WebHive

SVG маркеры на Google картах

Комментарии