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

HTML Учебник

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

HTML Формы

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

HTML Графика

HTML5 CanvasHTML5 SVG

HTML Медиа

HTML Медиа форматHTML5 ВидеоHTML5 АудиоHTML ПлагиныHTML YouTube

HTML API

HTML5 ГеолокацияHTML5 ПеретаскиваниеHTML5 Веб хранилищеHTML5 Веб работникHTML5 SSE

HTML Примеры

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

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

HTML Список теговHTML АтрибутыHTML Глобальные атрибутыHTML Поддержка браузераHTML СобытияHTML ЦветаHTML ХолстHTML Аудио/ВидеоHTML Типы документовHTML Кодировка символовHTML URL Кодировка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, чтобы узнать больше