Co wiedzieć
- Przejdź do Konsola Google Cloud Platform i utwórz lub wybierz projekt, a następnie kliknij Kontyntynuj. Na Kwalifikacje strona, zdobądź Klucz API.
- Wstaw kod JavaScript (pokazany poniżej) w sekcji BODY dokumentu HTML.
- W nagłówku dokumentu HTML określ ograniczenia CSS dla mapy, w tym rozmiar, kolory i położenie strony.
W tym artykule wyjaśniono, jak wstawić mapę Google ze znacznikiem lokalizacji na swoją stronę internetową. Proces ten obejmuje uzyskanie specjalnego klucza oprogramowania od Google, a następnie dodanie odpowiedniego kodu JavaScript do strony.
Uzyskaj klucz API Map Google
Aby chronić swoje serwery przed bombardowaniem przez żądania map i wyszukiwania lokalizacji, Google ogranicza dostęp do swojej bazy danych Map. Musisz zarejestrować się w Google jako programista, aby uzyskać unikalny klucz do używania interfejsu programowania aplikacji do żą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 stworzenia aplikacji internetowej).
Aby zarejestrować klucz API:
Przejdź do Konsola Google Cloud Platform a po zalogowaniu się na swoje konto Google utwórz nowy projekt lub wybierz istniejący.
Kliknij Kontyntynuj aby włączyć API i wszelkie powiązane usługi.
Na Kwalifikacje strona, zdobądź Klucz API. W razie potrzeby ustaw odpowiednie ograniczenia na kluczu.
Zabezpiecz swój klucz API za pomocą najlepsze praktyki zalecane przez Google.
Jeśli uważasz, że mapa będzie wyświetlana częściej, niż pozwala na to Twój bezpłatny limit, skonfiguruj umowę rozliczeniową z Google. Większość stron internetowych, zwłaszcza blogi o małym natężeniu ruchu lub witryny niszowe, prawdopodobnie nie wykorzystają dużej części przydziału limitów.
Wstaw JavaScript do swojej strony internetowej
Wstaw następujący kod do swojej strony internetowej, w sekcji BODY dokumentu HTML:
// Zainicjuj i dodaj funkcję mapy initMap() {
// Lokalizacja flagi var flag = {lat: XXX, lng: YYY};
// Mapa wyśrodkowana na flagi var map = new google.maps. Mapa( document.getElementById('map'), {zoom: 4, center: flag});
// Znacznik umieszczony na fladze var marker = new google.maps. Marker({pozycja: flaga, mapa: mapa}); } src=” https://maps.googleapis.com/maps/api/js? key=YOUR_API_KEY&callback=initMap">
W tym kodzie zmień następujące elementy:
- Zastąpić flaga z nazwą odwołującą się do lokalizacji, którą przypinasz. Zachowaj prostotę i zwięzłość (np. Dom lub gabinet lub Paryż lub detroit). Możesz uruchomić ten kod wychodząc flaga bez zmian, ale zmiana nazwy umożliwia ponowne użycie tego kodu na tej samej stronie, aby osadzić kilka różnych map.
- Zastąpić XXX i RRRR z szerokością i długością geograficzną, w ułamkach dziesiętnych, lokalizacji znacznika mapy. Musisz zastąpić te wartości, aby mapa wyświetlała się poprawnie. Prostym sposobem na znalezienie szerokości i długości geograficznej jest otwarcie Map Google i kliknięcie prawym przyciskiem myszy dokładnej lokalizacji, którą chcesz oznaczyć. W menu kontekstowym wybierz Co jest tutaj? aby zobaczyć szerokość i długość geograficzną.
- Zastąpić TWÓJ_KLUCZ APIAPI za pomocą klucza API otrzymanego od Google. Nie umieszczaj spacji między znakiem równości a znakiem &. Bez klucza zapytanie zakończy się niepowodzeniem i mapa nie będzie wyświetlana poprawnie.
Optymalne praktyki
W nagłówku dokumentu HTML określ ograniczenia CSS dla mapy, w tym rozmiar, kolory i położenie strony.
Skrypt mapy Google zawiera atrybuty takie jak Powiększenie i środek które są otwarte na modyfikację użytkownika końcowego. Ta bardziej zaawansowana technika jest obsługiwana w dokumentacji dla programistów Google.
Interfejs API Map Google to cenny zasób. Instrukcje Google dotyczące najlepszych praktyk stanowią doskonałe porady dotyczące zabezpieczenia klucza przed niewłaściwym użyciem przez inne osoby. Właściwe bezpieczeństwo jest szczególnie istotne, jeśli masz skonfigurowany system płatności za dostęp do interfejsu API, ponieważ możesz zapłacić wysoki rachunek, jeśli Twoje dane uwierzytelniające zostaną skradzione. W szczególności przykład, który tutaj pokazaliśmy robi osadzić klucz API bezpośrednio w kodzie — zrobiliśmy to w celu zademonstrowania procedury. Jednak w środowisku produkcyjnym lepiej jest określić zmienne środowiskowe dla klucza zamiast wstawiać klucz bezpośrednio.