Всем привет!
Только что заметил новый топик в песочнице link, про карты.
Попытаюсь дополнить его своим опытом в общении с гугло-картами.
Есть проект в котором заказчик хочет подключить гугл-карты при этом в карте должны в обязательном порядке использоваться элементы его дизайна. Возможно я плохо искал, но ни в документации, ни на просторах интернета я не нашел более менее достойных публикаций по созданию кастомных элементов на карте. Только описание как подключить карту и как инициализировать маркер.
При этом подавляющее большинство расширений Google карт было для Google Map API v2 где еще требовался ключ для интеграции карт на свой сайт.
Начну с маркеров — более менее у вас есть возможность вставить свой кастомный маркер на карту.
Под кастомным маркером я понимаю возможность задать любую картинку текст и стили для маркера.
С картинкой все довольно просто. Первое на что я наткнулся был этот сервис.
Все очень просто — выбираем картинку — получаем код. Немного поигравшись я смог сделать :hover для маркера
к примеру если маркер серый а когда на него наводишь он становится синим.
API
MarkerImage(url:string, size?:Size, origin?:Point, anchor?:Point, scaledSize?:Size)
В моем примере:
— первый параметр путь к картинке
— размер в пикселях нашего маркера
— позиционирование картинки маркера (допустим маркер квадратный 33px, а картинка 33х66 — два состояния нормальное и состояние :hover)
— центр маркера (0, 33) — нижний левый угол. (0, 17) низ-центр и т.п.
таким образом чтобы сделать :hover для маркера — можно на маркер повесить обработчик
пример
Все что до этого было — это все хорошо, но таких маркеров будет десяток на странице и нужно маркеры пронумеровать или подписать.
есть два варианта — первый использовать картинку для маркера с уже нанесенным текстом
что-то типа этого:
второй способ который использует другой гугловский сервис Google's Chart API. в частности Dynamic Icons.
Времени у меня не было более тщательно разбираться с ними, но уже сейчас видел проблему что подставить туда мою картинку с ходу не получится, а тем более еще использовать active state для нее.
В общем выходом для меня стал — кастомный tooltip.
Тултипы — это то, что появляется рядом с маркером когда вы на него наводите/кликаете.
В Google API для этого используется InfoWindow
Основные опции:
disableAutoPan boolean — после того как тултип появился карта либо центрируется на нем, либо нет
maxWidth px размер окна
content контент — то что будет показываться в тултипе. Здесь может быть все что угодно начиная от HTML и заканчивая Javascript'ом
НО при всем при этом у нас нет возможности убрать «обертку» у этого тултипа — тот самый белый закругленный balloon, и весь дизайн Нового и крутого тултипа будет обернут в стандартный. Нас это не устраивает.
Во время поиска решения наткнулся на пару «расширений» как InfoWindow так и Marker
один из таких плагинов после допиливания был приделан для моих нужд.
Так же я наткнулся на вот такой вот сборничек, тыц2 плагинов для карты.
Собственно после того как я допилил плагин Label, я получил возможность сделать свойгуглмап сервис с преферансом и девушками как кастомный маркер так и кастомный тултип для карты.
Примеры:
маркер буз текста + обычный тултип
мой кастом (чтобы не сильно палиться убрал половину стилей)
архив
Код не претендует на хороший + скорее всего тут есть что доработать, но оно работает и поэтому спасибо ему.
P.S. статья вышла и так слишком большая поэтому код в архиве не разбираю. Да и с работы пора уходить.
P.S.S Начинайте критиковать, делиться своим опытом и пинать
Только что заметил новый топик в песочнице 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 Начинайте критиковать, делиться своим опытом и пинать