Jak umieścić Google Earth na stronie lub blogu

Dzięki wtyczce Google Earth do przeglądarek możemy umieścić na swojej stronie ten oto obiekt, korzystając z wszystkich korzyści płynących z plików KML, a dodatkowo otrzymujemy API do JavaScriptu. Google Earth można osadzić jako obiekt Google Earth poprzez metody JavaScript udostępnione w ramach Google Earth API. W zaledwie kilku linijkach możemy uruchomić wirtualny świat 3D na własnej stronie.


Pierwszym krokiem jest otrzymanie klucza dla naszej strony - podobnie jak to było w poprzedniej wersji Google Maps. Po jego otrzymaniu dołączamy do naszej strony plik JS z API.
<script src="http://www.google.com/jsapi?key=klucz"></script>
Następnie uruchamiamy metodę dynamicznego ładowania API google.load z parametrem nazwy API czyli earth oraz wersją - najnowsza stabilna wersja to 1. Jeżeli chcemy używać wersji testowych wówczas wpisujemy "1.x".
google.load("earth", 1);
Po załadowaniu API możemy zacząć umieszczać nasz obiekt na stronie. Google Earth dopasowuje się do wielkości węzła (kontenera), w który go włożymy - najprościej będzie uruchomić go w znaczniku <div>.
<div id="earth" style="width: 580px; height: 350px;"></div>
Ostatnim punktem jest uruchomienie instancji Google Earth w wybranym kontenerze. W tym momencie zaczynamy się posługiwać się API do Google Earth.
Utworzenie instancji odbywa się poprzez wywołanie metody getInstance z obiektu google.earth. Jako parametry podajemy identyfikator obiektu, w którym ma być umieszczony Google Earth, oraz dwie funkcje callback'owe - pierwsza wywoływana po załadowaniu się obiektu, druga, która powinna się wywoływać w przypadku błędu.
google.earth.createInstance('earth', initFunction, errorFunction);
Wywołanie akcji odnoszące się do obiektu google.earth powinno odbyć się po załadowaniu API - w tym celu używamy metody google.setOnLoadCallback, gdzie jako parametr podajemy wykonywaną funkcję. Wówczas uzyskamy coś następującego:
google.setOnLoadCallback(function() {
   google.earth.createInstance('earth', initFunction, errorFunction);
});
Do funkcji initFunction jest przekazywany parametr z utworzonym obiektem - co otwiera nam drogę do manipulowania bezpośrednio na obiekcie. Dobrą praktyką jest umieszczenie tego obiektu jako zmienna globalna lub właściwość jakiegoś obiektu - tak, aby w przyszłości istniała możliwość dostania się do niego.

Po uruchomieniu konieczne jest włączenie parametru visibility w oknie obiektu poprzez wywołanie komendy getWindow().setVisibility(true) na przekazanym obiekcie
var earth;
function initFunction(obj) {
   earth = obj;
   earth.getWindow().setVisibility(true);
}
Żeby nie pozostawić naszej Ziemi oddalonej o miliony kilometrów od użytkownika po starcie warto przybliżyć ją do wskazanego miejsca - np. do Wrocławia. W tym celu musimy utworzyć nowy widok, nadać ustawienia położenia i ustawić zmieniony widok jako domyślny.
var lookAt = earth.createLookAt('');

lookAt.setLatitude(51.11123);
lookAt.setLongitude(17.05876);
lookAt.setRange(500.0);

earth.getView().setAbstractView(lookAt);
Ostatecznie otrzymujemy taki kod:
<html>
  <head>
    <script src="http://www.google.com/jsapi?key=klucz"></script>
    <script>
      var earth;
      google.load("earth", 1);

      function initFunction(obj) {
        earth = obj;
        earth.getWindow().setVisibility(true);
        var lookAt = earth.createLookAt('');

        lookAt.setLatitude(51.11123);
        lookAt.setLongitude(17.05876);
        lookAt.setRange(500.0);

        earth.getView().setAbstractView(lookAt);
      }

      google.setOnLoadCallback(function() {
        google.earth.createInstance('earth', initFunction, function() {});
      });
    </script>
  </head>
  <body>
    <div id="earth" style="width: 580px; height: 350px;"></div>
  </body>
</html>
A oto ostateczny efekt:

Prześlij dalej:

Brak komentarzy:

Prześlij komentarz