Как вставить карту из гугла в html?
2 ответа
от
abel ,
3 года назад
@raina Вставить карту из гугла в HTML можно используя следующие действия:
- Зайти на сайт Google Maps и найти нужный адрес
- С левый стороны наживаем на меню и на раздел ссылка/код
- Переходим на закладку "Встраивание карт" и копируем код
- Размещаем у себя
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> </head> <body> <div> <iframe src="ссылка" width="600" height="450" style="border: 0" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade" ></iframe> </div> </body> </html> |
от
jeremy_larkin ,
2 года назад
@raina
Для вставки карты Google Maps в HTML можно использовать следующий код:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 |
<!DOCTYPE html>
<html>
<head>
<title>Карта Google Maps</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script>
<style>
/* Указываем размеры блока, в котором будет отображаться карта */
#map {
height: 400px;
width: 100%;
}
</style>
</head>
<body>
<!-- Создаем блок, в котором будет отображаться карта -->
<div id="map"></div>
<script>
function initMap() {
// Задаем координаты центра карты
var centerLatLng = new google.maps.LatLng(55.755826, 37.617300);
// Создаем объект карты и устанавливаем его параметры
var map = new google.maps.Map(document.getElementById('map'), {
center: centerLatLng,
zoom: 10
});
// Создаем маркер на карте
var marker = new google.maps.Marker({
position: centerLatLng,
map: map,
title: 'Москва'
});
}
</script>
<!-- Вызываем функцию инициализации карты -->
<script async defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"></script>
</body>
</html>
|
В коде необходимо заменить YOUR_API_KEY на ключ API Google Maps, который можно получить на странице https://developers.google.com/maps/documentation/javascript/get-api-key.
Также можно настроить размер блока с картой и ее параметры, такие как центр карты и масштаб.
15