САЙТ ДЛЯ ВЕБ РАЗРАБОТЧИКОВ НА РУССКОМ ЯЗЫКЕ
×

HTML5 Учебник

HTML ГлавнаяHTML ВведениеHTML РедакторыHTML ОсновныеHTML ЭлементыHTML АтрибутыHTML ЗаголовкиHTML ПараграфыHTML СтилиHTML ФорматированиеHTML ЦитированиеHTML КомментарииHTML ЦветаHTML c CSSHTML СсылкиHTML ИзображенияHTML ТаблицыHTML СпискиHTML БлокиHTML КлассыHTML ИдентификаторыHTML ФреймыHTML JavaScriptHTML Путь к ФайлуHTML ГлаваHTML МакетHTML АдаптивныйHTML Компьютерный кодHTML ОбъектыHTML СимволыHTML КодировкаHTML URL КодированиеHTML XHTML

HTML Формы

HTML ФормыHTML Элементы формыHTML Тип вводаHTML Атрибуты ввода

HTML5

HTML5 ВведениеHTML5 ПоддержкаHTML5 Новые ЭлементыHTML5 СемантикаHTML5 МиграцияHTML5 Синтасис

HTML Графика

HTML CanvasHTML SVGHTML Google Карта

HTML Медиа

HTML МедиаHTML ВидеоHTML АудиоHTML ОбъектыHTML YouTube

HTML API

HTML ГеолокацияHTML ПеретаскиваниеHTML Веб ХранилищеHTML Веб РаботникHTML СОС

HTML Примеры

HTML ПримерыHTML ВикторинаHTML УпражненияHTML СертификатHTML ЗаключениеHTML Возможности

HTML Справочники

HTML Список ТеговHTML АтрибутыHTML ГлобальныеHTML СобытияHTML ЦветаHTML ХолстHTML Аудио/ВидеоHTML ДекларацииHTML Набор КодировокHTML URL КодHTML Коды языкаHTML Коды странHTTP СообщенияHTTP МетодыКовертер PX в EMКлавишные комбинации

HTML Google Карта



Карта Google позволяет отображать карты на веб странице:


Базовая веб страница

Чтобы продемонстрировать, как добавить карту Google на веб страницу, мы будем использовать базовую страницу HTML:

Пример

<!DOCTYPE html>
<html>
<body>

<h1>Моя первая карта Google</h1>

<div id="map">Моя карта будет здесь</div>

</body>
<html>
Редактор кода »

Задайте размер карты

Задает размер карты:

Пример

<div id="map" style="width:400px;height:400px">
Редактор кода »

Создание функции для задания свойств карты

В этом примере определяется карта Google с центром в Перми, Россия:

Пример

function myMap() {
   var mapOptions = {
        center: new google.maps.LatLng(58.01741,56.28552),
        zoom: 10,
        mapTypeId: google.maps.MapTypeId.HYBRID
    }
var map = new google.maps.Map(document.getElementById("map"), mapOptions);
}
Редактор кода »

Объяснение примера

Переменная mapOptions определяет свойства карты.

Свойство center указывает, где центрировать карту (используя координаты широты и долготы).

Свойство zoom определяет уровень масштабирования карты (попробуйте поэкспериментировать с уровнем масштабирования).

Свойство mapTypeId указывает тип отображаемой карты. Поддерживаются следующие типы карт: ROADMAP, SATELLITE, HYBRID и TERRAIN.

Строка: var map=new google.maps.Map(document.getElementById("map"), mapOptions); создает новую карту внутри элемент <div>с id="map", использование передаваемых параметров (mapOptions).


Добавление API в карту Google

Наконец, смотрите карту на странице!

Функциональность карты обеспечивается библиотекой JavaScript, расположенной в Google. Добавьте скрипт для обращения к API карты Google с обратным вызовом функция myMap :

Пример

<script src="https://maps.googleapis.com/maps/api/js?callback=myMap"></script>
Редактор кода »

Перейти к нашему.Учебнику карта Google, чтобы узнать больше