Карты google это очень популярный сервис, который используется повсеместно. Даже в своем дефолтном виде он довольно удобен. Но, после того как разработчик освоил базовые возможности google карт, он обязательно захочет побольше. Карту нужно будет кастомизировать. И одними только новыми иконками тут не обойтись. Сегодня я расскажу о том, как добавить на google карту свои кнопки и заставить их работать.
Зачем могут понадобиться дополнительные кнопки? Ну например:
- задать стартовую/конечную точку маршрута
- добавить маркер определенного типа
- включить или выключть отображение маркеров или маршрутов
- ну и тд. и т.п.
- задать стили для кнопки
- создать кнопку и разместить её на карте
- написать функцию - обработчик нажатия
Для начала поместим карту на страницу:
<html> <head> <title>Google maps custom buttons</title> <meta name="description" content="Google maps custom buttons example page." /> <script src="http://maps.googleapis.com/maps/api/js?sensor=true" type="text/javascript"></script> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js" type="text/javascript"></script> <script type="text/javascript"> $(function (){ var myLatlng = new google.maps.LatLng(56.949280990627514, 24.111900329589844); var myOptions = { zoom: 12, center: myLatlng, mapTypeId: google.maps.MapTypeId.ROADMAP }; map = new google.maps.Map(document.getElementById("map"), myOptions); AddButtonsOnMap(map); }); </script> </head> <body> <div style="width:1000px; margin-left:auto; margin-right:auto;"> <div id="map" style="width:100%; height:400px; border: 1px solid black;"></div> </div> </body> </html>Теперь у нас есть стандартная карта, на которой видна Рига. Можно посмотреть, что там получилось и переходить к внешнему виду кнопок. Задаем стили:
<style type="text/css"> .CustomButton { background-color: white; border:1px solid black; cursor: pointer; text-align:center; margin-top:5px; margin-left:3px; } .CustomButtonText { font-size:12px; padding-left:4px; padding-right:4px; } </style>Простые такие кнопочки. Вы можете использовать все богатство css для их дизайна и заставить эти кнопки сверкать всеми цветами радуги.
Теперь переходим к созданию кнопок. Это довольно простой процесс. Кнопка представляет собой div. Очень просто.
//функция, создает кнопки в документе и назначает класс, текст и тайтл для созданной кнопки function CreateButton (text, title, id){ //создать элемент var BtnDiv = document.createElement('DIV'); //Назначить имя CSS класса BtnDiv.className = "CustomButton"; //задать тайтл BtnDiv.title = title; //Задать id элемента BtnDiv.id = id; // var BtnText = document.createElement('DIV'); //Задать CSS класс BtnText.className = "CustomButtonText"; //Задать текст кнопки BtnText.innerText = text; //Вставить блок текста в кнопку BtnDiv.appendChild(BtnText); return BtnDiv; }
Теперь кнопки нужно поместить на карту и назначить им обработчики. Обработчик клика по кнопке будет совсем простой: он просто запишет состояние в переменную и изменит внешний вид курсора, для того, чтобы пользователь увидел, что клик не пропал зазря.
function AddButtonsOnMap(map){ //Создать кнопку "Старт" var StartButton = CreateButton("Start", "Set start point", "StartButton"); //Разместить кнопку "Старт" на карте map.controls[google.maps.ControlPosition.TOP_LEFT].push(StartButton); //Создать кнопку "Финиш" var FinishButton = CreateButton("Finish", "Set finish point", "FinishButton"); //Поместить кнопку "Финиш" на карту map.controls[google.maps.ControlPosition.TOP_LEFT].push(FinishButton); startButtonInit = 'none'; finishButtonInit = 'none'; //Создаем обработчик кнопки "Старт" google.maps.event.addDomListener(StartButton, 'click', function () { //Перезаписывам переменную состояния кнопки "Старт" startButtonInit = 'yes'; //Изменяем внешний вид курсора map.setOptions({ draggableCursor: "crosshair" }); }); //Создаем обработчик кнопки "Старт" google.maps.event.addDomListener(FinishButton, 'click', function () { //Перезаписываем переменную состояния кнопки "Старт" finishButtonInit = 'yes'; //Изменяем внешний вид курсора map.setOptions({ draggableCursor: "crosshair" }); }); google.maps.event.addListener(map, 'click', function (location) { //Вернуть курсору нормальный вид map.setOptions({ draggableCursor: "pointer" }); if (startButtonInit == 'yes') { //Задать маркеру новое расположение на карте startMarker.setPosition(location.latLng); } else if (finishButtonInit == 'yes'){ //Задать маркеру новое расположение на карте finishMarker.setPosition(location.latLng); } //Изменить состояние кнопок finishButtonInit = 'none'; startButtonInit = 'none'; }); }
Поскольку это просто пример того как работать с кастомными кнопками в google maps, функционал очень прост:
- кликаем на кнопку -> меняется состояние
- кликаем на карту -> изменяется положение нужного маркера, сбрасываются состояния кнопок.
Дальше можно отслеживать состояния маркеров, прокладывать маршрут между ними. Неплохо бы поработать еще со стилями кнопок, например анимировать нажатие или скруглить углы.
В общем дальше можно эти кастомные кнопки использовать в google картах как угодно, вы ограничены только вашей фантазией и API google карт. Всем удачи! Если есть какие-то вопросы- задавайте смело.
P.S. Вот тут: www.difftools.net/map.html можно посмотреть рабочий пример и позаимствовать исходники, если кому надо.
Комментариев нет:
Отправить комментарий