Lecaw

Учимся создавать Web-сайты

Создание креативной карты с помощью Google Maps API

July 30, 2013 247hits

Вы создали новенький сайт; тщательно отобрали цвета, типографию и фотографии которые отлично отражают бренд компании. Но затем ваш клиент возможно спросит, куда добавить карту?! Конечно, можно использовать карту здания ‘wizard’, та, которая поставляется с каждым аккаунтом Google. Но, давайте посмотрим правде в глаза, у таких карт ограниченная функциональность и выглядят они все одинаково.

ДЕМО Исходные файлы

 

С Google maps API, вы можете создать свою собственную карту, с дополнительными функциями. Историческая карта Portsmouth, полностью создана на данном API.

Эта серия уроков научит вас создавать собственные карты, используя Google Maps API.

Вот список всех моментов, которые мы разберем в серии уроков Google maps API: создание пользовательских цветов карты, меню и маркеров; перенос уже готового дизайна карты (например, карты Handrawn), наложив его на масштабируемую Google карту; присоединение к международной Flickr API; оптимизация изображений; адаптивный дизайн. Или другими словами, после того как вы ознакомитесь со всеми уроками, вы не только будете уметь создавать уникальные карты, но и узнаете про некоторые вещи, имеющие отношение к созданию любого веб-сайта.

Что такое API?

API или Application Programming Interface, является необычным способом предоставления ряда команд (например, функций) компании (например, Facebook, Twitter, You Tube, Google). Идея состоит в том, что вы можете использовать эти команды для создания индивидуального дизайна своего содержания. Например, в случае с Google Maps API "содержание" является картой, тогда как в случае с Flickr API, "содержание" является фотографиями.

Когда люди говорят ‘mash-ups’, это означает, что они объединили содержание API, двух или более компаний, в нашем случае, будут использоваться фотографии с Flickr, которые разместим на карте Google. Существуют буквально тысячи различных API, взгляните на Programmable Web для получения более подробной информации.

Мы рассмотрим Flickr API, в одном из следующих уроков, но для начала мы сосредоточимся на Google Maps API. Это позволит вам настроить карту под свой проект, например настройка цвета, маркеров, стиль всплывающих окон, уровень детализации и масштаба, отображение данных в реальном времени, группировка маркеров, планирование маршрутов.... Список можно продолжать бесконечно!

Начало работы с Google Maps

Для начала вам понадобится аккаунт Google. Если у вас его нет, перейдите на сайт Google и зарегистрируйтесь.

Вооружившись Google аккаунтом, перейдите к Google Maps API. Основные разделы этой страницы: -

  • Руководство разработчика: Фрагменты кода, которые служат в качестве образца API функций.
  • Справочник по API: полный список и описание всех функций в API. Используйте его в качестве "списка покупок", это все то, что можно сделать с помощью API. (Имейте в виду, что есть дополнительные библиотеки, которые предоставляют еще больше дополнительных возможностей. Мы рассмотрим их позже).

Прежде чем пойдем дальше, необходимо получить ключ API (длинная последовательность уникальных букв и цифр). Вы можете получить ваш ключ здесь.

Создание первой карты

Чтобы заставить карту работать, обратите внимание на строчку кода: "YOUR_API_KEY_GOES_HERE”, добавьте туда полученный API ключ. Ваша карта должна быть похожа на карту выше.

Основная структура кода – контейнер (festival-map), в который JavaScript загружает карту.

Для начала объявите Ваше приложение как - HTML5, используя объявление Doctype <!-- HTML DOCTYPE-->.

Затем перейдем к стилю карты; укажем его между тегами <style type="text/css"> и </style>. Вы можете изменить стиль #festival-map в зависимости от того, где вы хотите разместить карту. Мы сделаем карту в "полный экран", а затем установим ширину и высоту со значением 100% и удалим отступы.

Пока что пропустим JavaScript код. В теле документа создадим пустой HTML-объект, то есть div (festival-map), в котором будет находиться карта.

<div id="festival-map"></div>

ОК - теперь, взглянем на JavaScript код, Первым делом подключим Google Maps API ключ.

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY_GOES_HERE&sensor=true"></script>

Затем запускаем JavaScript, который создает карту. JavaScript функции (например loadFestivalMap) представляют собой набор команд, которые работают только при их вызове.

  • Параметры конфигурации (festivalMapOptions) карты (например, широта и долгота, уровни масштабирования и т.д.) установлены по умолчанию, далее создается пустая переменная JavaScript (festivalMap), к которой будет присвоена карта. (Совет: itouchmap представляет собой удобный сервис для поиска координат любого места.)
  • Затем функция loadFestivalMap инициирует следующую строчку: google.maps.event.addDomListener (окно, 'загрузка', loadFestivalMap);
  • Эта функция создает карту и присваивает её переменной JavaScript (т.е. festivalMap). При этом, функция также имеет параметры конфигурации и загружает карту в созданный festival-map DIV.
  • Наконец, функция loadMapMarkers инициируется в последней строке функции loadFestivalMap.

Изображения в качестве маркеров

К этому моменту вы должны иметь работающую карту. Если все сделали правильно, можно переходить к следующему этапу.

На данном этапе, разберем использование собственных изображений в качестве маркеров. Аналогично тому, как вы настраиваете свойства самой карты (например, центр, масштаб и т.д., как показано выше), вы в любой момент можете изменить свойства отображения маркеров. Чтобы использовать изображение в качестве маркера карты, нужно просто установить свойство иконки вашего маркера.

Обычно маркеры используются в формате .png, потому что такой формат позволяет использовать изображение с прозрачным фоном.

Также установим 'интерактивную' область для каждого маркера. Это действительно важно, так как маркеры должны иметь определенное наложение.

Сначала вы создаете иконку (markerIconGlastonbury), а затем форму (markerShapeGlastonbury), после этого связываете оба элемента в качестве маркера (markerGlastonbury).

// Установка положения маркера.
var markerPositionGlastonbury = new google.maps.LatLng(51.159803, -2.585585);
// Настройка значков, которые используются с маркером.
var markerIconGlastonbury = {
 url: 'icons/icon_glas_uk.png',
 // Размер файла изображения.
 size: new google.maps.Size(225, 120),
 // Точки на изображении, для измерения якоря. 0, 0 -верхний левый.
 origin: new google.maps.Point(0, 0),
 // Координаты точки X привязки по маркеру. Например, если ваша маркер был в виде канцелярской кнопки, то якорем будет кончик штифта. 
Anchor: new google.maps.Point(189, 116)
};
// Установка формы, которая будет использоваться с маркером.
var markerShapeGlastonbury = {
 coord: [12,4,216,22,212,74,157,70,184,111,125,67,6,56],
 type: 'poly'
};
// Создание маркера.
markerGlastonbury = new google.maps.Marker({
 // Использует набор позиции выше.
 position: markerPositionGlastonbury,
 // Добавляет маркер на карте.
 map: festivalMap,
 title: 'Glastonbury Festival',
 // Присваивает изображение иконки к маркеру, установленное выше.
 icon: markerIconGlastonbury,
 //Присваивает форму маркеру, установленную выше.
 shape: markerShapeGlastonbury,
 // Устанавливает z-index маркера.
 zIndex:102
});

Несколько слов о z-index

Элементы, например маркеры, могут иметь такие координаты как х, у и z. Z-index - глубина. Она определяет, в каком порядке элементы находятся друг на друге (тоже самое как слои в Photoshop).

Если координаты х и у, у элементов одинаковые, то элементы с более высоким z-index будут находиться поверх элементов с более низким z-index. (z-index работает только на позиционируемых элементах, например, relative, fixed или absolute).

Уровень детализации и изменение цвета

Пока что карта не очень вписывается в общий дизайн проекта. К счастью, это очень легко исправить при помощи параметра API ‘style’ для настройки внешнего вида карты.

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

Шаг 1

При помощи JSON wizard, можно предварительно настроить карту, например Вы можете изменить почти все цвета, добавлять и удалять детали, установить цвет заливки и т.д. (JSON, это просто способ форматирования информации.)

Шаг 2

