Используем Google Earth API и Google Maps v3

Автор: | 08.06.2011

На своем блоге я писал уже о программе Google Earth (Планета Земля) и API для просмотра Google Earth в окне браузера.

В версии API Google Maps v3 не предусмотрена возможность использования типа карты Google Earth.

Но можно легко решить данную проблему используя специальную JavaScript-библиотеку, загрузить которую можно по следующим адресам: не сжата версия и сжатая.

Приведу простейший пример ее использования.

<!DOCTYPE html> 
<html> 
  <head> 
    <meta http-equiv="content-type" content="text/html; charset=utf-8" /> 
    <title>Google Earth V3 - пример использования</title> 
    <style type="text/css"> 
      body {
        font-size: 83%;
      }
 
      #map {
	    width: 800px;
        height: 600px;
      }
 
    </style> 
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> 
    <script type="text/javascript"
      src="https://www.google.com/jsapi?key=ABQIAAAA_KNcKfoyaTskjEp-kSSEjxSsDbTxMRg-JrUcPZT14QWonZA5mxRqx3ct_DbeHVelXNr1WbKEEJ5k-A"></script> 
    <script type="text/javascript" src="googleearth-compiled.js"></script> 
 
    <script type="text/javascript"> 
      google.load('earth', '1');
      var map;
      var googleEarth;
      function init() {
        map = new google.maps.Map(document.getElementById('map'), {
          zoom: 14,
          center: new google.maps.LatLng(56.316667, 44),
          mapTypeId: google.maps.MapTypeId.ROADMAP
        }); 
        googleEarth = new GoogleEarth(map);       
      } 
      google.maps.event.addDomListener(window, 'load', init);
    </script> 
  </head> 
  <body> 
    <h1>Google Earth V3 - пример использования</h1> 
    <div id="map"></div> 
  </body> 
</html>

В начале, после подключения API Google Maps v3 , мы подключаем Google API, предварительно получив ключ для его использования здесь.

<script type="text/javascript" src="https://www.google.com/jsapi?key=INSERT-YOUR-KEY"></script>

После подключаем файл с библиотекой

Загружаем нужное API — google.load(‘earth’, ‘1’);

Определяем параметры карты и дополнительный тип карты googleEarth.

Загружаем пример в браузере, наблюдаем с начала карту Google, переключаемся на тип Earth и видим следующее:

Посмотреть пример в действии.

Замечание. Для работы в режиме Google Earth необходимо установить специальный плагин.
С начала необходимо скачать инстолятор GoogleEarthPluginSetup_en.exe(299Кб), при запуске которого выкачивается сам плагин googleearth-plugin-win.exe (его размер > 6,5Мб). Затем предлагается произвести перезагрузку браузера. После перезагрузке нужно разрешить браузеру установку ActiveX. Видим сообщение: С подключаемым модулем Google Планета Земля возникла проблема. Попробуйте перезагрузить страницу. Перезагружаем. После перезагрузки Google Earth в браузере заработал!

На тип карты Google Earth можно накладывать различные оверлеи (метки, балуны, полилинии, полигоны, прямоугольники, окружности, изображения и KML-файлы).

Вот официальный пример от разработчиков библиотеки.

Я привожу еще пару своих примеров.

Примеры:

Пример добавления kml-файла

Пример накладываемого изображения

И еще немного информации о размещении Google Earth на веб-сайтах.

Вы можете это сделать с использованием специального гаджета.

Преимущества этого способа:

Вам не требуются навыки программирования;

Вам необходимо Google Планета Земля установлена ​​на вашем компьютере. Скачать последнюю версию здесь.

На данной странице Вы можете выбрать необходимые параметры для отображения Google Earth на сайте (размер окна, заголовок, вид рамки, элементы управления, вид отображения, добавить KML-файл).

После необходимых настроек просмотреть, как будет выглядеть окончательный вариант и получить код для встраивания на сайт.

Пример кода

<script src="http://www.gmodules.com/ig/ifr?url=http://code.google.com/apis/kml/embed/embedkmlgadget.xml&amp;up_kml_url=http%3A%2F%2Fwebmap-blog.ru%2Fexamples%2Fkml%2Fprimer_kml_2.kml&amp;up_view_mode=earth&amp;up_earth_2d_fallback=0&amp;up_earth_fly_from_space=1&amp;up_earth_show_nav_controls=1&amp;up_earth_show_buildings=1&amp;up_earth_show_terrain=1&amp;up_earth_show_roads=1&amp;up_earth_show_borders=1&amp;up_earth_sphere=earth&amp;up_maps_zoom_out=0&amp;up_maps_default_type=map&amp;synd=open&amp;w=800&amp;h=600&amp;title=%D0%9A%D0%B8%D0%BD%D0%BE%D1%82%D0%B5%D0%B0%D1%82%D1%80%D1%8B+%D0%9D%D0%B8%D0%B6%D0%BD%D0%B8%D0%B9+%D0%9D%D0%BE%D0%B2%D0%B3%D0%BE%D1%80%D0%BE%D0%B4%D0%B0+%D0%BD%D0%B0+Google+Earth&amp;border=%23ffffff%7C3px%2C1px+solid+%23999999&amp;output=js"></script>

Пример работы

Используем Google Earth API и Google Maps v3: 6 комментариев

  1. 32

    Подскажите а можно ли сделать ссылку на гугл мапс, так, чтобы в указанном месте появился маркер? Например в openStreetMaps в http запрос добавляются координаты маркера (mlat=54.009279&mlon=52.223547). Есть ли подобное в гугл мапс?

    1. admin Автор записи

      Можно, нужно на карте найти адрес, а затем нажать на Ссылка в правом верхнем углу карты. В открывшемся окошечке в разделе Ссылка для сообщений эл. почты или чата будет ссылка на карту для вставки на сайт. Пример ссылки

  2. Танечка

    http://mbeseda.com/m/zla — пример использования google map. Выполняется отображение магазинов на карте. Навигация по группам магазинов используя почтовый индекс, страну или теги.

  3. Денис

    Првет админ пожалуйста подскажи где этот апи взять я уже 4 часа пытаюсь въехать куда ни пропали, в ГУГЛЕ ппц хер проссышь везде редирект на девелопер страници.

    Плиз можно ссылку если не трудно.

    Спасибо.

  4. Денис

    Может кому пригодится https://code.google.com/apis/console/ тут можно получить ключ надо имет ГУГЛ акк, регишся в панели подключаешь что будешь использовать в работе, создаешь проект получаешь ключ.

    Честно сказать гугл меня разочаровал , сплошные битые страницы редиректы и прочая нечисть. Гори оно огнем!

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *