Spersonalizowana Mapa Google na Twojej stronie internetowej, czyli kilka słów o Google API

Tworzenie stron internetowych to proces, którego nieodłączną częścią jest określenie planów, celów i założeń. W tych dość szerokich pojęciach zawiera się wiele etapów oraz pojawia się niemało pytań, na które Klient powinien jak najdokładniej odpowiedzieć. Taka współpraca pozwala na uzyskanie widocznych efektów, dzięki którym strona WWW przyniesie firmie wiele korzyści. W przypadku projektowania każdego serwisu internetowego, kwestie wizualne dostosowywane są do indywidualnych potrzeb. Warto jednak mieć na uwadze kilka kwestii, które pozostają niezmienne dla każdego projektu. Pierwszą z nich jest oczywiście responsywność, czyli dostosowanie wyglądu strony do użytkowników mobilnych. Kolejną będzie przejrzystość, gwarantująca odpowiedni odbiór witryny przez odwiedzających. Należy również pamiętać o wprowadzeniu intuicyjnej nawigacji, pozwalającej użytkownikowi odnaleźć konkretne informacje w bezproblemowy, sprawny sposób, a także pogrupowanie informacji w odpowiednich podstronach.
W dzisiejszym wpisie opowiemy sobie jednak o szczególnym, konkretnym elemencie, który koniecznie powinien znaleźć się na stronie WWW, a mianowicie o mapie Google. Dlaczego jest ona tak ważna? Gdzie i w jaki sposób umieścić mapkę na stronie? Na te i wiele innych pytań znajdziecie odpowiedź w dalszej części artykułu.

Spis treści:

1. Czy warto umieścić mapkę Google w obrębie strony internetowej?
2. W jaki sposób zamieścić mapę Google na stronie WWW?
3. Google Maps API – nowoczesna mapa na Twojej stronie internetowej
4. Dlaczego strona internetowa nie może wczytać Map Google?
5. Wzbogać swoją stronę o funkcjonalności, które pozytywnie wpłyną na jej odbiór!

Czy warto umieścić mapę Google w obrębie strony internetowej?

Powodów dla których zamieszczenie mapki na stronie WWW jest bardzo istotne, żeby nie powiedzieć – konieczne, jest naprawdę wiele. Najważniejszy jest jednak fakt, że firma zostanie odpowiednio wyeksponowana w sieci, a użytkownicy, którzy trafią na Twoją stronę od razu zobaczą profesjonalnie oznaczoną pinezkę z siedzibą Twojej firmy oraz wyszczególnionymi informacjami. Takimi zabiegami buduje się zaufanie swoich potencjalnych Klientów, którzy mogą zobaczyć potwierdzony adres, nazwę firmy oraz opinie użytkowników. W taki sposób możesz również znacznie ułatwić odwiedzającym zlokalizowanie Twojej siedziby oraz trafienie do niej.

Z perspektywy użytkownika mobilnego, wystarczy wówczas nacisnąć na mapę, wyświetlić adres w aplikacji i uruchomić nawigację. Są to zaledwie trzy kliknięcia, dzięki którym w szybki sposób umożliwisz potencjalnym Klientom precyzyjne zlokalizowanie Twojej firmy. Szczególnie pomocne okaże się to dla Klientów lokalnych, dla których niewielka odległość okaże się dodatkowym plusem. Jeśli chodzi o umiejscowienie tego elementu na stronie WWW, najlepszą opcją będzie zamieszczenie mapy Google w obrębie podstrony KONTAKT. W ten sposób osoby zainteresowane Twoją ofertą, będą mogły nie tylko skontaktować się z Tobą telefonicznie, ale w wielu przypadkach również zjawić się osobiście.

W jaki sposób zamieścić mapę Google na stronie WWW?

