Урок - Создание карты с помощью Google Maps API 3.

Главная » Курсы » Курс Google Maps 3, примеры использования. » Урок - Создание карты с помощью Google Maps API 3.

Обучающий онлайн курс
Google Maps 3, примеры использования.

Лицензия: Копирование запрещено.

Инициализируется Google Maps API с помощью подключения скрипта:

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>

С помощью GET-параметра sensor мы указываем, поддерживает ли приложение загружающее скрипт датчики (например GPS). Для стаціонарного компьютера sensor=false, для планшетов, мобильных телефонов sensor=true.

 

Посмотрите на пример создания карты:

var centerLatLng = new google.maps.LatLng(50.435132,30.55777);
var mapOptions = {
    zoom: 10,
    center: centerLatLng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("map"), mapOptions);

В переменной centerLatLng указываем широту и долготу центра карты. Значение centerLatLng передаем при создании карты в переменной mapOptions.center.

Используя переменную mapOptions передаем параметры карты при создании.

zoom - параметр указывает степень увеличения карты;

center - параметр указывает координаты центра карты;

mapTypeId - тип карты. В Google Maps API используются следующие типы карт:

  • google.maps.MapTypeId.ROADMAP – обычная карта
  • google.maps.MapTypeId.SATELLITE – спутниковая карта
  • google.maps.MapTypeId.HYBRID – гибридная карта (спутниковая карта с надписями)
  • google.maps.MapTypeId.TERRAIN – карта ландшавта с улицами

Командой new google.maps.Map() создается карта. Первый аргумент - HTML-элемент (контейнер) для отображения карты. Второй аргумент - параметры карты.

Целиком пример будет выглядеть следующим образом:

<!DOCTYPE html>

<html>

<head>

    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>

    <script type="text/javascript">

        function pageOnLoad() {

            var centerLatLng = new google.maps.LatLng(50.435132,30.55777);

            var mapOptions = {

                zoom: 10,

                center: centerLatLng,

                mapTypeId: google.maps.MapTypeId.ROADMAP

            }

            var map = new google.maps.Map(document.getElementById("map"), mapOptions);

}

</script> </head>

<body onload="pageOnLoad()">

<div id="map" style="width:400px;height:400px"></div>

</body>

</html>

Откройте файл в браузере и посмотрите результат.

Обратите внимание на элементы управления картой установленные по умолчанию:

  • элемент панорамирования
  • элемент масштабирования
  • переключение типа карты

О там как менять элементы по умолчанию в следующих материалах.