Как добавить карту google, Яндекс на сайт

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

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

Поэтому опишу два способа встраивания.

1. Добавление карты на сайт через google.com/maps/

• Переходим на google.com/maps/
• Вбиваем в поиске нужный адрес, я например вбил: "малая житомирская улица, 9, Киев, город Киев, Украина" - на карте появиться метка
• Жмем на колесико и в появившемся меню выбираем "поделится"

• В появившемся окошке выбираем вкладку "код", в выпадающем меню выбираем необходимые размеры встраиваемой карты и копируем код в html-редактор необходимой страницы или записи

Ниже результат встроенная карта от Google:

2. Встраивание карты google на сайт через mapsengine

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

• Переходим по адресу mapsengine.google.com/map/
• Жмем "создать новую карту"
• Добавляем на карту нужные элементы и жмем на кнопку "поделиться"

• Выскочит окошко в котором можно указать название карты и описание, жмем "сохранить", далее появиться окошко "настройка доступа": жмем "изменить", "общедоступный в Интернете", "готово".
• Теперь жмем  на иконку папки, на скриншоте выше на нее указывает одна из красных стрелок, и выбираем пункт меню "Добавить на сайт"\
• Копируем код и вставляем в html-редактор на нужной странице сайта.

Ниже результат - добавленная карта от Google:

3. Добавление на сайт карты от Яндекс

• Переходим на страницу tech.yandex.ru/maps/tools/constructor/
• Указываем название карты и добавляем при необходимости нужные элементы, можно выбрать отображение народной карты - там более подробно указаны разные заведения, магазины
• Жмем кнопку "Сохранить и получить код"
• Вставляем код на страницу

Ниже результат -  Яндекс  карта: