© 2021 WebHive

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

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<?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>

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

1
2
3
4
5
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 со смещением.

Комментарии