Pull to refresh

Google Map API (custom labels and tooltips)

Reading time 4 min
Views 67K
Всем привет!
Только что заметил новый топик в песочнице link, про карты.
Попытаюсь дополнить его своим опытом в общении с гугло-картами.

Прелюдия



Есть проект в котором заказчик хочет подключить гугл-карты при этом в карте должны в обязательном порядке использоваться элементы его дизайна. Возможно я плохо искал, но ни в документации, ни на просторах интернета я не нашел более менее достойных публикаций по созданию кастомных элементов на карте. Только описание как подключить карту и как инициализировать маркер.

При этом подавляющее большинство расширений Google карт было для Google Map API v2 где еще требовался ключ для интеграции карт на свой сайт.

Label



Начну с маркеров — более менее у вас есть возможность вставить свой кастомный маркер на карту.
Под кастомным маркером я понимаю возможность задать любую картинку текст и стили для маркера.

С картинкой все довольно просто. Первое на что я наткнулся был этот сервис.
Все очень просто — выбираем картинку — получаем код. Немного поигравшись я смог сделать :hover для маркера
к примеру если маркер серый а когда на него наводишь он становится синим.

new google.maps.MarkerImage(
      'images/bg-num.png',
      new google.maps.Size(33,33),
      new google.maps.Point(0,0),
      new google.maps.Point(0,33)
    );


* This source code was highlighted with Source Code Highlighter.


API

MarkerImage(url:string, size?:Size, origin?:Point, anchor?:Point, scaledSize?:Size)

В моем примере:
— первый параметр путь к картинке
— размер в пикселях нашего маркера
— позиционирование картинки маркера (допустим маркер квадратный 33px, а картинка 33х66 — два состояния нормальное и состояние :hover)
— центр маркера (0, 33) — нижний левый угол. (0, 17) низ-центр и т.п.

таким образом чтобы сделать :hover для маркера — можно на маркер повесить обработчик

пример
var myLatlng = new google.maps.LatLng(50.022451, 36.227070);
var myOptions = {
  zoom: 10,
  scrollwheel: false,
  center: myLatlng,
  mapTypeId: google.maps.MapTypeId.ROADMAP,
  mapTypeControlOptions: {
    position: google.maps.ControlPosition.BOTTOM_LEFT
  }
}
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

var markerImage = new google.maps.MarkerImage(
    'images/bg-num.png',
    new google.maps.Size(33,33),
    new google.maps.Point(0,0),
    new google.maps.Point(0,33)
);
var markerImageHover = new google.maps.MarkerImage(
  'images/bg-num.png',
  new google.maps.Size(33,33),
  new google.maps.Point(0,33),
  new google.maps.Point(0,33)
);

var marker = new google.maps.Marker({
  icon: markerImage,
  position: myLatlng,
  map: map,
  title:"Hello World!"
});

google.maps.event.addListener(marker, 'mouseover', function() {
  marker.setIcon(markerImageHover);
});

google.maps.event.addListener(marker, 'mouseout', function() {
  marker.setIcon(markerImage);
});


* This source code was highlighted with Source Code Highlighter.


Первые проблемы


Все что до этого было — это все хорошо, но таких маркеров будет десяток на странице и нужно маркеры пронумеровать или подписать.

есть два варианта — первый использовать картинку для маркера с уже нанесенным текстом
что-то типа этого:

for (var i = 0; i < locations.length; i++) {
  var image = new google.maps.MarkerImage('marker' + i + '.png',
    new google.maps.Size(20, 34),
    new google.maps.Point(0, 0),
    new google.maps.Point(10, 34));
}


* This source code was highlighted with Source Code Highlighter.


второй способ который использует другой гугловский сервис Google's Chart API. в частности Dynamic Icons.

var links = [];
for (var i = 1; i < 3; i++) {
  link.push('https://chart.googleapis.com/chart?chst=d_map_pin_letter_withshadow&chld='+ i +'|FF0000|000000');
};

console.log(link); //["https://chart.googleapis.com/chart?chst=d_map_pin_letter_withshadow&chld=1|FF0000|000000", "https://chart.googleapis.com/chart?chst=d_map_pin_letter_withshadow&chld=2|FF0000|000000", "https://chart.googleapis.com/chart?chst=d_map_pin_letter_withshadow&chld=1|FF0000|000000" ]


* This source code was highlighted with Source Code Highlighter.


Времени у меня не было более тщательно разбираться с ними, но уже сейчас видел проблему что подставить туда мою картинку с ходу не получится, а тем более еще использовать active state для нее.

В общем выходом для меня стал — кастомный tooltip.

Tooltips в Google Map



Тултипы — это то, что появляется рядом с маркером когда вы на него наводите/кликаете.
В Google API для этого используется InfoWindow

var infowindow = new google.maps.InfoWindow({
 content: 'Hello world'
});


* This source code was highlighted with Source Code Highlighter.


Основные опции:
disableAutoPan boolean — после того как тултип появился карта либо центрируется на нем, либо нет
maxWidth px размер окна
content контент — то что будет показываться в тултипе. Здесь может быть все что угодно начиная от HTML и заканчивая Javascript'ом

var content = document.createElement('div');
content.innerHTML = "<strong>Hello world</strong> + JS ^_^";
var infowindow = new google.maps.InfoWindow({
 content: content
});

google.maps.event.addListener(marker, 'click', function() {
  infowindow.open(map, marker);
});

* This source code was highlighted with Source Code Highlighter.


НО при всем при этом у нас нет возможности убрать «обертку» у этого тултипа — тот самый белый закругленный balloon, и весь дизайн Нового и крутого тултипа будет обернут в стандартный. Нас это не устраивает.
Во время поиска решения наткнулся на пару «расширений» как InfoWindow так и Marker
один из таких плагинов после допиливания был приделан для моих нужд.

Так же я наткнулся на вот такой вот сборничек, тыц2 плагинов для карты.

Собственно после того как я допилил плагин Label, я получил возможность сделать свой гуглмап сервис с преферансом и девушками как кастомный маркер так и кастомный тултип для карты.

Примеры:

маркер буз текста + обычный тултип
мой кастом (чтобы не сильно палиться убрал половину стилей)

архив

Код не претендует на хороший + скорее всего тут есть что доработать, но оно работает и поэтому спасибо ему.

P.S. статья вышла и так слишком большая поэтому код в архиве не разбираю. Да и с работы пора уходить.

P.S.S Начинайте критиковать, делиться своим опытом и пинать
Tags:
Hubs:
+6
Comments 3
Comments Comments 3

Articles