Mapy są istotnym aspektem każdej strony internetowej firmy. Nawet jeśli jesteś całkowicie oparty na Internecie, klienci nadal lubią wiedzieć, kim jesteś i gdzie mieszkasz. Mapy Google są teraz domyślną opcją dla wielu witryn, ponieważ są najłatwiejsze w użyciu, pozornie najdokładniejsze i są bezpłatne. Pod koniec tego samouczka będziesz wiedział dokładnie, jak osadzić responsywną mapę Google w swojej witrynie.
Domyślne Mapy Google nie zawsze reagują, więc mogą nie być skalowane do różnych rozmiarów ekranu. W zależności od tego, czy korzystasz z wtyczki WordPress, czy też osadzasz ją samodzielnie za pomocą kodu, może być konieczne dodanie kilku wierszy CSS, aby mapa reagowała.
Elastyczne projektowanie stron internetowych
Responsywne jest tutaj kluczowym terminem. Opisuje projektowanie stron internetowych, które uwzględnia wrażenia użytkownika i urządzenie, aby upewnić się, że jest takie samo, niezależnie od tego, jakiego urządzenia używasz do uzyskania dostępu do strony. Na przykład responsywna witryna internetowa powinna zapewniać tę samą jakość korzystania, niezależnie od tego, czy odwiedzasz ją na komputerze, tablecie czy smartfonie.
Aby to zrobić, strona musi dostosować się do różnych rozdzielczości, rozmiarów ekranu i dotykać.
Osadzanie responsywnej mapy Google na stronie internetowej
Istnieją trzy sposoby na umieszczenie Map Google na stronie internetowej. Jeśli używasz motywu WordPress, może on mieć wbudowaną funkcję. Możesz także użyć wtyczki lub osadzić kod bezpośrednio z Google na dowolnej stronie internetowej. Pierwsza i druga opcja są świetne dla użytkowników WordPress, inne CMS również używają wtyczek, więc jesteś tam objęty. Ostatnią opcją jest użycie kodu, który powinien działać na większości stron internetowych, niezależnie od ich budowy.
Użyj motywu WordPress, aby osadzić responsywną mapę Google
Niektóre motywy WordPress będą miały funkcję przeznaczoną specjalnie dla Map Google. Ponieważ mapy są tak fundamentalne dla współczesnych stron internetowych, niektórzy projektanci motywów zastosowali je bezpośrednio w swoich projektach. Jeśli Twój motyw ma funkcję mapy, prawdopodobnie będziesz potrzebować interfejsu API Map Google, aby go uruchomić. Dodajesz interfejs API do opcji motywu, a przy każdej wizycie będzie rozmawiać bezpośrednio z Google, aby budować mapę.
- Odwiedź tę stronę w witrynie Google, aby rozpocząć proces API.
- Wybierz niebieski przycisk Rozpocznij.
- Wybierz ikonę menu z trzema liniami w lewym górnym rogu nowego ekranu.
- Wybierz interfejsy API i usługi, a następnie poświadczenia.
- Wybierz Utwórz poświadczenia, a następnie Klucz API.
- Wybierz Ogranicz klucz i wybierz Polecenia HTTP.
- Wybierz Zapisz.
- Skopiuj klucz API i wklej go na stronę opcji projektu, która go wymaga.
Po uzyskaniu klucza API możesz zaimplementować Mapę Google na swojej stronie za pomocą narzędzi do projektowania motywów. Tak długo, jak motyw jest responsywny, mapa też powinna być.
Użyj wtyczki, aby osadzić responsywną mapę Google
WordPress używa wtyczek, Joomla używa rozszerzeń, Drupal używa modułów lub wtyczek, a inne CMS używają podobnych konwencji nazewnictwa. Tak czy inaczej, wtyczki odnoszą się do elementów modułowych, które można przykręcić do podstawowego CMS, aby dodać funkcje. Jedną przydatną funkcją jest mapa Google. Jeśli motyw Twojej witryny nie zawiera elementu mapy i nie chcesz samodzielnie tworzyć kodu, wtyczka jest następną najlepszą rzeczą.
- W WordPress przejdź do Wtyczki i Dodaj nowe.
- Wyszukaj Mapy Google i wybierz wtyczkę, która Ci się podoba.
- Włącz go we wtyczkach i przejdź do jego ustawień.
- Dodaj interfejs API Map Google utworzony powyżej, tam gdzie jest to wskazane, i Zapisz.
- Zaimplementuj wtyczkę wszędzie tam, gdzie chcesz, aby mapa się pojawiła.
Inne CMS różnią się nieznacznie pod względem nazw i pozycji menu, ale zasada jest taka sama. Większość, jeśli nie wszystkie, wtyczki map będą wymagać interfejsu API Map Google.
Użyj kodu, aby osadzić responsywną mapę Google
Jeśli nie korzystasz z WordPressa lub innego CMS-a, nadal możesz osadzić responsywną mapę Google. Musisz tylko użyć kodu zamiast modułu. Zajmuje to trochę więcej pracy, ale zapewnia te same responsywne mapy.
- Odwiedzaj Mapy Google i nawiguj, aż mapa, którą chcesz wyświetlić, wypełni ekran.
- Wybierz niebieski link Udostępnij i skopiuj kod z Osadź mapę.
- Dodaj swój kod do umieszczenia na poniższym kodzie między i.
- Dodaj kod w kodzie HTML swojej strony internetowej, na której chcesz zobaczyć mapę.
- Zapisz swoje zmiany.
Kod:
To nie jest mój kod, znalazłem go w Internecie, ale przetestowałem go na mojej stronie. Działa to jak urok i powinno działać niezależnie od tego, czy używasz CMS, HTML, Hugo, czy jednego z wielu innych języków witryny lub narzędzi strony.
