Spis treści:

• Czym jest Google Maps API?
• Jak dodać Mapę Google wraz ze znacznikiem do swojej strony?
• Podsumowanie – czy warto korzystać z Google Maps API?

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.

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:

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

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?

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.

Artykuł Jak dodać mapę Google na naszej stronie internetowej? pochodzi z serwisu - candyweb.pl.