Создание сайта с картой Google Maps, на которой отмечены места, может быть полезным для различных проектов, таких как сайты с отзывами о местах, туристические ресурсы или корпоративные страницы. В этой статье мы рассмотрим, как добавить карту Google Maps на ваш сайт и отметить на ней интересующие вас места.
1. Получение API-ключа Google Maps
Для работы с картами Google Maps вам потребуется API-ключ. Чтобы получить его, выполните следующие шаги:
- Перейдите на Google Cloud Platform Console.
- Создайте новый проект или выберите существующий.
- В поисковой строке введите «Maps JavaScript API» и перейдите на страницу данного API.
- Нажмите «Enable» (Включить), чтобы активировать API для вашего проекта.
- В разделе «Credentials» (Учетные данные) создайте новый API-ключ.
Теперь у вас есть API-ключ, который понадобится для работы с картами Google Maps на вашем сайте.
2. Создание HTML-страницы с картой Google Maps
Создайте новую HTML-страницу и добавьте следующий код:
<!DOCTYPE html>
<html>
<head>
<title>Сайт с картой Google Maps</title>
<style>
/* Установка размеров для карты */
#map {
height: 400px;
width: 100%;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
function initMap() {
// Координаты центра карты
var center = {lat: 55.751244, lng: 37.618423};
// Создание карты
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 10,
center: center
});
// Создание маркера
var marker = new google.maps.Marker({
position: center,
map: map
});
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=ВАШ_API_КЛЮЧ&callback=initMap">
</script>
</body>
</html>
Не забудьте заменить «ВАШAPIКЛЮЧ» на ваш реальный API-ключ.
3. Добавление мест на карту
Чтобы отметить места на карте, вам потребуется их координаты (широта и долгота). Вы можете использовать сервисы вроде latlong.net для получения координат. Добавьте несколько мест, используя следующий код:
// Массив мест
var places = [
{lat: 55.751244, lng: 37.618423, title: 'Место 1'},
{lat: 55.759070, lng: 37.564107, title: 'Место 2'},
{lat: 55.781330, lng: 37.702800, title: 'Место 3'}
];
// Добавление маркеров на карту
for (var i = 0; i < places.length; i++) {
new google.maps.Marker({
position: places[i],
map: map,
title: places[i].title
});
}
Вставьте данный код в функцию initMap() после создания карты.
Заключение
Теперь у вас есть простой сайт с картой Google Maps, на которой отмечены места. Вы можете дополнительно настроить карту, добавлять новые места и использовать другие сервисы, предоставляемые Google Maps API. Удачи вам в создании своего сайта! 😊
Если вам нужна дополнительная помощь или обучение по веб-разработке, рекомендую обратиться в школу.
Добавить комментарий