Практическое задание №8. Интерактивные карты
Создаем интерактивную карту при помощи сервиса Google Maps.
Интерактивные карты используются для визуализации больших массивов данных, имеющих географические параметры. Вариантов их применения может быть масса, начиная от карт преступлений в масштабах страны или города, заканчивая отметками мест романтических свиданий.
Общая схема создания интерактивных карт такова:
- Определяетесь с идеей — что будем визуализировать?
- Выбираете точку на карте.
- Ставите отметку (определенное условное обозначение).
- Во всплывающее из маркера окно добавляете произвольное содержимое: фото, текст, гиперссылки — которое, согласно вашей идее, связано с данной точкой на карте.
- Сохраняем карту, даем ей название.
- Ищем код для вставки в сайт или блог (embed).
- В режиме html вставляем код в страницу вашего сайта / блога.
Google Street View / Просмотр (панорамы) улиц Яндекс. Карт
Данные функции картографических сервисов позволяют в интерактивной форме просмотреть улицы городов, отснятых специальными автомобилями “Яндекса” и Google.
Панорамы улиц, так же, как и интерактивные карты, могут быть легко встроены через embed в страницу сайта или блога. Данная функция используется не только журналистами в мультимедийных историях, но, например, создателями коммерческих ресурсов по продаже / аренде недвижимости, корпоративных сайтов и т.д.
Практическое задание
В блоге, который вы создавали в рамках выполнения задания №4, создаете новый пост для этого задания.
Создаете интерактивную карту в сервисе Google Maps (то же самое можно сделать и при помощи сервиса “Яндекс. Карты”, однако для простоты и краткости мы остановимся здесь в задании только на Google Maps. Если вы можете самостоятельно выполнить ту же задачу, используя сервис от “Яндекса”, — замечательно. Подобное выполнение также будет зачтено)с шестью маркерами. Тематика — произвольная. Это могут быть:
- 6 достопримечательностей Екатеринбурга, которые должны все знать;
- 6 туристических мест России, которые, по вашему мнению, нужно посетить;
- 6 кофеен Екатеринбурга, где делают лучший американо;
- и т.д.
Google Maps
- Открываете maps.google.com
- Слева вверху открываете меню и переходите по ссылке “Мои карты”
3. Слева внизу — “Создать карту”.
4. Выбираете нужную страну / город через уменьшение или увеличение масштаба карты, либо можно воспользоваться поиском по названиям объектов или улиц в строке вверху. У вас откроется следующее окно, в котором будет функция “добавить маркер”. После нажатия на соответствующую кнопку курсор мыши превращается в плюсик, который можно поставить на нужный вам объект.
Добавляете шесть маркеров на нужных вам точках.
5. После создания карты в верхнем левом углу изменяете ее название. И нажимаете кнопку поделиться — для того, чтобы карту можно было встроить в страницу сайта / блога она должна быть публичной, не в закрытом доступе.
6. Встраиваем карту в ваш сайт / блог через embed (html режим).
Для платформы Medium вам понадобится только ссылка, заключенная в кавычки. Ее добавляете через
Для платформы Livejournal.
Вставка кодов карт здесь происходит следующим образом.
В окно вы вставляете код отсюда, но только тот, который заключен между кавычками src=”……”.
7. Затем расскажем о каждом из добавленных вами на интерактивную карту объектов подробнее. Для этого напишем абзац текста — чем же примечательно каждое выбранное вами для подборки из шести пунктов место. И чтобы читателю было проще понять, где оно находится и как выглядит, разместим embed панорамы улицы, который возьмем также с сервиса Google Maps. Для этого:
8. В новой вкладке снова открываем maps.google.com (во вкладке с созданной вами картой функции просмотра улиц нет). И через строку поиска ищем выбранный вами объект — либо по названию, либо по адресу.
9. В правом нижнем углу ищем желтого человечка и мышью тащим его, чтобы поставить на нужном месте нужной улицы.
10. И вы сразу переноситесь на нужную вам улицу. При помощи мыши выбираем нужный нам ракурс обзора местности и точное местоположение. И затем снова ищем возможность встроить (снова embed) этот фрагмент реальности в страницу вашего сайта.
11. В следующем окне выбираем режим HTML — и получаем нужный нам код. Если вы вставляете код в свой блог на Medium, вы копируете ссылку из соседней вкладки — “ссылка” и вставляете ее, как было показано выше.
12. Копируете — вставляете в свой блог / сайт. В итоге у вас должно получиться примерно следующее.
УрФУ им. Ельцина, корпус на Ленина, 51. Отличное место, чтобы получить гуманитарное образование, в том числе, конечно же, по журналистике. Декан журфака недавно был признан легендой российской журналистики.
13. Ссылки на выполненные задания — как всегда, оставляйте в комментариях к этой записи.
14. Если что-то осталось непонятным, перечитайте условия еще раз :)
