Google Maps API верисия 3

Автор: | 22.11.2009
21 комментарий

В конце мая 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

Google Maps API верисия 3: 21 комментарий

  1. Вадим

    А версия 3 и в окончательном релизе будет работать без ключа?

    Ответить ↓
  2. Дмитрий

    Вадим, да, так и останется без ключа. По крайней мере, обратной информации я не видел.

    Ответить ↓
  3. Антон

    А где почитать игформацию об изменнеии изображения маркера в версии 3?

    Ответить ↓
  4. axel

    Спасибо огромное!!! особенно за language никак не мог язык поменять

    Ответить ↓
  5. Igor

    Скажите пожалуйста, какие есть ограничения по нагрузке для 3й версии API ?
    Для 2й, на сколько я помню, ресурсы с нагрузкой в более 500000 запросов в сутки просят уведомлять гугл заранее, а для операций геокодирования дают ограничение по-моему в 15000 запросов с одного ip. Проблему решал тот самый ключик для домена.
    Как дела с разного рода ограничениями обстоят здесь?

    Ответить ↓
    1. admin Автор записи

      Про ограничения я не знаю, нужно спрашивать у разработчиков

      Ответить ↓
  6. BooleanDog

    Скажите, а можно ли убрать человечка, через которого вид из веб камеры включается или вообще убрать кнопки зума?

    Ответить ↓
    1. admin Автор записи

      Конечно можно см. документацию
      Приведу еще пример кода без зума и человечка:

      var myOptions = {
      zoom: 4,
      center: new google.maps.LatLng(-33, 151),
      zoomControl: false,
      streetViewControl: false,
      mapTypeId: google.maps.MapTypeId.ROADMAP
      }

      Ответить ↓
  7. BooleanDog

    спасибо огромное! теперь и в документации разглядел)

    Ответить ↓
  8. LtColumbo

    Всем добрый день! Ребята, подскажите плагин для кастомизации инфоокон для Google Maps. Есть необходимость убрать кнопу закрытия окна, например — причуды дизайнера.

    Ответить ↓
  9. Иван

    Скажите, пожалуйста, а можно ли убрать цикличность (=бесконечность) карты по ширине? Я сделал свою карту, непривязанную, нарезал её в MapTiler. Если поставить маркер, он дублируется за пределами карты, чего мне не нужно.

    Ответить ↓
  10. Иван

    Вчера читал документацию. Возможно, это как-то связано с проекциями:
    https://developers.google.com/maps/documentation/javascript/maptypes?hl=ru#Projections

    Кстати, когда я нарезал при помощи MapTiler карту в png-тайлы, всё было хорошо, кроме размера файлов на выходе. Но если резать в jpg, то на выводимой карте прозрачность становится балым фоном, тогда как заливка окна вокруг карты серая (#E5E3DF). Не красиво.

    Вот и думаю, какие есть варианты. Я вижу три, но возможны ли они?
    1. Конвертировать из png в jpg с заменой прозрачности цветом. Как?
    2. Нарезать одну карту на jpg и png с прозрачностью. Но как заставить карту эту кашу «схавать»?
    3. Изменить фон окна с серого на белый. Но как?

    Помогите, пожалуйста советом, а то я замучался.

    Ответить ↓
  11. Иван

    Нашёл способ заменить прозрачность цветом через пакетную конвертацию IrfanView!

    Ответить ↓
  12. Иван

    Уважаемый admin, есть ли у Вас какие-либо идеи, как сделать метку только на пользовательской карте, чтобы одна и та же метка не дублировалась по горизонтали?

    Ответить ↓
  15. Сергей

    Скажите а как с карты убрать надписи городов, сделать так чтоб было видно только границы регионов.

    Ответить ↓
  16. Женя

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

    Ответить ↓

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *