Проект: Встраивание карт Google на сайт с помощью Javascript

В этом проекте вы будете иметь дело с наиболее распространенным API - Google Maps. Этот API имеет множество отличного функционала (в основном, вы создаете карту, которая делает что пожелаете), но здесь мы больше попрактикуемся в помещении объекта API на странице. Вы самостоятельно изучите документацию по API, потому что мы не будем рассказывать как делать то, что необходимо.

Ваши задания

Создайте простой сайт с картой Google и форму, где пользователь может ввести долготу, широту и сообщение. При отправке формы, в этом месте на карте должен появиться маркер. Нажатие на маркер отобразит введенное сообщение (эту функциональность создавать не надо - при правильном использовании API, карты Google все сделают сами).

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

1. Создайте репозиторий на Github для проекта. Если возникли сложности, посмотрите инструкции на этой странице.
2. Создайте пустой документ HTML.
3. Прочтите документацию по API для понимания принципов работы.
4. Подумайте, что вам будет необходимо для создания формы, создающей кнопку/маркер на карте, и какие методы предоставляет API. Лучше сейчас подумать несколько лишних минут, чем потом переделывать программу, теряя часы впустую. Нарисуйте схему на бумаге перед тем, как вообще садиться за компьютер.
5. Создайте проект!
6. Отправьте его на Github

Решения студентов

• Решение 1 | Посмотреть в браузере
• Решение 2 | Посмотреть в браузере
• Решение 3 - измеритель расстояния | Посмотреть в браузере
• Решение 4 | Посмотреть в браузере
• Решение 5 | Посмотреть в браузере

Дополнительные ресурсы

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

• Вникая в Мир Геолокации от Smashing Magazine