Всем привет! В этом посте хочу поделиться с Вами, отличным способом подключения Google Maps на Ваш сайт (в проект).
В основном проблемы с подключением отсутствуют и документация на хорошем уровне. Проблемы тока с оптимизацией скорости загрузки проекта из-за бесполезных подключений ресурсов в теге head к карте, об этом ниже
Как предлагают подключать
Разработчикам, Google предлагает подключать карту к проекту следующим кодом:
<div id="map"></div>
<script>
var map;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: {lat: -34.397, lng: 150.644},
zoom: 8
});
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap" async defer></script>
Помните что контейнеру с картой необходимо задать высоту и ширину (ширина может быть 100%)
Руководство как получить API_KEY для Google Map. Все шаги достаточно просты, один момент это разрешения принимать http запросы — в этом разделе нужно указать для какого проекта будет использоваться ключ, у меня это:
*localhost/* *jah.kyiv.ua/* *howtomake.com.ua/*
После всех танцев вокруг подключения, открываем нашу страничку с картой с localhost и видим в консоли разработчика (Chrome) следующую картину, что помимо нами написанных тегов meta и title там куча всякого хлама который Google подключил вместе с картой:
По минимуму раздражительные вещи этого подключения:
- 4 тега
style - 4 начертания шрифта Roboto
- непонятное к-во скриптов (в зависимости от плюшек которые Вы хотите использовать в карте)
С одной стороны ничего страшного не случилось, хотим карту! — нужна жертва) С другой — если карту нужно вывести в разных местах и на некоторых страницах то код никто не дублирует, его подключают один раз в подвале навсегда, то есть очевидная проблема в том что: посетителю проекта при просмотре любой страницы будут подгружаться дополнительные ресурсы съедающие трафик и нервы посетителя. Если на нервы еще можно забить, то мобильный (а его уже очень много) трафик можно было бы и поберечь
Убираем лишние стили и шрифты
Про убрать стили — я может и перегнул но однозначно намного проще добавить содержимое 4 подключаемых стилей в наш один основной style.css
В итоге стили которые нужно добавить в наш style.css:
.gm-style .gm-style-mtc label,
.gm-style .gm-style-mtc div {
font-weight:400
}
.gm-style .gm-style-cc span,
.gm-style .gm-style-cc a,
.gm-style .gm-style-mtc div {
font-size:10px
}
.gm-style {
font: 400 11px sans-serif;
text-decoration: none;
}
.gm-style img {
max-width: none;
}
@media print {
.gm-style .gmnoprint,
.gmnoprint {
display:none
}
}
@media screen {
.gm-style .gmnoscreen,
.gmnoscreen {
display:none
}
}
После этого, давайте заставим Google не подгружать стили и шрифты, для этого чуть перепишем скрипт подключения карты:
<script>
var map, head, insertBefore, appendChild;
head = document.getElementsByTagName('head')[0];
insertBefore = head.insertBefore;
appendChild = head.appendChild;
head.insertBefore = function (newElement, referenceElement) {
if (newElement.type === 'text/css') {
return;
}
insertBefore.call(head, newElement, referenceElement);
};
head.appendChild = function (newElement, referenceElement) {
if (newElement.type === 'text/css') {
return;
}
appendChild.call(head, newElement, referenceElement);
};
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: {lat: -34.397, lng: 150.644},
zoom: 8
});
}
</script>
Вуаля! В консоли теперь не видно ни шрифта ни стилей для карты. Как по мне то и стили из 4 файлов не обязательно добавлять в наш style.css — можно добавить только одно правило:
.gm-style img {
max-width: none;
}
И то только в случае если используете reset.css или normalize.css В них зачастую указывается правило для картинок:
img {
max-width: 100%;
}
и естественно его надо переназначить для стилей карт.
По итогу: первые два недовольства картами я убрал!) Вроде бы можно и остановиться ведь все остальное реально важные скрипты и все таки идем дальше!
JS JS JS
Самое быстрое и простое решение в оптимизации подгрузки JS ресурсов — это проверить есть ли контейнер для карты на странице и если есть то отрисовать карту:
function initMap() {
if(document.getElementById('map') !== null) {
map = new google.maps.Map(document.getElementById('map'), {
center: {lat: -34.397, lng: 150.644},
zoom: 8
});
}
}
Казалось бы это то что нужно, однако все таки видим три скрипта для карт в консоли еще есть 🙁 а значит этот вариант отпадает
По простому, следующий шаг это подключение Google Maps Api через JS а не тег script в итоге получим вот такой код:
<script>
var map, head, insertBefore, appendChild, mapApi;
head = document.getElementsByTagName('head')[0];
insertBefore = head.insertBefore;
appendChild = head.appendChild;
if(document.getElementById('map') !== null) {
mapApi = document.createElement('script');
mapApi.src = 'https://maps.googleapis.com/maps/api/js?key=AIzaSyB47M01hgdZsYqkAQuf3EpJcM1KHY496x4&callback=initMap'; // set the source of the script to your script
document.getElementsByTagName('head')[0].appendChild(mapApi);
}
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: {lat: -34.397, lng: 150.644},
zoom: 8
});
}
head.insertBefore = function (newElement, referenceElement) {
if (newElement.type === 'text/css') {
return;
}
insertBefore.call(head, newElement, referenceElement);
};
head.appendChild = function (newElement, referenceElement) {
if (newElement.type === 'text/css') {
return;
}
appendChild.call(head, newElement, referenceElement);
};
</script>
Все готово! Если контейнера нет на странице то и раздел head проекта будет пустой.
Заключение
В нашей/Вашей копилке появился еще один хак, который позволяет хоть и слегка но вполне четко оптимизировать подключение Google Maps используя native JS. Удачи Вам! все пожелания, предложения, вопросы оставляйте в комментариях!