HTML Google Карты
Карты Google позволяют отображать карты на веб-странице:
Базовая веб-страница
Чтобы продемонстрировать, как добавить карту Google на веб-страницу, мы будем использовать базовую HTML-страницу:
Example
<!DOCTYPE html>
<html>
<body>
<h1>My First Google Map</h1>
<div id="map">My map will go here</div>
</body>
<html>
Задание размера карты
Задайте размер карты:
Пример
<div id="map" style="width:400px;height:400px">
Создание функции для задания свойств карты
В этом примере определяется карта Google, сосредоточенная в Лондоне, Англия:
Пример
function myMap() {
var mapOptions = {
center: new google.maps.LatLng(51.5, -0.12),
zoom:
10,
mapTypeId: google.maps.MapTypeId.HYBRID
}
var map = new google.maps.Map(document.getElementById("map"), mapOptions);
}
Пример объяснено
Переменная mapOptions определяет свойства сопоставления.
Свойство Center указывает, где следует центрировать карту (с помощью координат широты и долготы).
Свойство Zoom определяет уровень масштабирования карты (попробуйте поэкспериментировать с уровнем масштабирования).
Свойство maptypeid указывает тип карты для отображения. Поддерживаются следующие типы карт: «Дорожная карта», «спутник», «гибрид» и «рельеф».
Линия: var map=new google.maps.Map(document.getElementById("map"), mapOptions); создает новую карту внутри элемента <div> с идентификатором = "Map", используя передаваемые параметры (mapOptions).
Добавление API Карт Google
Наконец, Показать карту на странице!
Функциональность карты обеспечивается библиотекой JavaScript, расположенной в Google. Добавьте скрипт для ссылки на API Карт Google с обратным вызовом функции myMap:
Пример
<script src="https://maps.googleapis.com/maps/api/js?callback=myMap"></script>
Чтобы узнать больше о картах Google, перейдите в руководство по картам Google .
Регистрация API ключи кюча на сайте GoogleMAPS .
Нужно выбрать Maps JavaScript API (ПОЛУЧИТЬ КЛЮЧ - в правом верхнем углу)