Вставить google earth на сайт
KML (Keyhole Markup Language — язык разметки Keyhole) — это формат файлов, который используется отображения географических данных в программах Google Планета Земля, Карты Google и Карты Google для мобильных устройств.
KML использует основанную на тегах структуру с вложенными элементами и атрибутами и создан на основе стандарта XML.
Для создания файлов KML можно использовать программу Google Планета Земля (Google Earth), редактор XML или обычный текстовый редактор.
Файлы KML и связанные с ними изображения (при наличии) можно сжимать с помощью формата ZIP в архивы KMZ.
С помощью файлов KML можно:
- устанавливать различные значки и делать подписи для обозначения мест на поверхности Земли,
- создавать различные ракурсы для выбранных объектов, изменяя положение камеры,
- использовать различные накладываемые изображения,
- определять стили для настройки отображения объекта, применять код HTML для создания гиперссылок и встроенных изображений,
- использовать папки для иерархической группировки элементов,
- динамически получать и обновлять файлы KML из удаленных или локальных узлов сети,
- получать данные KML в соответствии с изменениями в средстве трехмерного просмотра,
- отображать текстурные трехмерные объекты COLLADA
В качестве объектов в файлах формата KML могут быть использованы:
Метки (объект Placemark) – самый простой элемент, задает метку – обозначение положения на поверхности Земли с помощью значка в виде желтой кнопки.
Пути – линии определенной толщины и цвета
Многоугольники — определяется цвет линий и цвет подписи.
Изображения — накладываемые изображения поверхности Земли позволяют накладывать изображение на ландшафт Земли, могут быть перемещаемыми и масштабируемыми, так и не перемещаемыми, например, логотип.
Трёхмерная модель — позволяет подключать описание трёхмерных объектов (например, зданий и сооружений). Трёхмерную модель можно задать двумя способами: заданием высоты плоских фигур (вытягиванием) и ссылкой на полноценную модель в формате COLLADA (Google SketchUp).
Простейший пример файла KML.
Опишу структуру этого файла.
Первая строка — заголовок XML. Это 1-я строка в каждом файле KML. Перед этой строкой не должно быть пробелов или символов.
Вторая строка – служит для объявления пространства имен KML. Это 2-я строка в каждом файле KML 2.1.
Объект Placemark, содержащий следующие элементы:
— name, ярлык, используемый для обозначения метки
— description, описание, появляющееся в окне комментария, прикрепленном к метке
— Point, указывает положение метки на поверхности Земли (долгота, широта и дополнительно высота).
Этот файл Вы можете загрузить в программе Google Планета Земля (Google Earth) выбрав в меню Файл – Открыть.
Его также можно загрузить использую API карт Google.
var map = new GMap2(document.getElementById(«map_canvas»));
map.setCenter(new GLatLng(56.291908,43.979459), 15);
map.addOverlay(geoXml);
Если загрузить его в браузере мы увидим
Вы также можете просмотреть файл KML на Картах Google.
Предварительно необходимо чтобы Ваш файл KML должен быть размещен на веб-сайте в Интернете.
Ваш KML-файл отобразиться на карте Google.
Используем Google Earth API и Google Maps v3 : 6 комментариев
А если нужен маркер в чистом поле?
Првет админ пожалуйста подскажи где этот апи взять я уже 4 часа пытаюсь въехать куда ни пропали, в ГУГЛЕ ппц хер проссышь везде редирект на девелопер страници.
Плиз можно ссылку если не трудно.
Честно сказать гугл меня разочаровал , сплошные битые страницы редиректы и прочая нечисть. Гори оно огнем!
Google Earth — программа-«виртуальный глобус» компании Google, с помощью которой можно просматривать трехмерную модель Земли, аэро- и космоснимки высокого разрешения и различные слои данных.
Русская версия Google Earth имеет название Google Планета Земля.
Программа изначально была выпущена компанией Keyhole Inc. и называлась Earth Viewer, а в 2004 году была продана компании Google.
Для визуализации изображения используется трёхмерная модель всего земного шара (с учётом высоты над уровнем моря), которая отображается на экране при помощи интерфейсов DirectX или OpenGL. Пользователь может легко перемещаться в любую точку планеты, управляя положением «виртуальной камеры».
Существуют различные версии программы:
Google Планета Земля — бесплатная версия
Google Планета Земля Про (цена = 400$ в год) — возможность сохранения снимков в графический файл с более высоким разрешением.
Лицензия для коммерческого использования.
Google Планета Земля — решения для предприятий
Бесплатная и расширенные версии используют одну базу геоданных (снимки и дополнительные слои).
Основные возможности бесплатной версии Google Earth.
— Измерение расстояния пути
— Распечатка и сохранение снимков
— Открытие в браузере Google Maps
— Функции поиска мест и маршрутов, быстрый переход по координатам
— Обзор мест (меток) — автоматический перелёт
— Имеется большое количество дополнительных данных, которые можно подключить по желанию пользователя. Например, названия населённых пунктов, водоёмов, аэропортов, дороги, ж/д, и др. информация. Кроме этого, для крупных городов имеется более подробная информация — названия улиц, магазины, заправки, гостиницы, и т. д.
— Пользователи могут создавать свои метки, рисовать пути и многоугольники, накладывать свои изображения поверх спутниковых (это могут быть карты, или более детальные снимки, полученные из других источников, а также 3D модели!). Эти метки можно сохранять в файлы KML и обмениваться с другими пользователями программы
— Переход по фотографиям — некоторые фотографии с высоким разрешением поддерживают возможность перемещения по ним
— Настройки средства 3D просмотра
— Использование горячих клавиш
— В программу встроен авиасимулятор (для его запуска нажмите Ctrl + Alt + A).
— В версии 4.2 появился режим Google Sky, позволяющий рассматривать звёздное небо.
— При наведении мыши на местность Google Планета Земля показывает приблизительную дату съёмки изображений внизу окна трехмерного просмотра
— Отображение Солнца и солнечных лучей
— Установка начального местоположения — можно установить отправную точку (по умолчанию), которая будет появляться при каждом запуске программы Google Планета Земля.
— Использование просмотра улиц Google Street View — просмотр 360VR панорамных снимков
В феврале 2009 года компания Google выпустила 5-ую версию программы Google Earth, в которой появились следующие возможности:
— Режим «Исторические снимки» — появилась возможность переключать версии снимков, т.е. перемещаться во времени.
— Добавлена 3D модель планеты Марс. Спутниковые снимки отдельных районов Марса выполнены в высоком разрешении.
— Появилась возможность перемещаться под водой. Поверхность дна мирового океана представляет собой 3D текстурированную модель.
— Инструмент записи туров. C помощью этого инструмента можно записать свои перемещения в Google Earth, сопроводить их голосовыми комментариями и сохранить их в KML формате.
В Google Earth имеется возможность с помощью слоя «рельеф» включить отображение 3D модели поверхности Земли.
Также есть слой, который включает загрузку 3D моделей зданий (серых примитивов и фотореалистичных).
Модели зданий создают специалисты компании Google и пользователи с помощью специального 3D редактора Google SketchUp.
В мае 2008г. компнией Google был представлен API для просмотра Google Earth в окне браузера.
Google Earth API работает не во всех браузерах. Для примера, в Опере он работать отказывается. Браузер должен поддерживать работу ActiveX.
Для работы в режиме Google Earth необходимо установить специальный плагин.
С начала необходимо скачать инстолятор GoogleEarthPluginSetup_en.exe (299Кб), при запуске которого выкачивается сам плагин googleearth-plugin-win.exe (его размер > 6,5Мб).
С подключаемым модулем Google Планета Земля возникла проблема. Попробуйте перезагрузить страницу.
Перезагружаем. После перезагрузки Google Earth в браузере заработал!
Скорость работы и управление Web-приложения такие же как и у полноценной программы Google Earth.
Некоторые полезные ссылки по API просмотра Google Earth:
Если у Вас уже есть ключ для API Google Maps, то для использования режима просмотра Google Earth Вам нужно добавить в свой код одну строчку
Тогда при открытии страницы с картой в браузере Вы увидите следующее
Появилась новая кнопка типа карт – Земля, нажав на которую Вы увидите карту в режиме Google Earth (предварительно необходимо установить плагин).
Посмотреть работающий пример и исходный код можно здесь.
Обзор программы Google Earth (Планета Земля) : 4 комментария
Чего-то не получилось вписать map.addMapType(G_SATELLITE_3D_MAP); в карту, генерируемую Фусион Таблицей… Это наверное невозможно?
Можно использовать в программе Google Earth, если в интерфейсе Fusion Tables создать ссылку на KML-файл. Здесь подробно описывается
К сожелению не увидел город своего детства.
Это г.Узловая Тульской обл..На карте одни размытости даже при сильном увелечении.А в других местах так хорошо видно.
Разочарован.
Step 2: Add a map with a marker
This section shows you how to load the Maps JavaScript API into your web page, and how to write your own JavaScript that uses the API to add a map with a marker on it.
TypeScript
Tips and troubleshooting
- You can tweak options like style and properties to customize the map. For more information on customizing maps, read the guides to styling, and drawing on the map.
- Use the Developer Tools Console in your web browser to test and run your code, read error reports and solve problems with your code.
- Use the following keyboard shortcuts to open the console in Chrome:
Command+Option+J (on Mac), or Control+Shift+J (on Windows).
Follow the steps below to get the latitude and longitude coordinates for a location on Google Maps.
- Open Google Maps in a browser.
- Right-click the exact location on the map for which you require coordinates.
- Select What's here from the context menu that appears. The map displays a card at the bottom of the screen. Find the latitude and longitude coordinates in the last row of the card.
You can convert an address into latitude and longitude coordinates using the Geocoding service. The developer guides provide detailed information on getting started with the Geocoding service.
Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 4.0 License, and code samples are licensed under the Apache 2.0 License. For details, see the Google Developers Site Policies. Java is a registered trademark of Oracle and/or its affiliates.
В версии API Google Maps v3 не предусмотрена возможность использования типа карты Google Earth.
Но можно легко решить данную проблему используя специальную JavaScript-библиотеку, загрузить которую можно по следующим адресам: не сжата версия и сжатая.
Приведу простейший пример ее использования.
В начале, после подключения API Google Maps v3 , мы подключаем Google API, предварительно получив ключ для его использования здесь.
После подключаем файл с библиотекой
Загружаем нужное API — google.load(‘earth’, ‘1’);
Определяем параметры карты и дополнительный тип карты googleEarth.
Загружаем пример в браузере, наблюдаем с начала карту Google, переключаемся на тип Earth и видим следующее:
На тип карты Google Earth можно накладывать различные оверлеи (метки, балуны, полилинии, полигоны, прямоугольники, окружности, изображения и KML-файлы).
Вот официальный пример от разработчиков библиотеки.
Я привожу еще пару своих примеров.
И еще немного информации о размещении Google Earth на веб-сайтах.
Вы можете это сделать с использованием специального гаджета.
Преимущества этого способа:
Вам не требуются навыки программирования;
На данной странице Вы можете выбрать необходимые параметры для отображения Google Earth на сайте (размер окна, заголовок, вид рамки, элементы управления, вид отображения, добавить KML-файл).
После необходимых настроек просмотреть, как будет выглядеть окончательный вариант и получить код для встраивания на сайт.
Try Sample
Understanding the code
In the code below, the script loads the API from the specified URL.
In the above code, the callback parameter executes the initMap function after the API loads. The async attribute allows the browser to continue to parse the remainder of your page while the API loads. Once it has loaded, the browser will pause and immediately execute the script. The key parameter contains your API key.
See Step 3: Get an API key for instructions on getting your own API key later.
The code below contains the initMap function that initializes and adds the map when the web page loads. Use a script tag to include your own JavaScript which contains the initMap function.
Add the document.getElementById() function to find the map div on the web page.
The code below constructs a new Google maps object, and adds properties to the map including the center and zoom level. See the documentation for other property options.
JavaScript
Learn more about markers:
JavaScript
In the above code, new google.maps.Map() creates a new Google maps object. The center property tells the API where to center the map.
The zoom property specifies the zoom level for the map. Zoom: 0 is the lowest zoom, and displays the entire earth. Set the zoom value higher to zoom in to the earth at higher resolutions.
The code below puts a marker on the map. The position property sets the position of the marker.
Step 1: Create an HTML page
Here's the code for a basic HTML web page:
Note that this is a very basic page with a heading level three ( h3 ) and a single div element. You can add any content you like to the web page.
Understanding the code
The code below creates an HTML page consisting of a head and a body.
You can add a heading level three above the map using the code below.
The code below defines an area of the page for your Google map.
At this stage of the tutorial, the div appears as just a grey block, because you have not yet added a map. The code below describes the CSS that sets the size and color of the div .
In the above code, the style element sets the div size for your map. Set the div width and height to greater than 0px for the map to be visible. In this case, the div is set to a height of 400 pixels, and width of 100% to display the across the width of your web page.
TypeScript
JavaScript
Формат файлов KML и его использование на картах Google. Введение. : 6 комментариев
Огромное спасибо! Понятно и подробно, сразу понятно все.
а есть еще примеры по использованию kml?
Есть ли возможность использовать полученные kml файлы для интеграции c Nokia ovi maps?
Спасибо за статью! А вы не в курсе, почему обьявление в google places может не отображатся в выдаче? Вроде все сделано как надо…
В первый раз столкнувшись с внедрением и кастомизацией Google Maps, я не нашел единой статьи, рассматривающей все необходимые моменты — информацию пришлось искать по крупицам, а что-то выдумывать самому. После чего и было решено написать эту статью, чтобы люди, ранее не работавшие со стилизацией Google Maps, но при этом ограниченные временными рамками (а может, и желанием) для полноценного изучения API, смогли быстро получить необходимую информацию и материалы. Тем более, что и те, кто обладает определенным опытом, смогут почерпнуть для себя из этой статьи какую-нибудь интересную фишку, к примеру — параллакс для элементов информационного окна.
В этой статье мы рассмотрим:
1. Внедрение Google Maps на сайт
- Добавление через вставку iframe в разметку
- Добавление через API
- Инициализация маркера
- Анимация маркера
- Изображение маркера
- Добавление информационного окна
- Открытие информационного окна
- Кастомизация элементов информационного окна
- Параллакс-эффект для элементов в информационном окне
- Изменение цвета объектов карты
- Кастомизация элементов управления
- Маска для карты
Добавление через вставку iframe в разметку
Если у вас нет необходимости изменять маркер, делать кастомное информационное окно или еще каким-либо образом воздействовать на карту, для ее добавления достаточно сделать следующее:
- Открыть Google Maps.
- Найти интересующий объект (например, введя адрес в поиске, либо нажав на нужное название правой кнопкой мыши и выбрав пункт в контекстном меню «Что здесь?»)
после чего кликнуть на гамбургер:
Затем находим кнопку «Ссылка/код»:
Копируем код для вставки:
Но если необходимо произвести какие-либо манипуляции, нам понадобится ключ. Если его нет рядом, можно получить тут: ссыль
Встраиваем его в адрес вместо YOUR_API_KEY :
Если нужно вызывать коллбэк после загрузки api, после ключа надо будет дописать YOUR_API_KEY&callback=initMap с названием вашей функции. Подключаем скрипт на странице и создаем в разметке блок для будущей карты:
Теперь необходимо инициализировать карту:
Координаты можно узнать при помощи опции «Что здесь», описанной выше.
Свойства, которые могут сразу понадобиться:
- zoom: number — определяет первоначальный масштаб.
- disableDefaultUI: boolean – убирает элементы управления.
- scrollwheel: boolean — отключает масштабирование колесиком мыши (бывает полезно, если карта на всю ширину страницы и перебивает прокрутку вниз).
Для начала добавим маркер:
position (обязательно) указывает начальное положение маркера. Если указать те же координаты, что и для карты, то маркер будет по центру экрана. Сместить маркер можно изменив значение координат, либо сменив положение самой карты относительно видимой области (родительского блока).
map (не обязательно) указывает карту, на которой помещается маркер.
Для маркера можно задать анимацию:
- DROP – после загрузки карты маркер падает сверху.
- BOUNCE – маркер подпрыгивает на месте.
Анимацию можно задать при инициализации маркера, добавить или убрать, вызвав метод setAnimation() .
Пример анимации маркера при закрытии информационного окна и прекращении при открытии:
Изображение маркера можно изменить, задав адрес картинки для свойства icon .
3. Кастомизация информационного окна
Добавление информационного окна
В кастомное информационное окно можно добавить любую разметку через свойство content :
Открытие информационного окна
Чтобы информационное окно было видно сразу, надо вызвать метод open() :
Также следует добавить вызов окна при клике на маркер (в противном случае мы не сможем открыть попап):
Кастомизация элементов информационного окна
Информационное окно может быть как кастомное, так и стандартное. В кастомное мы можем добавить любые элементы и работать с ними, возможности ограничены лишь фантазией.
Основная проблема, с которой можно столкнуться при кастомизации любого из типов – края (белая область) вокруг контента и стрелочка. Эти элементы не поддаются css выборке.
Решить проблему можно при помощи псевдоэлементов для доступных блоков. Также, если по какой-либо причине нет возможности использовать лишний псевдоэлемет, рамочку можно убрать при помощи тени.
Но обо всем по порядку:
.gm-style-iw — основной блок, в нем находится контент. На скриншоте, расположенном выше, этот блок имеет черный фон.
.poi-info-window — обертка для текста в стандартном информационном окне, находится внутри. .gm-style-iw
.gm-style-iw + div – крестик.
Как теперь повлиять на область вне блока контента? Выйти за его пределы. В первую очередь надо добавить свойство, которое сделает видимыми блоки, выходящие за границы:
Теперь для .gm-style-iw , или блоков внутри можно создать псевдоэлементы для перекрытия фона и стрелочки:
Параллакс-эффект для элементов в информационном окне
Тут возникает небольшая проблема, связанная с тем, что объекты карты создаются динамически, и нельзя просто так взять и прикрепить к ним обработчик, а клонировать блок при помощи .clone(true) в контент информационного окна с переносом обработчиков нам не позволит API.
Как вариант, можно проверять наличие элемента и сохранять после появления:
Теперь просто добавим код, смещающий блок по горизонтали в зависимости от положения курсора:
Если клик по динамическому элементу нужно обработать, просто ставим обработчик на обертку и ловим объект на всплытии:
4. Кастомизация карты
Изменение цвета объектов карты
Для стилизации карты используется массив стилей, в котором указывается селектор и css-свойство, которое необходимо применить.
Пример настроек, окрашивающих воду в фиолетовый цвет:
Для настройки стилей проще всего использовать специализированный сервис, к примеру Google Maps APIs Styling Wizard. Для детальной настройки карты жмем «More options»:
Копируем полученный json:
Если массив стилей очень большой, его можно поместить в отдельный .json файл и применить стили после его загрузки:
В конечном итоге получаем вот такие настройки карты:
Кастомизация элементов управления
Кнопки «Карта» и «Спутник» находятся в блоке с классом .gm-style-mtc
Кнопки увеличения и уменьшения изображения в блоке с классом .gmnoprint
Кнопка режима просмотра улиц имеет класс .gm-svpc
Используя эти классы, можно сделать с элементами управления все, что душе угодно. В данном случае я скрыл элементы управления, но для примера изменил цвет:
Ну, и на закуску — очень простая вещь, но может для кого-нибудь окажется в новинку. По сути — просто блок на весь размер карты, либо являющийся картинкой, либо с фоновым изображением. Также есть свойство mask-image , но оно поддерживается не всеми браузерами.
Единственное, на что тут следует обратить внимание — css свойство pointer-events , которое на маске должно быть в значении none . Это позволит не учитывать этот блок в событиях мыши (проще говоря, кликать и скроллить сквозь этот блок).
На этом быстрый старт Google Maps окончен. Надеюсь, эта статья оказалась для вас полезной.
There are three steps to creating a Google map with a marker on your web page:
You need a web browser. Choose a well-known one like Google Chrome (recommended), Firefox, Safari or Edge, based on your platform from the list of supported browsers.
Step 3: Get an API key
This section explains how to authenticate your app to the Maps JavaScript API using your own API key.
Follow these steps to get an API key:
Create or select a project.
Click Continue to enable the API and any related services.
On the Credentials page, get an API key (and set the API key restrictions). Note: If you have an existing unrestricted API key, or a key with browser restrictions, you may use that key.
To prevent quota theft and secure your API key, see Using API Keys.
Enable billing. See Usage and Billing for more information.
Copy the entire code of this tutorial from this page, to your text editor.
Replace the value of the key parameter in the URL with your own API key (that's the API key that you've just obtained).
Save this file with a name that ends with .html , like index.html .
Load the HTML file in a web browser by dragging it from your desktop onto your browser. Alternatively, double-clicking the file works on most operating systems.
TypeScript
Читайте также: