Всем привет! В этом посте хочу поделиться с Вами, отличным способом подключения 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. Удачи Вам! все пожелания, предложения, вопросы оставляйте в комментариях!