После того как вы настроили стиль в JSON wizard, нажмите кнопку Show JSON и скопируйте код.

Шаг 3

Перейдем к своему HTML документу, добавьте переменную, сразу после открытия тега JavaScript, а затем вставьте код.

var style_festival = [
 {
 "featureType": "administrative",
 "stylers": [
 { "visibility": "off" }
 ]
 },{
 "featureType": "poi",
 "stylers": [
 { "visibility": "off" }
 ]
 },{
 "featureType": "transit",
 "stylers": [
 { "visibility": "off" }
 ]
 },{
 "featureType": "road",
 "stylers": [
 { "visibility": "off" }
 ]
 },{
 "featureType": "landscape",
 "stylers": [
 { "color": "#FFE200" }
 ]
 },{
 "featureType": "water",
 "stylers": [
 { "visibility": "on" },
 { "color": "#4f92c6" }
 ]
 }
];

Шаг 4

Теперь мы должны заставить свою карту обрабатывать информацию, которую только что установили. Для этого используем  функцию StyledMapType.

var styled_festival = new google.maps.StyledMapType(style_festival, {name: "Festival style"});

Шаг 5

Наконец, вы должны присвоить новый стиль для карты, чтобы его 'активировать'.

festivalMap.mapTypes.set('map_styles_festival', styled_festival);
festivalMap.setMapTypeId('map_styles_festival');

Я на самом деле добавил два стиля. Один активируется сразу, а другой будет активирован при уменьшении карты, для более высокого уровня детализации.

Всплывающие блоки и динамический зум

Настало время добавить функциональности! Можно использовать встроенные всплывающие окна, но вместо этого мы собираемся использовать библиотеку Infobox.

Шаг 1

Загрузите копию библиотеки Infobox. Распакуйте её и сохраните в папку с картой. Затем добавьте эту строку в верхнюю часть вашего HTML файла.

<script src="/infobox/infobox.js" type="text/javascript"></script>

Шаг 2

Добавьте z-index для каждого маркера карты так, чтобы новые открывались поверх уже открытых.

// Создание маркера.
markerGlastonbury = new google.maps.Marker({
 // Использует набор позиции выше.
 position: markerPositionGlastonbury,
 // Добавляет маркер на карте.
 map: festivalMap,
 title: 'Glastonbury Festival',
 // Присваивает изображение иконки к маркеру, установленное выше.
 icon: markerIconGlastonbury,
 // Присваивает форму маркеру, установленную выше.
 shape: markerShapeGlastonbury,
 // Устанавливает z-index маркера.
 zIndex:107
});

Шаг 3

Добавьте следующий код после каждого маркера.

// Создание информации для входа
var boxTextGlastonbury = document.createElement("div");
boxTextGlastonbury.style.cssText = pop_up_info;
boxTextGlastonbury.innerHTML = '';
// Установка конфигурации во всплывающем окне
var infoboxOptionsGlastonbury = {
 content: boxTextGlastonbury
 ,disableAutoPan: false
 ,maxWidth: 0
 ,pixelOffset: new google.maps.Size(-241, 0)
 ,zIndex: null
 ,boxStyle: {
 background: "url('infobox/pop_up_box_top_arrow.png') no-repeat"
 ,opacity: 1
 ,width: "430px"
 }
 ,closeBoxMargin: "10px 2px 2px 2px"
 ,closeBoxURL: "icons/button_close.png"
 ,infoBoxClearance: new google.maps.Size(1, 1)
 ,isHidden: false
 ,pane: "floatPane"
 ,enableEventPropagation: false
};
// Создание всплывающего инфобокса для маркера, с опциями конфигурации, установленными выше
infoboxGlastonbury = new InfoBox(infoboxOptionsGlastonbury);
// Добавление 'event listener' к маркеру при нажатии.
google.maps.event.addListener(markerGlastonbury, "click", function (e) {
 // Открытие блока с информацией
 infoboxGlastonbury.open(festivalMap, this);
 // Изменение z-index маркера, чтобы маркер появляется поверх других маркеров.
 this.setZIndex(google.maps.Marker.MAX_ZINDEX + 1);
 //  Увеличивает или уменьшает карту.
 setZoomWhenMarkerClicked();
 // Устанавливает маркер в центр карты.
 festivalMap.setCenter(markerGlastonbury.getPosition());
});

