Mapkę Google z zaznaczoną siedzibą firmy lub punktem obsługi klienta można znaleźć na wielu stronach internetowych. Warto poznać jakie mamy możliwości w zakresie dostosowywania wyglądu Map Google oraz jakie są zalety i wady różnych technik ich umieszczania.

Jak umieścić Mapę Google na stronie internetowej?

Istnieją dwie popularne metody zamieszczania map Google na stronach internetowych:

  • Iframe, czyli drogę amatorską, łatwiejszą do wykonania, oferującą jednak niskie możliwości dostosowania ze sporą ilością wad i z zawsze negatywnym wpływem na wydajność strony,
  • Google Maps API, czyli drogę profesjonalną, nieco trudniejszą do wykonania ale z samymi zaletami, oferującą wiele możliwości dostosowania i rokująca znacznie większą wydajność strony.

Mapa Google jako Iframe

Technika pierwsza (łatwa do wykonania przeciętnemu użytkownikowi dowolnego CMSa) to umieszczenie mapki za pomocą elementu Iframe. Jedyną zaletą tej techniki jest łatwość wykonania. Umieszczenie mapki polega na wyszukaniu lokalizacji i kliknięcie na opcję „Udostępnij lub umieść mapę”.

Wklejamy kod elementu iframe, który generuje się w nowym okienku:

Taki kod można wkleić bezpośrednio do treści strony lub umieścić go w jej kodzie HTML.

Wspomniałem, że ta technika ma wady. Największą wadą jest oczywiście sam fakt korzystania z iframe, który jest sprzeczny z nowoczesnym projektowanie stron internetowych, filozofią szybkich stron i idei mobile-first. Iframe to tak naprawdę uruchomienie innej strony wewnątrz aktualnie przeglądanej strony. Pod kątem wydajności jest to jeden z najgorszych pomysłów na implementację czegokolwiek na jakiejkolwiek stronie internetowej. Jedyny sposób pseudo-optymalizacji czegoś takiego to opóźnione dodawanie kodu HTML z elementem iframe – jednak także to może być nieprzewidywalne w skutkach a już na pewno negatywnie wpływające na UX. Bo pojawienie się mapy z kilkusekundowym opóźnieniem wygląda co najmniej dziwnie.

Druga wada to brak możliwości dostosowania i personalizacji mapy. Sam rozmiar można łatwo dostosować natomiast nie zmienimy kolorystyki mapy, wyglądu pinezki czy tego co ma być widoczne na mapie i jakie kontrolki chcemy udostępnić naszym użytkownikom.

Google Maps API

W tym momencie wkracza druga technika – profesjonalna – wolna od wad wymienionych wyżej i dająca deweloperom szerokie spektrum możliwości w zakresie dostosowania jej działania i wyglądu. Już samo dodawanie mapy jest przyjaźniejsze z perspektywy programisty i pozwala na wykonanie niezbędnych optymalizacji.

Aby móc korzystać z Google Maps API musimy wygenerować dla konkretnej strony klucz API. Przechodzimy w tym celu na stronę: https://cloud.google.com/maps-platform/ i postępujemy zgodnie z poleceniami na ekranie.

HTML

W miejsce gdzie chcemy umieścić mapę dodajemy dowolny kontener HTML. Niech dla naszego przykładu będzie to element <div> z identyfikatorem id=”map”.

<div id="map"></div>

CSS

Mapę stylujemy według uznania. Możemy np. dostosować wysokość mapy za pomocą pikseli CSS:

#map{
   height: 480px;
}

JavaScript

W stopce strony internetowej – przed znacznikiem zamykającym </body> dodajemy bibliotekę:

<script src="https://maps.googleapis.com/maps/api/js?key=TWÓJ_KLUCZ_API&callback=initMap&libraries=&v=weekly"
async></script>

Kod, który inicjuje mapę też najlepiej dodać w tym miejscu. Aby kod działał wystarczy, że będzie umieszczony po elemencie otaczającym mapę czyli po <div id=”map”></div>.

<script>
let map;
 function initMap() {
   map = new google.maps.Map(document.getElementById("map"), {
     center: { lat: -50.0038435979174, lng: 18.635918487416163 },
     zoom: 8,
   });
 }
</script>

Jak można się domyślić, center z parametrami lat i lng to wysokość i długość geograficzna. Można je łatwo otrzymać w dowolnej aplikacji GPS lub z menu kontekstowego w przeglądarkowej wersji Google Maps.

zoom odpowiada za przybliżenie – im większa liczba tym mapa jest bardziej przybliżona i prezentuje coraz bardziej szczegółowe etykiety.

Taka mapa nie ma jeszcze bardzo ważnej rzeczy, czyli pinezki. Aby ją dodać do wewnątrz funkcji initMap tworzymy obiekt google.maps.Marker:

marker = new google.maps.Marker({
            position: { lat: -50.0038435979174, lng: 18.635918487416163 },
            map,
            title: "Siedziba Firmy",
         });

Za pomocą dodatkowych argumentów obiektu google.maps.Map, które przyjmują wartości boolowskie możemy pokazywać lub ukrywać poszczególne części interfejsu mapy. Przykładowo: 

zoomControl: true,
mapTypeControl: true,
scaleControl: true,
streetViewControl: true,
rotateControl: true,
fullscreenControl: true

Zamieszczona w ten sposób mapa nie różni się wizualnie od mapy z serwisów Google lub od tej, którą zamieszczaliśmy za pomocą iframe. Aby dodać nieco więcej życia do naszej mapy, marker można animować dodajemy parametr:

