Home > Blog > Aktualności > Jak dodać mapę Google na naszej stronie internetowej?

Jak dodać mapę Google na naszej stronie internetowej?

, Czas czytania: 3:30 min. , Komentarz(y):6

Pewnie zastanawiałeś się kiedyś, w jaki sposób możesz umieścić mapę dojazdu do swojej firmy na stronie. Posłużyć do tego mogą np. Google Maps, OpenStreetMap czy mapy Targeo. Warto mieć na stronie mapę, aby klient mógł od razu zorientować się w lokalizacji naszej firmy. Dzisiaj na tapetę weźmiemy najpopularniejsze istniejące mapy online, czyli Google Maps.

Spis treści:

Czym jest Google Maps API?

Mapy Google umożliwiają nam korzystanie z udostępnionych API do pobierania potrzebnych nam danych z serwisu. Czym właściwie jest to API? Jest to pośrednik pomiędzy danymi na temat map, które posiada Google, a naszą aplikacją, jeśli w odpowiedni sposób zaimplementujemy w niej pobieranie danych. API to posiada swoją strukturę i określone reguły, w jaki sposób należy z niego korzystać. Google Cloud Platform udostępnia wiele rodzajów API oraz SDK dla systemów mobilnych służących do komunikacji z mapami. Należą do nich:

  • Maps SDK for Android
  • Places SDK for Android
  • Maps SDK for iOS
  • Places SDK for iOS
  • Maps Embed API
  • Maps JavaScript APIPlaces Library, Maps JavaScript API
  • Maps Static API
  • Street View Static API
  • Directions API. Distance Matrix API.
  • Elevation API.
  • Geocoding API
  • Geolocation APIPlaces APIRoads API
  • Time Zone API

Jeśli chcemy wstawić na naszą stronę mapkę Google, możemy skorzystać z Maps JavaScript API. Jest to API, które możemy wykorzystać praktycznie na każdej stronie. Wtedy na pewno się ona wzbogaci i ułatwi dojazd do firmy.

Jak dodać Mapę Google wraz ze znacznikiem do swojej strony?

Z dokumentacji Maps JavaScript API możemy dowiedzieć się jak wstawić podstawową mapę na naszą stronę. W tym celu będziemy potrzebowali wygenerowanego klucza API. W celu wygenerowania go przechodzimy na stronę https://console.cloud.google.com/apis/credentials, gdzie logujemy się na nasze konto Google, jeśli nie jesteśmy jeszcze zalogowani. Klikamy w przycisk „utwórz dane logowania” oraz wybieramy klucz interfejsu API. Po wygenerowaniu się klucza kopiujemy go, ponieważ będzie nam zaraz potrzebny.

Klucz interfejsu API

Powyższy kod będzie naszą strukturą html. Przykład szablonu dostępny jest w dokumentacji Google Maps JavaScript API. W miejsce NASZ_KLUCZ_API wpisujemy oczywiście nasz wygenerowany klucz.

Domyślne style css mogą wyglądać jak poniżej:

Domyślne style css

Dodajemy również kod JavaScript, którego działanie zaraz wyjaśnię:

kod JavaScript

W stałej candywebLatLng przechowujemy lokalizację naszego markera. Adres taki możemy pobrać, np. wchodząc na mapy Google i klikając prawym przyciskiem w wybranej przez nas lokalizacji. Za pomocą center: podajemy lokalizację, na którą chcemy uzyskać zoom. Wykorzystane przez nas infowindow służy do wyświetlenia okna z informacjami na temat naszego markera. Dzięki metodzie open(), okienko na temat naszej strony wyskakuje od razu po załadowaniu strony.


Jak wygląda nasza mapa?

mapa Google firmy

Podsumowanie – czy warto korzystać z Google Maps API?

Google Maps API to ogromny zbiór interfejsów programistycznych aplikacji do komunikacji z mapami. Umożliwia on uzyskanie dostępu do danych na temat lokalizacji z całego świata. Wstawienie mapy na naszą stronę jest względnie proste. Poprawia ona w dużym stopniu wygląd strony i jej interaktywność. Myślę, że jeszcze nie jeden raz skorzystam z funkcjonalności wspomnianego API.

TAGI:

Zostaw komentarz do artykułu: Jak dodać mapę Google na naszej stronie internetowej?

6 Komentarz

Dodaj komentarz

candyweb mateusz

Początkujący koder zainteresowany frontendem. Uwielbia gry z wciągającą fabułą i nie wyobraża sobie dnia bez ulubionej muzyki.