Google Maps API верисия 3

В конце мая 2009 года компания Google объявила о новой версии Google Maps API v3.

Пока это не окончательный релиз, данная версия находится в лаборатории Google, где идет ее улучшение и доработка, учитывая пожелания пользователей.

Я хочу познакомить посетителей моего блога с данной версией API.

Необходимость в новой версии возникла, когда разработчики задумались об использовании JavaScript Maps API для работы на мобильных устройствах, после появления браузеров с поддержкой JS для iPhone и устройст на базе Android.

Но скорость работы на мобильных устройствах существующий API v2 оказалось слишком медленной, тогда возникла необходимость полностью пересмотреть существующий код API.

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

— не требуется ключ привязки API к конкретному домену;

— добавлена поддержка iPhone Safari и Chrome браузеров для мобильных устройств;

— использование MCV-архетиктуры;

— интерфейс пользователя по умолчанию;

— переработан сервис геокодирования.

И так рассмотрим простой пример карты, использующей новую версию API.

Код примера:

<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
  function initialize() {
    var latlng = new google.maps.LatLng(56.2980387, 43.9123535);
    var myOptions = {
      zoom: 12,
      center: latlng,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
  }
 
</script>
</head>
<body onload="initialize()">
  <div id="map_canvas" style="width:600px; height:400px;"></div>
</body>
</html>

Рассмотрим структуру кода подробнее.

Строка <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
cлужит для подключения JS API, параметр sensor указывает, использует ли ваше приложение различные датчики (например GPS), тогда параметр sensor=true.

Для использования конкретной версии локализации карты необходимо после параметра sensor добавить еще один параметр language

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

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

В отличие от предыдущих версий все глобальные переменные  в место буквы G используют пространство имен начинающееся на google.maps.

И теперь LatLng() принимает два аргумента значений координат.

В старой версии: var latlng = new GLatLng(56.2980387, 43.9123535); 

В новой: var latlng = new google.maps.LatLng(56.2980387, 43.9123535);

После этого создается объект с набором аргументов свойств карты.

var myOptions = {
      zoom: 12,
      center: latlng,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };

mapTypeId задает тип карты по умолчанию, может иметь следующие значения:

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

Инициализация карты производится в строке

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

Здесь map_canvas элемент div, где располагается окно с картой.

Загрузим код в браузере.

Пример карты с использованием Google Maps API v3

По умолчанию на карту добавляются следующие элементы управления – большой элемент масштабирования и панорамирования, а также переключатель типа карты. 

Посмотреть пример в действии

Описание Google Maps API v3 расположено по адресу http://code.google.com/intl/ru/apis/maps/documentation/v3/

Элементы управления картой  Google Maps API верисия 3

Я продолжаю рассматривать новую версию Google Maps API и в этот раз мы познакомимся с элементами управления картой.

Как я уже отмечал в предыдущей заметке ссылка,  по умолчанию на карту добавляются следующие элементы управления – большой элемент масштабирования и панорамирования, а также переключатель типа карты. 

diableDefaultUI [boolean] – параметр служит для отключения настроек элементов управления по умолчанию, для этого его значение нужно установить в состояние true (истина), по умолчанию он имеет значение false.

mapTypeControl [boolean] – параметр определяет показывать или нет элемент управления типом отображения карты, по умолчанию имеет значение true.

mapTypeControlOption – параметр определяет как элемент управления типом отображения карты будет показываться. Может иметь три значения: DEFAULT —  значение по умолчанию, меняет свой размер в зависимости от размеров окна карты

HORIZONTAL_BAR – параметр будет отображать стандартный вид элемента управления;

Горизонтальное меню переключения типа карты - Google Maps API v3

DROPDOWN_MENU – отображается в виде выпадающего списка.

Элемент выпадающего списка -  Google Maps API v3

var myOptions = {  
  zoom: 12,  
  center: new google.maps.LatLng(56.2980387, 43.9123535),  
  mapTypeId: google.maps.MapTypeId.ROADMAP,  
  mapTypeControlOptions: {  
    style: google.maps.MapTypeControlStyle.DROPDOWN_MENU  
  }  
};

Посмотреть пример в действии

navigationControl [boolean] – параметр скрывает или отображает панель навигации, которая как правило расположена в левом верхнем углу карты.

navigationControlOptions – параметр определяет как будет отображаться панель навигации.

Может принимать четыре следующих значения:

DEFAULT – будет менять свой вид в зависимости от размера карты и других параметров;
SMALL – маленький элемент контроля позволяет увеличить или уменьшить карту;

Элемент управления масштабом - Google Maps API v3

ANDROID – выглядит как предыдущий, но предназначен для платформы Android:

ZOOM_PAN – большой элемент контроля позволяет изменять масштаб и панорамировать карту.

  var myOptions = {  
  zoom: 12,  
  center: new google.maps.LatLng(56.2980387, 43.9123535),  
  mapTypeId: google.maps.MapTypeId.ROADMAP,  
  navigationControlOptions: {  
    style: google.maps.NavigationControlStyle.SMALL 
  }  
};

Посмотреть пример в действии

scaleControl [boolean] – будет или нет отображаться элемент управления масштабная линейка

Масштабная линейка - Google Maps API v3

  • Гость: А версия 3 и в окончательном релизе будет работать без ключа?
  • Гость: Вадим, да, так и останется без ключа. По крайней мере, обратной информации я не видел.
  • Гость: А где почитать игформацию об изменнеии изображения маркера в версии 3?
  • Гость: В документации по API Google Maps v3: <a href="http://code.google.com/intl/ru-RU/apis/maps/documentation/javascript/overlays.html#SimpleIcons" rel="nofollow">http://code.google.com/intl/ru-RU/apis/maps/documentation/javascript/overlays.html#SimpleIcons</a>, там же есть <a href="http://code.google.com/intl/ru-RU/apis/maps/documentation/javascript/examples/icon-simple.html" rel="nofollow">пример</a>
  • Гость: Спасибо огромное!!! особенно за language никак не мог язык поменять
  • Гость: Скажите пожалуйста, какие есть ограничения по нагрузке для 3й версии API ? Для 2й, на сколько я помню, ресурсы с нагрузкой в более 500000 запросов в сутки просят уведомлять гугл заранее, а для операций геокодирования дают ограничение по-моему в 15000 запросов с одного ip. Проблему решал тот самый ключик для домена. Как дела с разного рода ограничениями обстоят здесь?
  • Гость: Про ограничения я не знаю, нужно спрашивать у разработчиков
  • Гость: Скажите, а можно ли убрать человечка, через которого вид из веб камеры включается или вообще убрать кнопки зума?
  • Гость: Конечно можно см. <a href="http://code.google.com/intl/ru-RU/apis/maps/documentation/javascript/controls.html#Adding_Controls_to_the_Map" rel="nofollow">документацию</a> Приведу еще пример кода без зума и человечка: var myOptions = { zoom: 4, center: new google.maps.LatLng(-33, 151), zoomControl: false, streetViewControl: false, mapTypeId: google.maps.MapTypeId.ROADMAP }
  • Гость: спасибо огромное! теперь и в документации разглядел)
  • Гость: Всем добрый день! Ребята, подскажите плагин для кастомизации инфоокон для Google Maps. Есть необходимость убрать кнопу закрытия окна, например - причуды дизайнера.
  • Гость: Скажите, пожалуйста, а можно ли убрать цикличность (=бесконечность) карты по ширине? Я сделал свою карту, непривязанную, нарезал её в MapTiler. Если поставить маркер, он дублируется за пределами карты, чего мне не нужно.
  • Гость: Нужно подумать.
  • Гость: Вчера читал документацию. Возможно, это как-то связано с проекциями: https://developers.google.com/maps/documentation/javascript/maptypes?hl=ru#Projections Кстати, когда я нарезал при помощи MapTiler карту в png-тайлы, всё было хорошо, кроме размера файлов на выходе. Но если резать в jpg, то на выводимой карте прозрачность становится балым фоном, тогда как заливка окна вокруг карты серая (#E5E3DF). Не красиво. Вот и думаю, какие есть варианты. Я вижу три, но возможны ли они? 1. Конвертировать из png в jpg с заменой прозрачности цветом. Как? 2. Нарезать одну карту на jpg и png с прозрачностью. Но как заставить карту эту кашу "схавать"? 3. Изменить фон окна с серого на белый. Но как? Помогите, пожалуйста советом, а то я замучался.
  • Гость: Нашёл способ заменить прозрачность цветом через пакетную конвертацию IrfanView!
  • Гость: Уважаемый admin, есть ли у Вас какие-либо идеи, как сделать метку только на пользовательской карте, чтобы одна и та же метка не дублировалась по горизонтали?
  • Гость: Помогите, пожалуйста...
  • Гость: А Как добавить слой и вкл,выкл пробки на карте?
  • Гость: Скажите а как с карты убрать надписи городов, сделать так чтоб было видно только границы регионов.
  • Гость: Можно изменить стили отображения надписей, смотри <a href="http://webmap-blog.ru/google-maps/zadaem-svoj-stil-dlya-karty-s-ispolzovaniem-api-google-maps-v3" title="Задаем свой стиль для карты с использованием API Google Maps v3" target="_blank" rel="nofollow">заметку</a>
  • Гость: Привет. Нужна помощь. Проблема в том что я добавил карту по вашей технологии, и все хорошо, кроме одного - когда скролишь страницу и курсор попадает на карту, то она начинает маштабироваться, а мне надо, что б маштабирование или перемещение производилось только при нажатии, тоесть сделать карту неактивной. Если вставлять карту старым способом, то она изначально неактивная, так же нужно сделать и эту
  • Ivan Okhota: Здравствуйте! Я у себя на сайте использую такую вещь: <script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script> <script type="text/javascript"> var points = [ ["Квартира 2", 55.771683, 37.571274, 1, 'тут ссылка на страницу на которую переходишь при нажатии на маркер'], ["Квартира 5", 55.7636, 37.606, 1, 'тут ссылка на страницу на которую переходишь при нажатии на маркер'], ["Квартира 7", 55.763339, 37.605623, 1, 'тут ссылка на страницу на которую переходишь при нажатии на маркер'], ["Квартира 8", 55.780175, 37.590300, 1, 'тут ссылка на страницу на которую переходишь при нажатии на маркер'], ["Квартира 13", 55.757380, 37.645063, 1, 'тут ссылка на страницу на которую переходишь при нажатии на маркер], ["Квартира 15", 55.772645, 37.582221, 1, 'тут ссылка на страницу на которую переходишь при нажатии на маркер'], ["Квартира 16", 55.772108, 37.591856, 1, 'тут ссылка на страницу на которую переходишь при нажатии на маркер'] ]; function setMarkers(map, locations) { var shape = { coord: [1, 1, 1, 20, 18, 20, 18 , 1], type: 'poly' }; for (var i = 0; i < locations.length; i++) { var flag = new google.maps.MarkerImage( 'http://googlemaps.googlermania.com/google_maps_api_v3/en/Google_Maps_Marker.png', new google.maps.Size(37, 34), new google.maps.Point(0,0), new google.maps.Point(0, 19) ); var place = locations[i]; var myLatLng = new google.maps.LatLng(place[1], place[2]); var marker = new google.maps.Marker({ position: myLatLng, map: map, icon: flag, shape: shape, title: place[0], zIndex: place[3], url: place[4] }); google.maps.event.addListener(marker, 'click', function() { // alert('go to ' + this.url); // window.location.href = this.url; }); } } function initialize() { var myOptions = { center: new google.maps.LatLng(55.766731,37.6010157,14), zoom: 13, mapTypeId: google.maps.MapTypeId.ROADMAP }; var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); setMarkers(map, points); } </script> <script type="text/javascript"> google.maps.event.addDomListener(window, 'load', initialize); </script> ВОПРОС такой, как сделать что бы тайтл (title: place[0]) отображался над маркером всегда, а не только при наведении?