Uzyskaj klucz API Map Google dla swojej witryny
Najlepszym sposobem dodania mapy Google do swojej witryny jest użycie Google Maps API. Google zaleca też pobranie klucza API w celu korzystania z map.
Nie musisz pobierać klucza API, aby korzystać z Google Maps API v3, ale jest to bardzo przydatne, ponieważ pozwala monitorować wykorzystanie i płacić za dodatkowy dostęp. Google Maps API v3 ma przydziału 1 żądanie na sekundę na użytkownika, maksymalnie 25 000 żądań dziennie. Jeśli Twoje strony przekroczą te limity, musisz włączyć rozliczenia, aby uzyskać więcej.
Jak zdobyć klucz API Map Google
- Zaloguj się do Google przy użyciu swojego konta Google.
- Przejdź do Developers Console
- Przewiń listę i znajdź Google Maps API v3, a następnie kliknij przycisk "OFF", aby go włączyć.
- Przeczytaj i zaakceptuj warunki.
- Przejdź do konsoli API i wybierz "Dostęp API" z menu po lewej stronie
- W sekcji "Prosty dostęp do interfejsu API" kliknij przycisk "Utwórz nowy klucz serwera …".
- Wprowadź adres IP swojego serwera WWW. To jest adres IP, z którego pochodzą Twoje żądania Map. Jeśli nie znasz swojego adresu IP, możesz go sprawdzić.
- Skopiuj tekst w wierszu "API key:" (bez tego tytułu). To jest klucz API do twoich map.
Konwertuj swój adres na współrzędne
Aby korzystać z Google Maps na swoich stronach internetowych, musisz mieć szerokość i długość geograficzną dla tej lokalizacji. Możesz je uzyskać z GPS lub możesz użyć narzędzia online, takiego jak Geocoder.us, aby Ci powiedzieć.
- Przejdź do Geocoder.us i wpisz swój adres w polu wyszukiwania.
- Skopiuj pierwszą liczbę dla szerokości geograficznej (bez litery z przodu) i wklej ją do pliku tekstowego. Nie potrzebujesz wskaźnika stopnia (º).
- Skopiuj pierwszy numer długości geograficznej (ponownie bez litery z przodu) i wklej go do pliku tekstowego.
Twoja szerokość i długość geograficzna będą wyglądały mniej więcej tak:
40.756076-73.990838
Geocoder.us działa tylko w przypadku adresów w Stanach Zjednoczonych, jeśli potrzebujesz uzyskać współrzędne w innym kraju, powinieneś wyszukać podobne narzędzie w swoim regionie.
03 z 05Dodawanie mapy do strony internetowej
Najpierw dodaj Skrypt mapy do pliku
twojego dokumentu
Otwórz swoją stronę internetową i dodaj następujące elementy do GŁOWA twojego dokumentu.
Zmień wyróżniony fragment na długości i szerokości geograficzne zapisane w kroku drugim.
Po drugie, dodaj element mapy do swojej strony
Po dodaniu wszystkich elementów skryptu do GŁOWA dokumentu, musisz umieścić mapę na stronie. Robisz to, dodając a DIV element z id = "mapa-płótno" atrybut. Polecam ci również styl tego elementu div z szerokością i wysokością, które zmieszczą się na twojej stronie:
Wreszcie, Prześlij i przetestuj
Ostatnią rzeczą do zrobienia jest załadowanie strony i przetestowanie wyświetlania mapy. Oto przykład mapy Google na stronie. Uwaga, ze względu na sposób działania portalu About.com CMS, musisz kliknąć łącze, aby wyświetlić mapę. Tak nie będzie na twojej stronie.
Jeśli twoja mapa się nie wyświetla, spróbuj zainicjować ją za pomocą CIAŁO atrybut:
onload = "initialize ()" >
Inne rzeczy do sprawdzenia, czy Twoja mapa nie ładuje się, to:
- Poszukaj literówek w swoim JavaScript, w tym przypadku. JavaScript rozróżnia wielkość liter.
- Upewnij się, że masz
Powiększenieiśrodekzestaw opcji. - Upewnij się, że twoje
DIVelement znajduje się na stronie z poprawnym identyfikatorem. - Upewnij się, że twoje
DIVelement ma wysokość.
Dodaj znacznik do swojej mapy
Ale jaka jest dobra mapa twojej lokalizacji, jeśli nie ma markera, który mówi ludziom, gdzie powinni się udać?
Aby dodać standardowy czerwony znacznik Google Maps, dodaj poniższy skrypt do skryptu poniżej var map = … linia:
var myLatlng = new google.maps.LatLng ( długości i szerokości geograficznej );var marker = new google.maps.Marker ({pozycja: myLatlng,mapa: mapa,tytuł:" Dawna siedziba About.com '});
Zmień zaznaczony tekst na swoją szerokość i długość geograficzną oraz tytuł, który ma się pojawiać, gdy ludzie zatrzymają kursor nad znacznikiem.
Możesz dodać tyle znaczników do strony, ile chcesz, po prostu dodaj nowe zmienne z nowymi współrzędnymi i tytułami, ale jeśli mapa jest zbyt mała, aby wyświetlić wszystkie znaczniki, nie będą one wyświetlane, chyba że czytelnik pomniejszy.
var latlng 2 = new google.maps.LatLng ( 37.3316591,-122.0301778 );var myMarker 2 = new google.maps.Marker ({pozycja: latlng 2 ,mapa: mapa,tytuł:" komputer Apple '});
Oto przykład mapy Google z markerem. Uwaga, ze względu na sposób działania CMSa About.com, musisz kliknąć łącze, aby wyświetlić mapę. Tak nie będzie na twojej stronie.
05 z 05Dodaj drugą (lub więcej) mapę do swojej strony
Jeśli spojrzysz na moją przykładową stronę z mapami Google, zauważysz, że na stronie jest więcej niż jedna mapa. Jest to bardzo łatwe do zrobienia. Oto jak.
- Pobierz szerokość i długość geograficzną wszystkich map, które chcesz wyświetlić, tak jak dowiedzieliśmy się w kroku 2 tego samouczka.
- Wstaw pierwszą mapę, tak jak dowiedzieliśmy się w kroku 3 tego samouczka. Jeśli chcesz, aby mapa posiadała znacznik, dodaj znacznik jak w kroku 4.
- W przypadku drugiej mapy musisz dodać 3 nowe linie do skryptu initialize ():
var latlng2 = new google.maps.LatLng ( drugie współrzędne );var myOptions2 = {zoom: 18, środek: latlng2, mapTypeId: google.maps.MapTypeId.ROADMAP};var map2 = new google.maps.Map (document.getElementById ("map_canvas_2"), myOptions2); - Jeśli chcesz również znacznik na nowej mapie, dodaj drugi znacznik wskazujący na drugie współrzędne i drugą mapę:
var myMarker2 = new google.maps.Marker ({position: latlng2 , mapa: map2 , tytuł: " Twój tytuł znacznika ' }); - Następnie dodaj drugą, w której chcesz drugą mapę. I pamiętaj, aby dać to
id = "map_canvas_2"ID. - Po załadowaniu strony wyświetlone zostaną dwie mapy
Oto kod strony z dwiema mapami Google:
