Делаем интерактивную карту с помощью Google Maps

Зачем нужны интерактивные карты

Привет, ребята! Сегодня мы будем учиться делать интерактивные карты. Интерактивная карта очень поможет экскурсоводам или тем, кто составляет маршруты экскурсий или поездок, а кроме того, позволит вам вести учёт и не потерять те места, в которых вы побывали или в которых хотите побывать.

Сейчас вместе с вами я начну делать карту по проекту «Письма Победы». Этот проект посвящён людям, прошедшим Великую Отечественную войну. Он заключается в том, что на этой карте будут отмечены те места, из которых люди писали свои фронтовые письма. Для некоторых эти письма оказывались в том числе последними. Это позволит нам показать обширую географию тех мест, где побывал российский воин.

Создание новой карты в Google Картах

Итак, что же нужно сделать? Начнём с того, что воспользуемся сервисом Google Карты и создадим в нём свою собственную интерактивную карту. Для этого открываем бургерное меню. Бургером оно называется потому, что выглядит как бургер. Открываем раздел «Мои места». В разделе «Мои места» переходим на вкладку «Карты» и создаём новую карту с помощью кнопки «Создать карту».

Открывается новая вкладка, и мы видим интерфейс создания карты. Всё, что нам потребуется, мы будем настраивать в верхнем левом меню. Прежде всего зададим название. Если хотите, можете добавить описание, но сейчас я этого делать не буду. Нажимаем «Сохранить».

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

Поиск места и установка маркера

Давайте сейчас поставим первую точку. Как же мы узнаем, где её взять? Сворачиваем окошко и достаём наши заготовленные заранее материалы. У меня есть папка, в которой содержатся фронтовые письма разных людей. Давайте начнём прямо с самого первого.

Жарков С. Н. Степан Николаевич Жарков родился в 1914 году. Наш музейный работник уже подготовил для меня все необходимые материалы, и сейчас в верхней части страницы уже имеется информация о том, где боец закончил свой жизненный путь, и нам остаётся только найти это место на карте. Копируем название населённого пункта (горячие клавиши Ctrl+C) и вставляем в поисковую строку в Google Картах.

Мгновенно появляется подсказка; если у нас всё набрано правильно, то мы попадем в нужное место. Вот это место — город Зондерсхаузен в Германии. Если уменьшить масштаб, то можно оценить приблизительное положение. Когда вы осуществляете поиск, Google Карты автоматически делают там зелёную метку и добавляют эту метку в список мест на вашей карте. Сейчас она нам не нужна, поэтому нажмём здесь крестик, чтобы убрать это место, и поставим свою точку с помощью кнопки «Добавить маркер». Добавим её прямо здесь, где-то в центре города.

Заполнение информации о точке

Я буду называть точки по именам тех людей, которые отправляли отсюда свои письма, поэтому копируем фамилию, имя и отчество нашего бойца: Жарков Степан Николаевич. Есть место для дополнительной информации, в нашем случае это будет краткая историческая справка о бойце, поэтому скопируем информацию из документа и вставим её вот сюда вместо «Для дополнительной информации».

Для удобства чтения предлагаю разделить текст на отдельные абзацы. Делается это с помощью горячей клавиши Shift+Enter. Если вы нажмёте клавишу Enter, то это приведёт к тому, что вы закончите редактирование. Для того чтобы продолжить редактирование, нажимаем на значок карандаша, кнопку «Изменить», и продолжаем делить на абзацы с помощью Shift+Enter. Так будет проще прочесть. Нажимаем «Сохранить» и убеждаемся, что у нас есть новая точка. Она называется Жарков Степан Николаевич, и вся историческая информация занесена сюда.

Добавление фотографий и сканов писем

А теперь самое главное — то, ради чего эта карта и создавалась. Нам нужно приложить сюда фотографии и сканы тех самых писем, «Писем Победы». Для этого нажимаем на значок фотокамеры, «Добавить изображение». У нас появляется окно, в которое можно перетащить изображение либо выбрать файл на компьютере.

Выбирать файлы на компьютере всё-таки сложнее, поэтому я закрою текстовый документ и просто перетащу изображения, которые у меня есть, в это окно. Начну с портрета. Дожидаемся загрузки и видим, что фотография приложилась. Чтобы добавить фото или скан документа, нажимаем на значок плюсика.

К сожалению, Google Карты не позволяют перетаскивать несколько изображений сразу, поэтому одновременно придётся вставлять только по одному изображению, загружая их друг за другом. Это, конечно, немного монотонное и довольно скучное занятие, но тем не менее результат полностью оправдает затраченное на это время.

Здесь должен сделать маленькое замечание. Дело в том, что при просмотре этой карты пользователям количество фотографий будет равно десяти. То есть, если мы сейчас загрузили всего пять, Google Карты загрузят ещё дополнительно пять каких-либо изображений, которые имеют привязку к этому месту. Он возьмёт фотографии из открытых источников и будет их показывать следом. Это не всегда хорошо и не всегда корректно, поэтому, чтобы такого не происходило, я предлагаю...

Работа с изображениями в Google Картах

Здесь должен сделать маленькое замечание. Дело в том, что при просмотре этой карты пользователям количество фотографий будет равно 10. То есть, если мы сейчас загрузили всего 5, Google Карты загрузят ещё дополнительно 5 каких-либо изображений, которые имеют привязку к этому месту. Он возьтёт фотографии из открытых источников и будет их показывать следом.

Это не всегда хорошо и не всегда корректно, поэтому, чтобы такого не происходило, я предлагаю загрузить туда ещё несколько заглушек. Я заранее приготовил вот такое изображение с логотипом этой самой акции, поэтому нажимаем плюсик, и придётся нам с вами загрузить ещё пять одинаковых изображений. Опять же, это не обязательно делать, но имейте в виду, что не все изображения, которые Google Карты будут автоматически добавлять в вашу галерею, будут подходить по смыслу, а некоторые откровенно будут некорректными.

Поэтому добавляем несколько заглушек так, чтобы всего изображений было не меньше чем 10. К счастью, более 10 вы всё равно не сможете загрузить. Нажимаем «Сохранить» и видим, что у нас получается. У нас есть точка, у нас есть её координаты, есть галерея из 10 изображений и краткая историческая справка. То есть, в принципе, то, что нам нужно.

Настройка стиля и цветовой гаммы меток

А теперь давайте добавим немного художественности нашей метке и нажмём на значок вёдерка. Изменим стиль. Раз уж у нас здесь боец-красноармеец, то, естественно, эта метка приобретает форму звезды. Ну и покрасим её.

Давайте решим, как мы покрасим. Что у нас написано здесь? В краткоисторической справке написано, что объявлена благодарность, что боец дошёл до Берлина, но, к сожалению, в сентябре 1945 года погиб в Германии. Раз так, давайте определимся с цветовой гаммой. Например, звёзды павших бойцов будут чёрного цвета, звёзды, которыми отмечены вернувшиеся домой бойцы, будут красные, а письма бойцов, пропавших без вести, будут серого цвета.

Поэтому давайте сделаем следующее. Добавим соответствующие слои. Первый слой тогда будет называться «Погибшие». И добавим третий слой сразу, который будет называться «Пропавшие без вести». И да, у нас теперь на слое «Погибшие» есть один боец, его одна метка. Уменьшаем масштаб и давайте посмотрим, как это выглядит. Вот таким вот образом, при желании, мы можем снять галочку, и погибшие бойцы не будут отмечены на карте. То же самое с остальными.

Поиск местоположения и работа со слоями

Давайте посмотрим на следующего бойца. Получится ли у нас добавить его на следующий слой? Этот боец также погиб. Давайте найдём того, кто вернулся домой или пропал без вести. Макеев Фёдор Ефимович, 1900 года рождения, в 41-м году пропал без вести в битве за Москву. Значит, это на карте будет где-то здесь.

Давайте уточним. Вот наш музейный работник уточняет для меня специально, что в письмах упоминается село Костромичи. Или Костро-Мичи? 13 сентября, то есть за три месяца до своей пропажи, он писал из города Ельня. Давайте найдём город Ельня. Как видите, таких городов у нас довольно много, есть даже город Елняги, но нам с вами нужен город Ельня. Причём обратите внимание, что Смоленская область нам не подойдёт, а нам нужен город Ельня Московской области, потому что мы знаем, что это битва под Москвой.

И снова слева добавляется нам новый слой с меткой, его убираем. А теперь, пожалуйста, минутку внимания. Нужно сразу выбрать, в какой слой должна попасть следующая метка. В нашем случае это «Пропавшие без вести». Нужно сразу на неё кликнуть, и вы видите, что вот эта синяя полосочка появляется напротив нужного слоя.

Дело в том, что когда вы добавите метку не в тот слой и позже перенесёте в другой, у вас потеряются все фотографии, которые вы приложите. И вам придётся загружать всё заново. Причём иногда возникает такая проблема, что фотографии могут продублироваться. И в итоге у вас получится так, что будет не 10, а 20, как вот здесь. Это не очень здорово, потому что когда вы будете их удалять, считая их лишними, у вас удалятся основные фотографии тоже.

Исходя из вышеперечисленного, получается так, что гораздо проще сразу выбрать нужный слой, чтобы потом избежать всех этих проблем. Поэтому выбираем слой «Пропавшие без вести» и создаём новую метку в нужном месте. Кнопочка «Добавить маркер», и ставим его, ну, наверное, сюда. Копируем с помощью Ctrl+C и вставляем с помощью Ctrl+V фамилию, имя, отчество бойца и всё, что мы о нём знаем. С помощью Shift+Enter разделим на абзацы.

Завершение оформления карты

И давайте сразу добавим изображение с помощью перетягивания. Окно с текстом можно закрыть. Отлично, давайте загрузим то, что нам нужно. Конечно же, при большом количестве таких фотографий это будет не очень легко сделать и не очень быстро это всё произойдёт, но я уверен, что вы потом оцените свою работу по достоинству. Потому что смотреться будет и правда здорово.

Готово. Нажимаем «Сохранить». Проверяем, что у нас все изображения загружены. Я их, кажется, забыл перевернуть — некоторые. Но это ничего страшного, я переверну чуть позже. К счастью, вы всегда можете нажать «Изменить». И с помощью вот этого значка мусорного ведра вы можете выбросить изображение, потом открыть его у себя, отредактировать нужным образом и загрузить снова.

Нажимаем «Сохранить». И давайте изменим стиль. Поставим значок звезды. И как я уже говорил раньше, раз это пропавший без вести боец, его метка будет серого цвета. Уменьшим масштаб, посмотрим, что получается. Вот таким вот образом. Смотрите, мы можем включать и отключать этот процесс добавления меток.

В общем-то, процесс добавления меток закончен. Не забывайте выбирать нужные слои, не забывайте правильно оформлять стиль своих меток, и всё у вас будет хорошо. Теперь давайте кратенько посмотрим ещё раз на основные инструменты: название вашей карты, добавление нового слоя, слои, содержащие метки. Внизу вы можете выбрать, каким образом будет отображаться ваша карта: обычная Google-карта, либо карта со спутника, либо какая-то другая, какая вам будет удобнее.

Завершение работы с метками

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

Основные инструменты карты

Теперь давайте кратенько посмотрим ещё раз на основные инструменты. Название вашей карты, добавление нового слоя, слои, содержащие метки. Внизу вы можете выбрать, каким образом будет отображаться ваша карта: обычная Google-карта, либо карта со спутника, либо какая-то другая, какая вам будет удобнее.

Удобнее — специальный инструмент, а именно «Выбрать объект». Вы можете переносить с его помощью карту, зажав левую кнопку мыши, либо выбирать объекты. Следующий — это добавление маркера в нужный слой.

Работа с маршрутами

Ещё один инструмент — «Нарисовать линию». Вы сможете добавить маршруты: пешеходные, или велосипедные, или автомобильные. Либо нарисовать просто какой-то выдуманный маршрут. И когда вы нажмёте кнопку Enter, он у вас сохраняется с определённым названием, например, «Маршрут 1». Вы можете добавлять на него фотографии, если хотите. Можете тоже каким-то образом изменять, в том числе толщину линии, если хотите, её цвет. Это полезно, если вы экскурсовод или если турист, например.

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

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

Обратите, пожалуйста, внимание, что маршруты не добавляются в существующие слои. Каждый маршрут — это отдельный слой, потому что внутри маршрута может содержаться бесконечное количество точек. Вы можете добавлять их с помощью «Добавить пункт назначения». Кроме того, вы можете менять пункты назначения местами, если хотите, простым перетаскиванием. После этого маршрут автоматически перестроится.

Еще один инструмент — «Добавить маршрут». Вы можете добавить в маршрут, не зная точных мест. Например, вы сможете построить маршрут из Москвы в Санкт-Петербург. Таким образом будет выбран наиболее оптимальный маршрут, и для него будет создан дополнительный слой.

Измерение расстояний и площадей

И последний инструмент — это измерение расстояния или площади. Он не создает новых точек, он не создает новых слоев. Это просто для вас, чтобы вы могли себе примерно представить, какие расстояния вы пытаетесь охватывать. Если вы построили многоугольник и нажмёте на первую точку, вернётесь с неё и кликните левой кнопкой мыши, вы автоматически посчитаете ещё и площадь вот этого самого многоугольника.

Предварительный просмотр и работа с контентом

А теперь давайте посмотрим, что вы можете получить по результату. Когда вы закончили или в процессе работы хотите проверить то, что у вас получается, можете воспользоваться кнопкой предварительного просмотра. И сейчас вы увидите карту так, как если бы её увидел пользователь. Сейчас она закрыта для редактирования, конечно же.

Тем не менее, пользователь может кликать на точки и получать о них информацию. Соответственно, историческая справка находится прямо здесь. Ниже есть кнопочка для фото, либо можно нажать на фотографию, иллюстрирующую эту точку. По умолчанию сюда подставляется первая фотография, которую вы загрузили. При нажатии на фотографию вы получаете доступ к галерее, и все изображения, которые вы загрузили, будут здесь, в том числе ваши заглушки. Они для этого здесь и существуют. Чтобы вернуться к редактированию, просто закрываем эту вкладочку и продолжаем работать.

Публикация и встраивание карты на сайт

После того как вы закончили работу с картой, нужно её опубликовать для того, чтобы её могли увидеть другие пользователи, для которых вы это, собственно, и делали. Нажимаем кнопку «Поделиться». И сейчас совершенно обычным образом, какой знаком любому пользователю Google, указываем настройки доступа. Чаще всего это настройка для всех в интернете: доступ, вход не требуется, на просмотр. Обратите внимание, чтобы не было возможности у других людей влезть в вашу карту. Нажимаем «Сохранить». И сейчас у нас есть вот эта ссылка, которую можно рассылать всем тем, кому нужно.

И последнее, о чём я хочу сегодня сказать, — это очень полезная функция, которая позволит вам добавить карту на сайт. Видим значок из трёх точек рядом с названием нашей карты. Кликаем на него. Нажимаем кнопку «Добавить на сайт». Google автоматически генерирует вам небольшой кусок кода, который вам достаточно вставить в нужном месте вашего сайта для того, чтобы получить интерактивную карту у себя на сайте.

Вот так законченная карта выглядит у нас на сайте. Карта интерактивная, её можно двигать, её можно прокручивать для увеличения масштаба. Также, если хотите, вы можете всегда открыть эту карту во весь экран. И, как видите, законченная карта — гораздо больше точек. Давайте посмотрим на некоторые из них, выбираем... Видим краткую справку. Можем посмотреть загруженные фотографии. В них, конечно же, есть заглушки. И сейчас вы увидите, что мы можем отключать слои и включать только те, которые нужно.

А на этом у меня всё. Спасибо, что посмотрели. Не забудьте подписаться, нажать колокольчик. Ну и, конечно, посещайте музей, знайте историю и будьте молодцами. Всем пока!

Обзор интерфейса

Видим краткую справку. Можем посмотреть загруженные фотографии, в них, конечно же, есть заглушки.

Сейчас вы увидите, что мы можем отключать слои и включать только те, которые нужно.

Заключение

А на этом у меня всё. Спасибо, что посмотрели. Не забудьте подписаться и нажать на колокольчик.

Ну и, конечно, посещайте музей, знайте историю и будьте молодцами. Всем пока!