Jeśli chodzi o metody zamieszczania map na stronach internetowych, możemy wyróżnić dwie. Pierwsza, najpopularaniejsza z nich – iframe jest oczywiście łatwiejsza w wykonaniu od kolejnej, jednak jest to chyba jej jedna zaleta, ponieważ zwolennicy tego rozwiązania muszą liczyć się ze sporą ilością wad, ale o tym za chwilę. Jak zamieścić mapę przy pomocy metody iframe? Wystarczy wyszukać interesującą nas lokalizację, a następnie wybrać opcji „Udostępnij lub umieść mapę” z rozwiniętego po lewej stronie menu zakładek. Następnie kopiujemy wygenerowany kod i wklejamy go do kodu HTML lub w treść strony i gotowe! Jak widzisz, technika ta jest wręcz banalna i nie wymaga żadnych zaawansowanych umiejętności, jednak tak jak wspomnieliśmy – ma swoje wady i to całkiem znaczące. Samo korzystanie z iframe postawi przy Twojej stronie duży minus. Dlaczego? Jest to bowiem kategorycznie niezgodne z nowoczesnymi zasadami projektowania stron internetowych, ponieważ powoduje znaczne obniżenie wydajności witryny. Technologia iframe nie pozwala również na personalizację wyglądu mapki. Oczywiście sam rozmiar można zmienić, z tym nie ma większego problemu. Jednak jeśli chodzi o dostosowanie kolorystyki czy wyglądu poszczególnych elementów – nie będzie to możliwe. Krótko mówiąc, nie będziesz miał możliwości ingerowania w taką mapkę.

Jeżeli zatem zależy Ci na responsywnej, szybkiej i przyjaznej dla użytkownika stronie WWW, lepiej odpuść sobie tę metodę i zdecyduj się na drugą, bardziej zaawansowaną i znacznie bardziej efektywną metodę przy pomocy Google Maps API. Co kryje się za tym tajemniczym skrótem? Spieszymy z wyjaśnieniem!

Google Maps API – nowoczesna mapa na Twojej stronie internetowej

Google Maps API (Application Programming Interface) to specjalny, wygenerowany dla konkretnego użytkownika „klucz” interfejsu programistycznego pod postacią unikatowego ciągu znaków. Dzięki niemu istnieje możliwość identyfikacji użytkownika, korzystającego z danych usług oraz połączenie z poszczególnymi usługami i zintegrowanie ich ze sobą. Wykorzystanie Google Maps API w zamieszczaniu mapek na stronach internetowych, umożliwia kontrolowanie limitów wyświetleń oraz ewentualne naliczenie opłat w przypadku przekroczenia ustalonego budżetu. Klucz Google Maps API jest konieczny do wykorzystania tej metody w swojej witrynie.

Stając przed decyzją zamieszczenia mapy Google na swojej stronie internetowej, wiele osób zastanawia się z jakimi kosztami wiąże się taka funkcjonalność. Na to pytanie nie jesteśmy w stanie udzielić jednoznacznej odpowiedzi. Wszystko zależy bowiem od ruchu w witrynie oraz częstotliwości wykorzystywania tego narzędzia przez odwiedzających. Jako podstawową wartość Google daje obecnie swoim użytkownikom 200$ kredytu miesięcznie. Dzięki temu możesz mieć kontrolę nad budżetem i wykorzystywać go jedynie na funkcjonalności, których faktycznie potrzebujesz. Ogólnie rzecz biorąc kwota udzielona przez Google wystarczy na ok. 28 tysięcy wyświetleń.

Z cennika zamieszczonego na stronie możemy dowiedzieć się, że wyświetlanie mobilnych map statycznych oraz dynamicznych jest nielimitowane, a co za tym idzie – bezpłatne. Aby uniknąć dodatkowych kosztów możesz ustalić miesięczny limit na wspomniane wcześniej 200$. Pamiętaj jednak, że w takiej sytuacji, po przekroczeniu dopuszczalnej ilości wyświetleń Twoja mapa po prostu przestanie działać. Jeśli jednak prowadzisz stosunkowo niewielką firmę, a Twoja strona nie jest odwiedzana przez niebotyczne ilości użytkowników każdego dnia – nie masz się o co martwić, z pewnością zmieścisz się w budżecie oferowanym przez Google! Ale po kolei. Jeżeli chcesz doświadczyć korzyści, jakie daje swoim użytkownikom Google Maps API, musisz dowiedzieć się w jaki sposób ten klucz pozyskać...

