Вы часто видели, как Карты Google используются на веб-сайтах и в приложениях для отображения местонахождения бизнеса или компании, получения сведений о местоположении пользователей и визуализации маршрутов из одного места в другое. Карты Google — это сервис веб-карт, предоставляемый Google, и это мощный инструмент, который можно интегрировать в веб-страницы с помощью ключа API Карт Google.
В этой статье вы пройдете этапы интеграции Карт Google в файлы HTML с помощью API Карт Google.
Шаг 1. Получите ключ API Карт Google.
- Перейдите на https://console.cloud.google.com/
- Создайте новый проект или выберите существующий. Для демонстрации я создам новый проект.
3. Дайте вашему проекту имя и нажмите «Создать».
4. Прежде чем продолжить, убедитесь, что вы выбрали правильный проект.
5. Перейдите на панель инструментов и откройте меню.
6. Нажмите «API и службы» и выберите «Библиотека».
7. В разделе «Карты» нажмите «Просмотреть все».
8. Включите следующее
- Карты JavaScript API
- API мест
- API маршрутов
- API геолокации
- API геокодирования
9. Перейдите в раздел «API и службы» и выберите «Учетные данные».
10. Нажмите «Создать учетные данные» и выберите «Ключ API».
11. Скопируйте сгенерированный API-ключ, так как он потребуется при работе с Google Maps, в свой HTML-файл.
Шаг 2: Добавьте скрипт Google Maps на свою HTML-страницу.
12. Создайте файл HTML и вставьте приведенный ниже код. Вы можете настроить внешний вид карты, изменив параметры высоты, ширины и стиля в соответствии с вашими требованиями. Также вставьте сгенерированный ранее ключ Google Maps API.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Google Maps API</title>
</head>
<body>
<h1>Google Maps API</h1>
<div id="map" class="map" ></div>
<!-- paste your API key here -->
<script src="https://maps.googleapis.com/maps/api/js?key=PASTE_YOUR_API_KEY_HERE&callback=initMap&libraries=&v=weekly" defer></script>
<script>
function initMap() {
// The location of Colombo
var colombo = { lat: 6.927079, lng: 79.861244 };
// The map, centered at Colombo
var map = new google.maps.Map(document.getElementById("map"), {
zoom: 12,
center: colombo,
draggable:true
});
//adding the marker
var marker = new google.maps.Marker({
position: colombo,
map: map,
draggable:false
});
marker.setMap(map);
}
</script>
</body>
<style type="text/css">
h1{
text-align: center;
}
.map{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 90%;
height: 450px;
border: 0;
}
</style>
</html>
13. Вы можете изменить значения широты и долготы в соответствии с вашими требованиями.
14. Сохраните файл и откройте его в браузере. Карта будет отображаться, как показано на изображении ниже.
Как получить координаты местоположения из Google Maps.
Веб-сайты, разработанные для курьерских служб, продажи недвижимости и бронирования отелей, часто требуют от пользователей выбора определенных мест на Картах Google. Эту функциональность можно легко реализовать, добавив события карты и маркера в теги ‹script›‹/script› кода вашей веб-страницы.
map.addListener("center_changed", () => {
// 3 seconds after the center of the map has changed, pan back to the marker.
window.setTimeout(() => {
map.panTo(marker.getPosition());
}, 3000);
});
marker.addListener("mouseout", () => {
map.setZoom(12);
map.setCenter(marker.getPosition());
console.log( 'i am dragged' );
var lat = marker.getPosition().lat();
var lng = marker.getPosition().lng();
console.log( lat );
console.log( lng );
});
Кроме того, сделайте маркер перетаскиваемым как истинный.
//adding the marker
var marker = new google.maps.Marker({
position: colombo,
map: map,
draggable:true
});
После запуска кода вы сможете перетащить маркер и распечатать координаты местоположения на консоли.
Если вы хотите сделать свой веб-сайт более удобным для пользователя, вы можете добавить эти фрагменты кода на свой веб-сайт, чтобы отображать координаты местоположения в текстовых полях, как показано ниже.
<div class='parent'>
<div class='child'>
<label for="latitude">Latitude</label>
<input type="text" id="latitude" name="latitude">
</div>
<div class='child'>
<label for="longitude">Longitude</label>
<input type="text" id="longitude" name="longitude">
</div>
</div>
document.getElementById("latitude").value = lat;
document.getElementById("longitude").value = lng;
.parent {
margin: 1rem;
padding: 2rem 2rem;
text-align: center;
top: 80%;
position: absolute;
float: center;
width: 90%;
}
.child {
display: inline-block;
padding: 1rem 1rem;
vertical-align: middle;
}
Окончательная версия кода, включающая все необходимые элементы, представлена ниже.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Google Maps API</title>
</head>
<body>
<h1>Google Maps API</h1>
<div id="map" class="map" ></div>
<div class='parent'>
<div class='child'>
<label for="latitude">Latitude</label>
<input type="text" id="latitude" name="latitude">
</div>
<div class='child'>
<label for="longitude">Longitude</label>
<input type="text" id="longitude" name="longitude">
</div>
</div>
<!-- paste your API key here -->
<script src="https://maps.googleapis.com/maps/api/js?key=PASTE_YOUR_API_KEY_HERE&callback=initMap&libraries=&v=weekly" defer></script>
<script>
function initMap() {
// The location of Colombo
var colombo = { lat: 6.927079, lng: 79.861244 };
// The map, centered at Colombo
var map = new google.maps.Map(document.getElementById("map"), {
zoom: 12,
center: colombo,
draggable:true
});
//adding the marker
var marker = new google.maps.Marker({
position: colombo,
map: map,
draggable:true
});
marker.setMap(map);
map.addListener("center_changed", () => {
// 3 seconds after the center of the map has changed, pan back to the marker.
window.setTimeout(() => {
map.panTo(marker.getPosition());
}, 3000);
});
marker.addListener("mouseout", () => {
map.setZoom(12);
map.setCenter(marker.getPosition());
console.log( 'i am dragged' );
var lat = marker.getPosition().lat();
var lng = marker.getPosition().lng();
console.log( lat );
console.log( lng );
document.getElementById("latitude").value = lat;
document.getElementById("longitude").value = lng;
});
}
</script>
</body>
<style type="text/css">
h1{
text-align: center;
}
.map{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 90%;
height: 450px;
border: 0;
}
.parent {
margin: 1rem;
padding: 2rem 2rem;
text-align: center;
top: 80%;
position: absolute;
float: center;
width: 90%;
}
.child {
display: inline-block;
padding: 1rem 1rem;
vertical-align: middle;
}
</style>
</html>
Когда вы откроете его в веб-браузере, карта будет отображаться, как показано на рисунке ниже. Вы можете перетащить маркер и посмотреть, как координаты местоположения отображаются внутри текстовых полей.
