Jak dodać mapę Google do strony internetowej za pomocą interfejsu API



przez

Aby wstawić mapę Google ze znacznikiem lokalizacji na swoją stronę internetową, musisz uzyskać specjalny klucz oprogramowania od Google, a następnie dodać odpowiedni kod JavaScript do strony. Chociaż proces jest prosty, warto mieć przynajmniej pobieżną wiedzę podstawową na temat HTML i JavaScript.


Uzyskaj klucz API Map Google

Aby chronić swoje serwery przed bombardowaniem żądaniami map i wyszukiwań lokalizacji, Google ogranicza dostęp do swojej bazy danych Map. Musisz zarejestrować się w Google jako programista, aby uzyskać unikatowy klucz do korzystania z interfejsu programowania aplikacji w celu żądania danych z serwerów Map. Klucz API jest bezpłatny, chyba że potrzebujesz intensywnego dostępu do serwerów Google (na przykład w celu opracowania aplikacji internetowej).

Aby zarejestrować swój klucz API:

  1. Przejdź do konsoli Google Cloud Platform i po zalogowaniu się na swoje konto Google utwórz nowy projekt lub wybierz istniejący.

  2. Kliknij KONTUNUUJ aby włączyć interfejs API i wszelkie powiązane usługi.

  3. Na Listy uwierzytelniające stronę, zdobądź Klucz API. W razie potrzeby ustaw odpowiednie ograniczenia dla klucza.

  4. Zabezpiecz swój klucz API, korzystając ze sprawdzonych metod zalecanych przez Google.

Jeśli uważasz, że mapa będzie wyświetlana częściej, niż pozwala na to Twój bezpłatny limit, skonfiguruj rozliczenia z Google. Większość witryn internetowych - zwłaszcza blogi o małym ruchu lub witryny niszowe - prawdopodobnie nie pochłonie dużej części przydziału.

Wstaw JavaScript do swojej strony internetowej

Wstaw następujący kod na swoją stronę internetową, w sekcji BODY dokumentu HTML:

<div id = "map"> </div>
<Script>
// Zainicjuj i dodaj mapę
function initMap () {
// Lokalizacja flagi
var flag = {lat: XXX, lng: YYY};
// Mapa wyśrodkowana na fladze
var map = new google.maps.Map (
document.getElementById ('mapa'), {powiększenie: 4, środek: flaga});
// Znacznik umieszczony pod flagą
var marker = new google.maps.Marker ({pozycja: flaga, mapa: mapa});
}
</ Script>
<odroczenie asynchronizacji skryptu
src = "https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">


Dodaj komentarz