Простой пример множественных маркеров в Google Maps API
Быстрый ответ
Для того чтобы добавить на карту Google несколько маркеров, вам потребуется всего пара строк кода. Вот пример кода, которым можно воспользоваться:
// Определяем координаты для маркеров
var markersData = [
{ title: 'Локация 1', lat: 37.4232, lng: -122.0853 },
{ title: 'Локация 2', lat: 37.4289, lng: -122.1697 },
{ title: 'Локация 3', lat: 37.6153, lng: -122.3900 }
];
// Пришло время инициализировать карту!
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 10,
center: { lat: markersData[0].lat, lng: markersData[0].lng }
});
// Размещаем маркеры на карте!
markersData.forEach(function(location) {
var marker = new google.maps.Marker({
position: { lat: location.lat, lng: location.lng },
title: location.title,
map: map
});
// Добавляем информационные окна при клике
marker.addListener('click', function() {
var infoWindow = new google.maps.InfoWindow({ content: location.title });
infoWindow.open(map, marker);
});
});
}
// Всё, можно начинать!
initMap();
Структура каждого маркера в markersData
включает title
, lat
и lng
. На этапе инициализации карты мы устанавливаем начальный центр и масштаб, затем с помощью forEach
добавляем каждый маркер. Каждому маркеру присваивается информационное окно, которое появляется при клике, это обеспечивает интерактивность карты!
Работа с маркерами
Великое замыкание
Для эффективной работы с информационными окнами каждого маркера используем замыкания. Это поможет сохранять контекст для каждого маркера:
markersData.forEach(function(location, index) {
var marker = new google.maps.Marker({
position: { lat: location.lat, lng: location.lng },
title: location.title,
map: map
});
google.maps.event.addListener(marker, 'click', (function(marker, index) {
return function() {
var infoWindow = new google.maps.InfoWindow({ content: location.title });
infoWindow.open(map, marker);
}
})(marker, index));
});
Кластеризация маркеров: группируем по смыслу!
Для работы с большим количеством маркеров будет полезен MarkerClusterer. Этот инструмент группирует близко расположенные маркеры в кластеры:
var markerCluster = new MarkerClusterer(map, markers, { imagePath: 'путь/к/изображениям' });
Главное в работе с маркерами — поддержание чистоты изображения карты и сохранение её производительности, чему кластеризация способствует в полной мере.
Больше настроек – больше возможностей
Создавайте персональные иконки для разных типов мест, загружайте данные динамически и открывайте для себя новые горизонты! Сделайте вашу карту действительно уникальной.
Производительность – наше все!
Не забывайте проверять производительность ваших карт при большом числе маркеров. Проведите тесты с разным количеством точек (500, 1000 и более), чтобы убедиться в безупречной работе процесса рендеринга.
Визуализация
Попробуйте представить виртуальный тур по городу, населенный разнообразными местами:
🏨: Отель
🍔: Ресторан
🏦: Банк
🏖️: Пляж
На нашей карте мы обозначим следующие виды локаций, используя Google Maps JS API:
const locations = [
{ lat: -31.563910, lng: 147.154312, title: '🏨' },
{ lat: -33.718234, lng: 150.363181, title: '🍔' },
{ lat: -34.727552, lng: 135.889092, title: '🏦' },
{ lat: -34.728618, lng: 137.228134, title: '🏖️' },
];
Каждая локация становится остановкой в нашем путешествии:
🗺️ Карта: [🏨, 🍔, 🏦, 🏖️]
// Это как экскурсионный автобус, только в вашем управлении!
Ускоряем работу карты
Чтобы сделать работу карты ещё более эффективной, можно использовать следующие советы:
- Рандомизация координат Lat/Lng – присвойте маркерам уникальность.
- Асинхронная загрузка скрипта Google Maps API ускорит отображение страницы.
- Использование индивидуальных иконок маркеров поможет различить разные типы мест.
Примеры кода для асинхронной загрузки Google Maps и добавления пользовательских иконок:
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=ВАШ_API_КЛЮЧ&callback=initMap">
</script>
function initMap() {
var customIcon = 'путь/к/вашей/индивидуальной/иконке.png';
markersData.forEach(function(location) {
var marker = new google.maps.Marker({
position: { lat: location.lat, lng: location.lng },
icon: customIcon,
title: location.title,
map: map
});
// и так далее...
});
// продолжаем инициализацию карты...
}
Полезные материалы
- Обзор | Maps JavaScript API | Google for Developers — ваш компас в мире карт Google.
- Справочник по Google Maps JavaScript API V3 | Google for Developers — подробный гид по API карт Google.
- Google Maps JS API v3 – Простой пример с несколькими маркерами – Stack Overflow — опыт и помощь со стороны сообщества Stack Overflow.
- Учебник по Google API — ваши первые шаги в изучении Google Maps API.
- GitHub – apneadiving/Google-Maps-for-Rails — ресурсы для разработчиков Ruby.
- AngularJS Google Maps V3 Directives — быстрый старт для AngularJS и Google Maps.