• W pierwszym kroku powinieneś założyć konto Google APIs. Jeżeli masz już konto, pomiń ten punkt, zaloguj się i przejdź od razu do działania;
• Wybierz opcję GET STARTED, a następnie MAPS i utwórz nowy projekt lub wybierz już istniejący;
• Kolejnym krokiem jest podanie danych rozliczeniowych. Nie ma możliwości pominięcia tego kroku, nawet jeśli nie chcesz uiszczać dodatkowych płatności za usługę;
• Po lewej stronie znajdziesz zakładkę LIBRARY, z której powinieneś wybrać sekcję GOOGLE MAPS APIS, a następnie wybraną usługę z wyświetlonej listy;
• W ostatnim kroku wybierz opcję CREDENTIALS z menu po lewej stronie, a następnie przejdź do opcji CREDENTIALS: CREATE CREDENTIALS – API KEY. Nadaj nazwę kluczowi, zapisz zmiany i skopiuj go do schowka.

Po wykonaniu tej procedury będziesz miał pełny dostęp do swojego klucza API, który pozwoli Ci na umieszczenie w obrębie strony WWW spersonalizowanej pod kątem wyglądu i działania, profesjonalnej mapki. Z perspektywy programisty – dodanie jej będzie znacznie wygodniejsze, a dodatkowo pozwoli na odpowiednią optymalizację. Warto również rozważyć kwestię zablokowania klucza API, dzięki czemu jego wykorzystywanie będzie możliwe wyłącznie w obrębie konkretnej domeny. Uchroni Cię to przed dodatkowymi płatnościami, którymi mogłoby zostać obciążone Twoje konto. Dzięki wygenerowaniu klucza API będziesz mógł dodać nowoczesną, profesjonalną mapkę do swojej strony internetowej, wprowadzając odpowiednie zmiany w kodzie.

Dlaczego strona internetowa nie może wczytać Map Google?

Zdarza się, że po wdrożeniu i zatwierdzeniu wszystkich zmian, na stronie WWW wyświetli się komunikat „Ta strona nie może poprawnie wczytać Map Google”. Dlaczego tak się dzieje? Przyczyny w większości przypadków należy szukać u źródła, czyli na etapie generacji klucza API. Jeżeli jest on niepoprawny, został źle skopiowany lub nie został w ogóle wprowadzony, utworzona mapa z pewnością nie będzie działała poprawnie. Jeśli jednak klucz został wygenerowany poprawnie możemy mieć do czynienia z takimi problemami jak:

• usunięcie projektu;
• powiązane konto Google jest nieaktywne;
• wybrana metoda płatności jest nieaktywna.

W takich sytuacjach wystarczy skorygować nieprawidłowości i na nowo wygenerować oraz wkleić kod w odpowiednie miejsce w skrypcie.

Wzbogać swoją stronę o funkcjonalności, które pozytywnie wpłyną na jej odbiór!

Tak jak wspomnieliśmy na początku, wiele kwestii związanych z tworzeniem stron internetowych jest indywidualnych. Istnieją jednak takie, które działają na podstawie sprawdzonych schematów i wykorzystywane są w właściwie w każdym dobrze funkcjonującym projekcie. Planując stworzenie strony internetowej dla własnej firmy musisz pamiętać o dostosowywaniu niektórych decyzji do potrzeb użytkownika. Budowa menu, zawartość podstron, rozmieszczenie poszczególnych elementów oraz dodatkowe funkcjonalności – to wszystko powinno mieć swoje miejsce! Zakładka KONTAKT bardzo często jest bagatelizowana przez amatorskich twórców, co jak się okazuje, może mieć kolosalny wpływ na wydajność całej witryny. Zamieszczając mapkę na tej podstronie, nie warto decydować się na najłatwiejszy sposób, tylko dlatego, że wydaje się szybki i nieskomplikowany. Znacznie lepszym pomysłem będzie wybranie opcji, która nie wiąże się z dodatkowymi utrudnieniami, złym wpływem na UX czy znacznym pogorszeniem wydajności serwisu. W pełni spersonalizowana i responsywna Mapa Google, dodana do strony przy pomocy indywidualnego klucza API przyniesie zarówno właścicielom strony jak i jej użytkownikom liczne korzyści.

W naszych projektach zawsze kierujemy się wydajnością, responsywnością i estetyką. Dbamy zarówno o kwestie wizualne tworzonych stron WWW, jak i ich praktyczność oraz funkcjonalność. Jeżeli potrzebujesz specjalistów, którzy zajmą się Twoją stroną na każdej płaszczyźnie – skontaktuj się z nami, a na pewno znajdziemy sposób, aby Ci pomóc!