animation: google.maps.Animation.DROP

Aby zwiększyć użyteczność mapki i nieco ją spersonalizować, możemy sprawić, że po kliknięciu na pinezkę wyświetli się „dymek” z dodatkowymi informacjami. Służy do tego InfoWindow:

const contentString =
     '<div id="content">' +
     '<div id="siteNotice">' +
     "</div>" +
     '<h1 id="firstHeading" class="firstHeading">Biuro</h1>' +
     '<div id="bodyContent">' +
     "<p>Plebiscytowa 10, 44-268 Jastrzębie-Zdrój</p>" +
     "<p>czynne: Pon. - Pt.<br>od 8:00 - 18:00</p>" +
     "</div>" +
     "</div>";

   const infowindow = new google.maps.InfoWindow({
     content: contentString,
   });

 infowindow.open(map, marker);
InfoWindow w Google Maps API

Dostosowywanie wyglądu Mapy Google

Stylowanie mapy to według mnie najciekawsza możliwość Google Maps API z punktu widzenia web designu. Możemy wejść do specjalnego kreatora stylu: https://mapstyle.withgoogle.com/ gdzie wybierzemy z pośród kilku predefiniowanych kompozycji lub stworzymy całkowicie własną. Mamy możliwość definiowania wszelkich kolorów a także mamy wpływ na to co będzie widoczne na mapce.

Stylowanie Google Maps – niestandardowa kolorystyka

Po kliknięciu przycisku „Finish” otrzymujemy styl w formacie JSON:

Export stylu Google Maps

Wygenerowany kod JSON przypisujemy do zmiennej (lub stałej):

var stylesArray = [
 {
     "elementType": "geometry",
     "stylers": [
       {
         "color": "#f5f5f5"
       }
     ]
   },
  
(...)

   {
     "featureType": "water",
     "elementType": "labels.text.fill",
     "stylers": [
       {
         "color": "#9e9e9e"
       }
     ]
   }
 ];

I dodajemy do argumentów google.maps.Map():

function initMap() {
   map = new google.maps.Map(document.getElementById("map"), {
      center: { lat: -50.0038435979174, lng: 18.635918487416163 },
      zoom: 8,
      styles: stylesArray
   });
 }

Link do pełnego przykładu: https://github.com/mansfeld/web-development/blob/main/js/google-maps-api-example.html

Od tej pory mapa będzie wyglądać zgodnie ze zdefiniowanym stylem:

Przykład wykorzystania Google Maps API na stronie firmowej

Ta strona nie może poprawnie wczytać Map Google

Przy przeglądaniu wielu stron możemy natrafić na mapkę z informacją, że Ta strona nie może poprawnie wczytać Map Google. Jest to „tryb deweloperski” Mapy Google. Kiedy tak się dzieje? Kiedy kod API, który generowaliśmy na początku opisywania drugiej metody jest niepoprawny lub nie wprowadzono go w ogóle. Może też być tak, że powiązane konto Google lub podłączone metody płatności są nieaktywne bądź projekt został usunięty.

Ta strona nie może poprawnie wczytać Map Google – Informacja

Aby rozwiązać problem „Ta strona nie może poprawnie wczytać Map Google.” wystarczy po prostu wygenerować na nowo kod i dodać go do skryptu. W wielu systemach CMS są gotowe moduły, które umożliwiają wkleić kod w wygodny formularz opcji motywu bądź dedykowanej wtyczki / modułu.

Ograniczanie dostępu do klucza Google Maps API

W środowiskach produkcyjnych należy wykonać istotny krok, który będzie zapobiegał używaniu naszego klucza API na cudzych stronach. Przechodzimy do zakładki Dane logowania i do ograniczeń aplikacji. Możemy ustawić klucz API w taki sposób aby działał tylko na konkretnych adresach URL, odsyłających adresów IP lub ograniczyć klucz do aplikacji mobilnej. Dla zwykłych stron internetowych polecam wybrać Strony odsyłające HTTP (witryny internetowe).

Ograniczenia dla klucza Google Maps API

W liście rozwijanej wpisujemy konkretne i pełne adresy URL, które prezentują mapę Google Maps. Dzięki temu nikt nie będzie za darmo korzystał z naszego klucza i klucz nie zostanie zablokowany z powodu współużytkowania jednego klucza na zbyt wielu stronach.

Podsumowanie

Google Maps API to rozbudowane narzędzie do wyświetlania interaktywnych map na stronach i w aplikacjach internetowych. Pozwala dodać mapkę do strony internetowej w poprawny i optymalny sposób. To za pomocą tego API moglibyśmy stworzyć funkcjonalności, które w jakikolwiek sposób polegają na wykorzystaniu szczegółowych map lub geolokalizacji.

Spersonalizowana, wydajna i responsywna Mapka Google pozytywnie wpływa na UX i estetykę strony. Jak widać, skorzystanie z Google Maps API ma same zalety, między innymi dzięki dość obszernym i szczegółowym opcjom dostosowania mapy do konkretnego przypadku. Google Maps API ma obszerną dokumentację z mnóstwem praktycznych i ilustrowanych przykładów, z którą warto się zapoznać.

Źródła

Oceń artykuł na temat: Mapka na stronie – Google Maps API w praktyce
Średnia : 4.9 , Maksymalnie : 5 , Głosów : 17