Создаем простые и сложные карты через Google Maps: marker, свой значки, всплывайки на картах

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

Чтобы работать с API картами, вам нужно зарегистрировать уникальный ключ. Для этого откройте официальную страницу Google Maps API и вы легко найдете ссылку типа "Получить ключ". В первый раз я потратил пять минут, чтобы его создать, так что у вас не должно возникнуть сложностей. Единственное выбирайте пункт "Google Maps JavaScript API" - так как он нужен для работы с html.

После того, как вы будете иметь ключ, создайте такую html страничку:

<div id="mapss"></div>
<style>#mapss { height: 500px; width: 100%; } </style>
<script>
function initMap() {
var uluru = {lat: 48.502731, lng: 135.066260};
var map = new google.maps.Map(document.getElementById('mapss'), {
zoom: 15,
center: uluru,
scrollwheel: false,
});
var marker = new google.maps.Marker({
position: uluru,
map: map
});
}
</script>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=ВАШ_API_КЛЮЧ&callback=initMap"></script>

Кратко разберем скрипт:

• Во фразе ВАШ_API_КЛЮЧ - поставьте свой зарегистрированный.
• В #mapss будет находиться карта
• var uluru задаются координаты объекта по широте и долготе, которые надо отобразить.
• zoom: 15 - уровень увеличения карты, можно ставить больше или меньше
• center: uluru - позиционируем карту по координатам нашего объекта
• scrollwheel: false, - запрещает увеличение карты колесиком мыши
• var marker - формирует маркер на объекте.

Если Вы все сделаете правильно, то появится маркер с координатами вашего объекта.

Теперь рассмотрим сложную карту - что если нам нужно создать несколько объектов со своими значками, подписями при клике и даже html содержимым. Для этого пример придется сильно модифицировать. Он представлен ниже. На его разработку я потратил несколько часов (при том, что раньше никогда не работал с API Google):

Код Google карты с множеством маркеров, иконок и всплываек

В комментариях, в самом коде я подписал основные моменты - для чего нужны переменные. В этом скрипте мы создаем множество маркеров, где каждому назначаем свой заголовок, картинку и даже html текст! На каждый марке можно легко прописать свой css стиль.

Выглядит карта (если на нее назначить красивые иконки, например по 30px) вот так:

<div id="mapsstwo"></div>

<style> #mapsstwo { height: 350px; width: 100%; } .gm-style .gm-style-iw { font-size: 20px!important; } .gm-style .gm-style-iw i { font-size: 12px!important; } </style>

<script>
function initMap() {

var map = new google.maps.Map(document.getElementById('mapsstwo'), {
zoom: 12,
center: new google.maps.LatLng(48.502731, 135.066260),
scrollwheel: false
});

var iconBase = 'images/'; //папка с картинками
var icons = { //разные картинки на типы объектов
bank: { icon: iconBase + 'bank.png' },
school: { icon: iconBase + 'school.png' },
apteka: { icon: iconBase + 'apteka.png' }
};

//Маркеры с даными
var features = [
{
position: new google.maps.LatLng(48.500731, 135.096260),
title: 'Здесь расположен банк',
type: 'bank',
html: '<br><i>Который работает для вас!<i>'
}, {
position: new google.maps.LatLng(48.505654, 135.046260),
title: 'Школа Первая',
type: 'school',
html: '<br><i>Дети - это будущее!<i>'
}, {
position: new google.maps.LatLng(48.502654, 135.076260),
title: 'Школа вторая',
type: 'school',
html: '<br><i>Кружки самодеятельности!<i>'
}, {
position: new google.maps.LatLng(48.509654, 135.066260),
title: 'Аптека',
type: 'apteka',
html: '<br><i>По низким ценам!<i>'
}
];

//для всплывайки
var contentString = '';
var infowindow = new google.maps.InfoWindow({ content: contentString });

//инициализируем маркеты
features.forEach(function(feature) {
var marker = new google.maps.Marker({
position: feature.position,
icon: icons[feature.type].icon,
title: feature.title,
html: feature.html,
animation: google.maps.Animation.DROP,
map: map
});
//передаем во всплывайку текст маркера
marker.addListener('click', function() {
infowindow.setContent(this.title + this.html);
infowindow.open(map, marker);
});
});
}
</script>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=ВАШ_API_КЛЮЧ&callback=initMap"></script>

Если вы серьезно хотите создавать карты, то советую изучать докментацию по API Google Maps - она изложена очень подробно и понятно.