Шаг 4

В коде выше, мы вызвали функцию setZoomWhenMarkerClicked, что позволит изменять масштаб карты, при нажатии на маркер. Но это не будет работать без следующей функции:

function setZoomWhenMarkerClicked(){
var currentZoom = festivalMap.getZoom();
 if (currentZoom < 7){
 festivalMap.setZoom(7);
 }
}

Шаг 5

Поскольку карта может увеличиваться в масштабе, нужно показать все детали более подробно. Это делается путем добавления обработчика событий и метода getZoom, который непрерывно проверяет изменение масштаба. Если масштаб был увеличен (выше 6 уровня), используется метод setMapTypeId для установки второго (более детального) стиля.

// Постоянно проверяет изменение масштаба. 
.google.maps.event.addListener(festivalMap, "zoom_changed", function() {
 var newZoom = festivalMap.getZoom();
 // Если масштаб карты изменен, переключает в более детальный режим.
 if (newZoom > 6){
 festivalMap.setMapTypeId('map_styles_festival_zoomed');
 }
 else {
 festivalMap.setMapTypeId('map_styles_festival');
 }
});

Шаг 6

Стиль инфобокса:

var pop_up_info = "border: 0px solid black; background-color: #ffffff; padding:15px; margin-top: 8px; border-radius:10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; box-shadow: 1px 1px #888;";

Баннеры и навигация

Мы почти закончили с внешним видом карты, но прежде мы добавим несколько элементов навигации.

Google Maps API имеет 12 областей, где вы можете добавить кнопки управления картой, баннеры и т.д. Вы можете полностью настроить эти области, добавив HTML и т.д. На свое усмотрение.

Мы собираемся создать пользовательский баннер и навигацию на правой стороне карты.

Шаг 1

Сначала необходимо определить функции для создания меню.

// Функция, которая создает область панели управления, то есть, заголовок карты и 2 кнопки под ним.
function createControlPanel (controlPanelDiv){
 controlPanelDiv.style.padding = '0px';
 controlUI = document.createElement('div');
 controlUI.style.border='0px solid white';
 controlUI.style.margin='10px';
 controlUI.style.paddingTop='11px';
 controlUI.style.paddingBottom='5px';
 controlUI.style.paddingLeft='0px';
 controlUI.style.paddingRight='0px';
 controlUI.style.width='245px';
 controlUI.style.height='419px';
 controlPanelDiv.appendChild(controlUI);
 // Заголовок карты
 titleBar = document.createElement('div');
 titleBar.style.backgroundColor = '#89CBED';
 titleBar.style.height='255px';
 titleBar.style.width='245px';
 titleBar.style.marginTop='0px';
 titleBar.style.marginBottom='0px';
 titleBar.style.marginLeft='0px';
 titleBar.style.marginRight='0px';
 titleBar.style.paddingTop='6px';
 titleBar.style.paddingBottom='2px';
 titleBar.style.paddingLeft='0px';
 titleBar.style.paddingRight='0px';
 titleBar.style.borderTopLeftRadius='5px';
 titleBar.style.borderTopRightRadius='5px';
 titleBar.style.borderBottomLeftRadius='0px';
 titleBar.style.borderBottomLeftRadius='0px';
 titleBar.style.cssFloat='left';
 titleBar.innerHTML = '';
 controlUI.appendChild(titleBar);
 yellowStripe = document.createElement('div');
 yellowStripe.style.backgroundColor = '#FFFF00';
 yellowStripe.style.height='2px';
 yellowStripe.style.width='245px';
 yellowStripe.style.marginTop='3px';
 yellowStripe.style.marginBottom='3px';
 yellowStripe.style.marginLeft='0px';
 yellowStripe.style.marginRight='0px';
 yellowStripe.style.paddingTop='0px';
 yellowStripe.style.paddingBottom='0px';
 yellowStripe.style.paddingLeft='0px';
 yellowStripe.style.paddingRight='0px';
 yellowStripe.style.cssFloat='left';
 yellowStripe.style.fontFamily='Georgia, serif';
 yellowStripe.style.fontSize='14px';
 controlUI.appendChild(yellowStripe);
 smallEvents = document.createElement('div');
 smallEvents.style.height='108px';
 smallEvents.style.width='129px';
 smallEvents.style.marginTop='0px';
 smallEvents.style.marginBottom='0px';
 smallEvents.style.marginLeft='0px';
 smallEvents.style.marginRight='0px';
 smallEvents.style.paddingTop='0px';
 smallEvents.style.paddingBottom='2px';
 smallEvents.style.paddingLeft='0px';
 smallEvents.style.paddingRight='0px';
 smallEvents.style.cssFloat='left';
 smallEvents.innerHTML = '';
 controlUI.appendChild(smallEvents);
 brolly = document.createElement('div');
 brolly.style.height='149px';
 brolly.style.width='94px';
 brolly.style.marginTop='0px';
 brolly.style.marginBottom='0px';
 brolly.style.marginLeft='0px';
 brolly.style.marginRight='0px';
 brolly.style.paddingTop='0px';
 brolly.style.paddingBottom='2px';
 brolly.style.paddingLeft='0px';
 brolly.style.paddingRight='0px';
 brolly.style.cssFloat='left';
 brolly.innerHTML = '';
 controlUI.appendChild(brolly);
}

Приведенный выше код, использует свойство style , для определения стиля элемента при помощи JavaScript. Для преобразования CSS с помощью JavaScript, вам нужно помнить, что свойства, которые не имеют дефис остаются неизменными, а те у которых присутствует дефис, преобразуются в CamelCase, например, фоновое изображение становится BackgroundImage. Исключением является float, который будет cssFloat.

Шаг 2

Затем создайте контейнер, в котором разместим навигацию, инициировав функцию которую мы создали в шаге 1.

var controlPanelDiv = document.createElement('div');
var festivalMapControlPanel = new createControlPanel(controlPanelDiv, festivalMap);

Шаг 3

Затем добавим кнопки управления картой в позицию RIGHT_TOP.

festivalMap.controls[google.maps.ControlPosition.RIGHT_TOP].push(controlPanelDiv);

Шаг 4

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

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

Таким образом, чтобы добавить ещё немного функциональности, я добавил кнопку сброса состояния карты, и разместил её в позиции RIGHT_BOTTOM.

function createResetButton (resetButtonDiv){
 resetButtonDiv.style.padding = '0px';
 controlUI2 = document.createElement('div');
 controlUI2.style.backgroundColor = '#ffffff';
 controlUI2.style.borderRadius='5px';
 controlUI2.style.margin='10px';
 controlUI2.style.paddingTop='2px';
 controlUI2.style.paddingBottom='2px';
 controlUI2.style.paddingLeft='2px';
 controlUI2.style.paddingRight='5px';
 controlUI2.style.textAlign='center';
 controlUI2.style.width='148px';
 controlUI2.style.height='31px';
 controlUI2.innerHTML = '';
resetButtonDiv.appendChild(controlUI2);
}

Шаг 5

Осталось только добавить функцию handelRequests:

// Происходит вызов функции при нажатии на кнопку сброса.
function handelRequests (buttonPressed) {
if (buttonPressed === "reset"){
 // Сбрасывает масштаб, позицию карты и z-index маркера к его позиции по умолчанию. Также закрывает все работающие инфобоксы.
 festivalMap.setZoom(festivalMapZoom);
 festivalMap.setCenter(festivalMapCenter);
 resetZindexes();
 closeAllInfoboxes();
}
else if (buttonPressed === "small_events"){
 alert("This button will do something useful in a later tutorial!");
}
else if (buttonPressed === "rainfall"){
 alert("This button will do something useful in a later tutorial!");
}
}

ДЕМО Исходные файлы

 

Дополнительная информация

Влерий Аликин - веб-разработчик & дизайнер. Соучредитель и член команды Lecaw.

Эл. почта
RATTING:
(1 Голосовать)

Оставить комментарий