HTML - Google карта
Карта Google позволяет отображать карты на веб странице:
Базовая веб страница
Чтобы продемонстрировать, как добавить карту Google на веб страницу, мы будем использовать базовую страницу HTML:
Пример
<!DOCTYPE html>
<html>
<body>
<h1>Моя первая карта Google</h1>
<div id="map">Моя карта будет здесь</div>
</body>
<html>
Редактор кода »
Задайте размер карты
Задает размер карты:
Создание функции для задания свойств карты
В этом примере определяется карта 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, чтобы узнать больше
