Работа со скриптами. Урок 05. Работа и стилизация Google Maps
В добавлении на сайт карт Google Maps воспользуемся сайтом Snazzy Maps https://snazzymaps.com/
Он предлагает различные стили для карт, фильтры внизу страницы, стили отсортированы по популярности. Кроме того, есть возможность самостоятельно поменять оформление карты нажав на карандашик слева вверху.
Нажимаем на понравившуюся карту. Сбоку видим css-стили карты, а чтобы скачать js-код, нажимаем на ссылку внизу
Скачивается html-файл.
Всё, что находится внутри тега script копируем и сохраняем в файл google_map.js
В index.html подключаем скрипты
<script src="https://maps.googleapis.com/maps/api/js"></script>
<script src="js/google_map.js"></script>
Первая строка - сама карта из google.api, код её подключения был в скачанном html-файле, мы её чуть-чуть отредактировали, убрав type="text/javascript", так как это новым стандартом не требуется.
В файле google_map.js следующие строки отвечают за стиль карты.
styles: [{"featureType":"administrative.country","elementType":"geometry","stylers":[{"visibility":"simplified"},{"hue":"#ff0000"}]}]
Если хотим его изменить, не нужно менять весь код карты, достаточно сменить стили, скопировав их на странице понравившейся карты. То есть стилизация карты решается достаточно просто, обычным изменением стилей.
Да, в скачанном файле был ещё небольшой фрагмент css
#map {
width: 750px;
height: 500px;
}
Можем его скопировать, хоть, конечно, стили можно изменить, да и стилизовать лучше по классу, а не по id
.map {
position: absolute;
top: 0;
left: 0;
z-index: 1;
width:100%;
height: 100%;
}
Так карта растянется во всю ширину экрана. Блок, в который вложена карта, должен иметь свойство position:relative;
Ну и понятно, что карта должна иметь id = "map" class ="contacts-map"
<div id="map" class="contacts-map"></div>
Вот ещё что - под картой всегда оставляйте фон с её же изображением. Это нужно для того, чтобы при отсутствии интернета на сайте оставалась хотя бы видимость наличия карты, а не пустой блок с ошибкой.
Работа с Google-картами хорошо задокументирована. Набираем в поисковике google maps api, первая ссылка https://developers.google.com/maps/?hl=ru
Выбираем Веб --- Google Maps JavaScript API --- Дополнительные материалы (на английском)
Давайте посмотрим какие настройки уже есть в файле google_map.js
zoom: 11 // масштаб карты
center: new google.maps.LatLng(40.6700, -73.9400) // центр карты. Изменить просто: находим на гугл картах нужный объект, в адресной строке копируем его координаты, заменяем их в коде. Кстати, не забудьте их же указать там, где var marker... position, чтобы отображался указатель на карте.
var mapElement = document.getElementById('map'); // это чистый js-код, который говорит, что гугл-карта помещается в элемент с id = "map"
Этот блок отвечает за пин - указатель на карте = его координаты и слово, которое появится при наведении курсора на указатель.
Убрать в левом верхнем углу карты переключатель Карта-Спутник
mapTypeControl: false,
Убрать желтого человечка справа внизу
streetViewControl: false,
Убрать значки "+" и "-" справа внизу
zoomControl: false,
Очень плохо, когда карта начинает скроллиться при прокрутке страницы.
Избежать этого поможет строка
scrollwheel: false
Теперь карта вообще перестала скроллиться, что тоже не хорошо.
Добавляем в файл google_map.js фрагмент кода
map.addListener('click', function() {
map.setOptions({
scrollwheel: true
});
});
map.addListener('drug', function() {
map.setOptions({
scrollwheel: true
});
});
map.addListener('mouseout', function() {
map.setOptions({
scrollwheel: false
});
});
теперь карта скроллится по клику, при перетягивании, и перестаёт скроллиться как только мышка оказывается за границей карты. Удобно.
Стилизуем маркер
В код маркера добавляем строку
Особенностью является то, что путь к изображению прописывается относительно index.html
Вот ещё. Маркер можно анимировать
animation: google.maps.Animation.DROP
Предположим, что маркер нужен не один.
Не проблема.
Копируем код и меняем имя переменной marker1, marker2, marker3...
Если предположить, что маркеров нужно не три, а тридцать, эта ситуация рассматривается в видео с 27:36 до 37:10.
Этот фрагмент кода позволит маркеру постоянно оставаться в центре при изменении размера страницы
/* Map center on resize
=========================*/
var getCen = map.getCenter();
google.maps.event.addDomListener(window, 'resize', function() {
map.setCenter(getCen);
});
Он предлагает различные стили для карт, фильтры внизу страницы, стили отсортированы по популярности. Кроме того, есть возможность самостоятельно поменять оформление карты нажав на карандашик слева вверху.
Нажимаем на понравившуюся карту. Сбоку видим css-стили карты, а чтобы скачать js-код, нажимаем на ссылку внизу
Скачивается html-файл.
Всё, что находится внутри тега script копируем и сохраняем в файл google_map.js
В index.html подключаем скрипты
<script src="https://maps.googleapis.com/maps/api/js"></script>
<script src="js/google_map.js"></script>
Первая строка - сама карта из google.api, код её подключения был в скачанном html-файле, мы её чуть-чуть отредактировали, убрав type="text/javascript", так как это новым стандартом не требуется.
В файле google_map.js следующие строки отвечают за стиль карты.
styles: [{"featureType":"administrative.country","elementType":"geometry","stylers":[{"visibility":"simplified"},{"hue":"#ff0000"}]}]
Если хотим его изменить, не нужно менять весь код карты, достаточно сменить стили, скопировав их на странице понравившейся карты. То есть стилизация карты решается достаточно просто, обычным изменением стилей.
Да, в скачанном файле был ещё небольшой фрагмент css
#map {
width: 750px;
height: 500px;
}
Можем его скопировать, хоть, конечно, стили можно изменить, да и стилизовать лучше по классу, а не по id
.map {
position: absolute;
top: 0;
left: 0;
z-index: 1;
width:100%;
height: 100%;
}
Так карта растянется во всю ширину экрана. Блок, в который вложена карта, должен иметь свойство position:relative;
Ну и понятно, что карта должна иметь id = "map" class ="contacts-map"
<div id="map" class="contacts-map"></div>
Вот ещё что - под картой всегда оставляйте фон с её же изображением. Это нужно для того, чтобы при отсутствии интернета на сайте оставалась хотя бы видимость наличия карты, а не пустой блок с ошибкой.
Работа с Google-картами хорошо задокументирована. Набираем в поисковике google maps api, первая ссылка https://developers.google.com/maps/?hl=ru
Выбираем Веб --- Google Maps JavaScript API --- Дополнительные материалы (на английском)
Давайте посмотрим какие настройки уже есть в файле google_map.js
zoom: 11 // масштаб карты
center: new google.maps.LatLng(40.6700, -73.9400) // центр карты. Изменить просто: находим на гугл картах нужный объект, в адресной строке копируем его координаты, заменяем их в коде. Кстати, не забудьте их же указать там, где var marker... position, чтобы отображался указатель на карте.
var mapElement = document.getElementById('map'); // это чистый js-код, который говорит, что гугл-карта помещается в элемент с id = "map"
var map = new google.maps.Map(mapElement, mapOptions); // объявление переменной в которую помещаются карта и её опции
var marker = new google.maps.Marker({
position: new google.maps.LatLng(50.6038158,36.5851288),
map: map,
title: 'Snazzy!'
});
position: new google.maps.LatLng(50.6038158,36.5851288),
map: map,
title: 'Snazzy!'
});
Этот блок отвечает за пин - указатель на карте = его координаты и слово, которое появится при наведении курсора на указатель.
Убрать в левом верхнем углу карты переключатель Карта-Спутник
mapTypeControl: false,
Убрать желтого человечка справа внизу
streetViewControl: false,
Убрать значки "+" и "-" справа внизу
zoomControl: false,
Очень плохо, когда карта начинает скроллиться при прокрутке страницы.
Избежать этого поможет строка
scrollwheel: false
Теперь карта вообще перестала скроллиться, что тоже не хорошо.
Добавляем в файл google_map.js фрагмент кода
map.addListener('click', function() {
map.setOptions({
scrollwheel: true
});
});
map.addListener('drug', function() {
map.setOptions({
scrollwheel: true
});
});
map.addListener('mouseout', function() {
map.setOptions({
scrollwheel: false
});
});
теперь карта скроллится по клику, при перетягивании, и перестаёт скроллиться как только мышка оказывается за границей карты. Удобно.
Стилизуем маркер
В код маркера добавляем строку
var marker = new google.maps.Marker({
position: new google.maps.LatLng(50.6038158,36.5851288),
map: map,
title: 'Snazzy!',
icon: "i/map-pin.png"
});
position: new google.maps.LatLng(50.6038158,36.5851288),
map: map,
title: 'Snazzy!',
icon: "i/map-pin.png"
});
Особенностью является то, что путь к изображению прописывается относительно index.html
Вот ещё. Маркер можно анимировать
animation: google.maps.Animation.DROP
Предположим, что маркер нужен не один.
Не проблема.
Копируем код и меняем имя переменной marker1, marker2, marker3...
Если предположить, что маркеров нужно не три, а тридцать, эта ситуация рассматривается в видео с 27:36 до 37:10.
Этот фрагмент кода позволит маркеру постоянно оставаться в центре при изменении размера страницы
/* Map center on resize
=========================*/
var getCen = map.getCenter();
google.maps.event.addDomListener(window, 'resize', function() {
map.setCenter(getCen);
});