Знакомство с Google Maps JavaScript API V3 на примерах

Сегодня я хочу рассмотреть Google Maps Java Script API Version 3 на конкретных примерах, которые могут быть востребованы в повседневной работе.

Для начала необходимо получить ключ, с помощью которого большой брат будет за вами следить, а точнее - собирать статистику. Если вы превысите определенный лимит (на момент написания статьи это 25 тысяч запросов в день) вам придется начинать платить за дополнительные запросы. Теперь суть ясна, можем перейти к процедуре получения:

1. Вам необходимо иметь/зарегистрировать google аккаунт (почта).

2. Переходим по ссылке https://code.google.com/apis/console

3. С лева выбираем закладку Services

4. Находим переключатель Google Maps API v3 и активируем его

5. Отлично, теперь заходим в пункт API Access

6. И забираем свой ключик

Поздравляю! Теперь вы можете пользоваться google maps.

Начнем с простого, но полезного. Разместим на пустой страничке карту и четыре кнопки. На каждую кнопку привяжем по местоположению городов (Санкт-Петербург, Сидней, Нью-Юрк и Лондон). Кликая по каждой кнопке мы будем перемещать карту, и это позволит визуально сравнить размеры городов. Мне довольно любопытно сравнить родной Санкт-Петербург с этими городами, а вы можете немного изменить код и выставить свой город или добавить еще одну кнопку.

Открываем блокнот, создаем файл Cities.html и вставляем следующий код:

<!DOCTYPE html>

<head>

function ShowPositon(x, y) {

var mapOptions = {

center: new google.maps.LatLng(x, y),

zoom: 9,

mapTypeId: google.maps.MapTypeId.ROADMAP

};

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

mapOptions);

return (false);

}

</script>

</head>

<button onclick="ShowPositon(59.940224, 30.308533)">Saint-Petersburg</button>

<button onclick="ShowPositon(-33.847608, 150.930176)">Sydney</button>

<button onclick="ShowPositon(40.711353, -74.002533)">NewYork</button>

<button onclick="ShowPositon(51.510452, -0.127716)">London</button>

</body>

</html>

Чтобы пример заработал, вам необходимо заменить Your_API_Key на ваш ключик. Вы можете подумать, что опасно размещать в открытую ваш ключ в коде страницы и вы будете на все сто процентов правы, но тут есть одно большое НО:

Если вы зайдете в API Access -> Simple API Access то найдете там пункт в меню “Edit allowed referers...”, с помощью которого можно создать белый список доменных имен, с которых принимаются запросы, в противном случае они отклоняются. По умолчанию список пуст, что разрешает принимать запросы отовсюду.

Итак, все готово к первому запуску, посмотрев результаты можно заметить что Лондон, Сидней и Санкт-Петербург примерно занимают одинаковую площадь, в отличие от Нью-Юрка, который явно лидирует.

Краткий обзор кода:

1. Google Api подключается с помощью ссылки на JavaScript файл и личного ключа. <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=Your_API_Key&sensor=false"></script>

2. Можно изменять настройки карты с помощью объекта mapOptions

3. В названии класса google.maps.LatLng спрятано две аббревиатуры - широта (latitude) и долгота (longitude), собственно их и принимает его конструктор

Теперь поставим собственный, маркер в виде маленького грузовичка и заставим его кататься по прямой от метро «Парк Победы» до «Московская Площадь» я специально выбрал этот маршрут чтоб не сильно думать о логике движения, так как там по прямой.

Создадим новый файл Track.html и скачаем иконку грузовичка Track.png и положим их вместе.

Теперь вставим следующий код:

<!DOCTYPE html>

<html>

<head>

src="http://maps.googleapis.com/maps/api/js?key=AIzaSyBXQROV5YMCERGIIuwxrmaZbBl_Wm4Dy5U&sensor=false">

</script>

var trackMarker;

var lat = 59.8659;

var movingDown = true;

var movingUp = false;

var isMoving = false;

function initialize() {

var mapOptions = {

center: new google.maps.LatLng(59.858889, 30.320849),

zoom: 14,

mapTypeId: google.maps.MapTypeId.ROADMAP

};

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

mapOptions);

var image = 'track.png';

var myLatLng = new google.maps.LatLng(lat, 30.320807);

trackMarker = new google.maps.Marker({

position: myLatLng,

map: map,

icon: image

});

}

function move() {

if (lat > 59.866) {

endDrive(true, false);}

if (lat < 59.851) {

endDrive(false, true);}

if (movingDown) lat = lat - 0.0001;

if (movingUp) lat = lat + 0.0001;

trackMarker.setPosition(new google.maps.LatLng(lat, 30.321136));

}

function loop() {

setTimeout(function () {

if (isMoving) {

move();

loop();

}

}, 50)

}

function endDrive(down, up) {

movingDown = down;

movingUp = up;

isMoving = false;

document.getElementById("drive_btn").disabled = false;

}

function drive() {

isMoving = true;

document.getElementById("drive_btn").disabled = true;

loop();

}

</script>

</head>

<button id="drive_btn" onclick="drive()">Drive</button>

</body>

</html>

Сохраним и запустим. Грузовичок катается как надо :) Краткий обзор кода:

1. Метод initialize запускается как только страничка загружена инициализирует карту и размещает на ней маркер с картинкой.

2. Метод Drive запускает алгоритм движения, который реализован в методах loop, move и endDrive

3. Чтобы передвинуть маркер достаточно изменить его позицию через метод setPosition и передать ему объект класса LatLng с новыми координатами

Я живу во Фрунзенском районе Санкт-Петербурга, здесь очень много деревьев и практически не слышно вездесущего городского шума. Для демонстрации отображения полигонов я нарисую его на карте. И поможет мне в этом следующий код:

<!DOCTYPE html>

<html>

<head>

src="http://maps.googleapis.com/maps/api/js?key=AIzaSyBXQROV5YMCERGIIuwxrmaZbBl_Wm4Dy5U&sensor=false">

</script>

function initialize() {

var mapOptions = {

center: new google.maps.LatLng(59.858889, 30.370849),

zoom: 11,

mapTypeId: google.maps.MapTypeId.ROADMAP

};

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

mapOptions);

var paths = [new google.maps.LatLng(59.913644, 30.334597),

new google.maps.LatLng(59.916139, 30.345411),

new google.maps.LatLng(59.91373, 30.363407),

new google.maps.LatLng(59.833775, 30.47533),

new google.maps.LatLng(59.818935, 30.381947),

new google.maps.LatLng(59.875672, 30.353451),

new google.maps.LatLng(59.883597, 30.346928),

new google.maps.LatLng(59.89152, 30.346098)];

var shape = new google.maps.Polygon({

paths: paths,

strokeColor: '#00FF00',

strokeOpacity: 0.8,

strokeWeight: 2,

fillColor: '#00FF00',

fillOpacity: 0.35

});

shape.setMap(map);

}

</script>

</head>

</body>

</html>

Все очень просто:

1. Инициализируем карту

2. Создаем массив координат

3. Создаем объект класса полигон и выставляем его свойства

4. Связываем полигон с картой.

Есть желание продолжить? Не проблема! Здесь вы найдете большое количество примеров - http://code.google.com/apis/ajax/playground/#map_simple_v3

Александр Кобелев.

Megano Blog

воскресенье, 17 марта 2013 г.