Оптимизация подключения Google Maps

Всем привет! В этом посте хочу поделиться с Вами, отличным способом подключения Google Maps на Ваш сайт (в проект).

Оптимизация подключения 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 подключил вместе с картой:

Google грузит всякий хлам вместе с картой

По минимуму раздражительные вещи этого подключения:

  1. 4 тега style
  2. 4 начертания шрифта Roboto
  3. непонятное к-во скриптов (в зависимости от плюшек которые Вы хотите использовать в карте)

С одной стороны ничего страшного не случилось, хотим карту! — нужна жертва) С другой — если карту нужно вывести в разных местах и на некоторых страницах то код никто не дублирует, его подключают один раз в подвале навсегда, то есть очевидная проблема в том что: посетителю проекта при просмотре любой страницы будут подгружаться дополнительные ресурсы съедающие трафик и нервы посетителя. Если на нервы еще можно забить, то мобильный (а его уже очень много) трафик можно было бы и поберечь

Убираем лишние стили и шрифты

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

Добавить комментарий: