Mapa Google na stronie. Sposoby wdrożenia i dopasowania stylu mapy
Dodanie mapy Google do strony internetowej jest bardzo proste i nie wymaga zbyt dużo czasu. Korzyści z umieszczenia mapy są ogromne. Kosztem kilku minut możemy w prosty sposób osadzić mapę w podstronie kontakt lub w dowolnym miejscu na stronie. Powiemy jak rozwiązać problem z komunikatem : Ta strona nie może poprawnie wczytać Map Google
Korzyści z dodania mapy Google
Poznaj zalety z wdrożenia map Google na stronie. Dzięki Google mapie :
- wykorzystasz dodatkowe informacje i dane o firmie na stronie,
- poprawić wiarygodność firmy, mapy Google z wysokimi ocenami, budzą zaufanie,
- pokazać opinie Klientów i realnych użytkowników,
- poprawić widoczność strony w wynikach wyszukiwania / choć nie jest to priorytetowy czynnik /
- umożliwić Klientom udostępnienie trasy dojazdu do firmy
- dzięki dobrze prowadzonej mapie tj; wizytówce Google możesz budować widoczność w lokalnych wynikach w mapkach Google
Zobacz naszą ofertę : tworzenie stron Wordpress
Spis treści :
- sposoby wdrożenia mapy Google na stronie
- osadzanie mapy google na stronie poprzez API
- osadzanie mapy google sposobem iframe
- jak dodać mapę do strony na Wordpress
- sposoby zabezpieczania kluczy API
- problem z mapami : Ta strona nie może poprawnie wczytać Map Google
Sposoby wdrożenia mapy Google na stronie
Wdrożenie mapy Google możemy wykonać na dwa sposoby: poprzez osadzenie na stronie ramki z kodem, którą pobieramy bezpośrednio w mapy lub poprzez API Google. Poniżej omówimy powyższe sposoby dodania mapy.
Jak wstawić mapę Google poprzez API Google Maps ?
To zalecany przez nas sposób wdrożenia mapy na stronę.
Zaletą tego wdrożenia jest:
- możliwość personalizacji wyglądu i ustawień mapy,
- ustawienia zooma dla mapy,
- dostosowania pinezki oraz umieszczenia własnych treści w tym logo i grafiki,
- lepsza wydajność wdrożenia w stosunku do sposobu osadzania poprzez iframe,
Aby korzystać z API musisz podpiąć kartę płatności. Od Google otrzymasz 200$ na start co daje 28.000 wyświetleń mapy w miesiącu.
Istnieje możliwość ustawienia budżetu tak, że nie przekroczy on 200$ – czyli korzystanie z Google Maps pozostanie darmowe. W takim wypadku jednak, jeśli limit darmowych wyświetleń zostanie osiągnięty, mapa przestanie się wyświetlać.
Sposób aby wykorzystać tylko darmowe wyświetlenia mapy jest ustawienie w opcji płatności limitów dla płatności. Limit ustawiamy na 0 zł.
Umieszczenie mapy poprzez API krok po kroku
Dostęp do API otrzymasz po wejściu na platformę Google pod adresem https://cloud.google.com/maps-platform gdzie utworzysz klucz API.
Logowanie i zakładanie konta w Google Maps Platform
Logowanie do panelu odbywa się po kliknięciu 'Get Started'.
Jeżeli nie masz konta w Google Maps Platform zostaniesz poproszony o podanie danych oraz podpięcie karty płatności.
W kroku 1 i 2 wypełniamy niezbędne dane potrzebne do założenia konta
Generowanie klucza API przy zakładaniu konta Google Maps
W kroku 3cim wprowadzamy dane potrzebne do wygenerowania klucza API
Kolejno kreator poprowadzi nas w procesie tworzenia konta oraz generowania API
Widok po zalogowaniu do panelu.
W przypadku jeżeli do swojego konta chcesz podpiąć / dodać / kolejny klucz lub projekt kliknij guzik 'Utwórz projekt'.
Istotne interfejsy, które powinny być włączone
Warto również aktywować API dla usług Geocoding oraz Geolocation. Aktywację wykonasz z poziomu menu bocznego Interfejsy AP lub poprzez wskaźniki.
Poniżej lista niezbędnych interfejsów które powinny być w statusie włączone.
- Directions API
- Distance Matrix API
- Geocoding API
- Geolocation API
- Maps Embed API
- Maps JavaScript API
- Maps Static API
- Places API
Jak wstawić mapę Google na stronę poprzez ramkę iframe ?
Technika prostsza w realizacji, nie wymaga skomplikowanych technicznych procedur, logowania i pobierania kodów. Wystarczy jak wejdziesz w mapę swojej firmy lub poprzez link https://www.google.pl/maps, klikniesz guzik 'udostępnij i umieść mapę' bezpośrednio z mapy Google.
W popupie który się pokaże :
- klikamy guzik ''umieszcznie mapy',
- wybieramy wielkość,
- klikamy 'kopiuj HTML',
- wygenerowany kod możemy wkleić na stronie w dowolnym miejscu niezależnie od systemu CMS i techniki wykonania strony
Wady wstawienia mapy Google w iframe
W tym sposobie osadzania mapy istnieje kilka wad o których warto wspomnieć:
- brak możliwości dopasowania wizualnego mapy i jej personalizacji,
- wstawiany kod to ramka iframe czyli umieszczenie innego kodu na sztywno w kodzie naszej strony,
Sposoby zabezpieczenia kluczy API w Google Maps
Google Maps obsługuje cztery typy zabezpieczeń możliwych do ustawienia. Zabezpieczenia aplikacji ogranicza użycie klucza API do podanych stron internetowych, adresów IP, serwerów lub aplikacji, które możesz ustawić podczas pierwszego zakładania konta dla danego klucza lub w edycji projektu.
Typy zabezpieczeń aplikacji to :
- HTTP referer pozwala na ustawienie ograniczeń dla konkretnej domeny, strony, grupy stron
- Adresy IP – ogranicza użycie do jednego lub wielu adresów IP
- Aplikacje Android – ogranicza użycie do wywołań z aplikacji Android
- Aplikacje iOS – ogranicza użycie do wywołań z aplikacji iOS
Nie umieszczaj kluczy API bezpośrednio w kodzie strony lub aplikacji
Dobrą praktyką wg. zaleceń, które udostępniło Google (https://cloud.google.com/docs/authentication/api-keys) jest aby nie umieszczać kluczy API bezpośrednio w kodzie przez co są narażone na przypadkowe upublicznienie. Warto przechowywać je w zmiennych lub plikach poza główną strukturą strony lub aplikacji.
Jak dodać mapę Google do strony na Wordpress ?
W przypadku Wordpress mapę można dodać zarówno poprzez niezalecane rozwiązanie iframe jak i wykorzystując otrzymany kod API z Google Maps.
Kod możemy umieścić odpowiednio w zależności od wykonanego wdrożenia albo w konfiguracji motywu, wtycze lub przygotowanej konfiguracji w polach ACFpro.
Wtyczka WP Go Maps
Jeżeli Twój Wordpress nie ma w ustawieniach opcji integracji po API z mapami Google możesz użyć wtyczki. Link do wtyczki : https://pl.wordpress.org/plugins/wp-google-maps/
Przechodząc do menu wtyczki tj: mapy -> ustawienia -> zaawansowane - wklej klucz API
General settings
W ustawieniach wtyczki WP Go Maps możesz wybrać opcje:
- Krótki kod – shortcode do umieszczenia mapy w dowolnym miejscu na stronie,
- Nazwa mapy – nazwa Twojej mapy
- Zoom level – widok mapy
- Szerokość – szerokość mapy w pojemniku, jeżeli nie będzie zdefiniowany to wymiary mapy będą brane z tego pola, do ustawienia wartość w px, %.
- Wysokość – do ustawienia podobnie jak w przypadku szerokości
Zakładka Themes
Wygląd mapy możesz również zmienić stylistykę mapy wg. predefiniowaych presetów.
Zaawansowane
W wersji darmowej wtyczki możesz dodać wiele znaczników jednak bez opcji ich dopasowania. Do dyspozycji jest tylko i wyłącznie standardowa pinezka.
Dodatkowo do wprowadzenia :
- Adres/pozycja GPS,
- Animacja – animacja znacznika,
- Okno informacyjne domyślnie otwarte – czyli tooltip/dymek nad znacznikiem, który może być otwarty na start lub po kliknięciu
Zobacz również:
Ta strona nie może poprawnie wczytać Map Google
Często dostajemy zapytania od Klientów w sprawie problemu i zgłaszanego komunikatu w mapie google, która nie wyświetla się poprawnie. Widok mapy na stronie jest zablokowany i wygląda jak poniżej.
Problem z poprawnością wczytania mapy google występować może z dwóch powodów:
- Podłączone metody płatności zostały usunięte lub nie nastąpiła płatność z karty. W tym celu warto sprawdzić w panelu Google Maps zakładkę rozliczenia. Problem występuje z osadzeniem map przed okresem wprowadzenia ograniczeń i limitów na wyświetlenia map w wersji darmowej, gdzie nie trzeba było podawać jeszcze karty płatniczej celem odblokowania API
- Projekt został usunięty z panelu,
