Переходим от API Google Map v2 к версии 3

Автор: | 14.09.2010

В этой заметке я хочу на конкретном примере рассказать о том, как перейти от версии JavaScript API Google Maps JavaScript API Google Maps v2 новой версии 3.

На своем блоге я уже не раз писал, как работать с JavaScript API Google Maps v3.
Это заметки: «Google Maps API верисия 3», «Работаем с окружностью в JavaScript API Google Maps V3» и «Задаем свой стиль для карты с использованием API Google Maps v3».

Рассмотрим пример показа маркера с информационным окном для Google Maps v2

Исходный код:

<!DOCTYPE html "-//W3C//DTD XHTML 1.0 Strict//EN" 
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
  <head> 
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/> 
    <title>Пример API Карт Google версия 2 - маркер и информаионное окно</title> 
    <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAACHCJdlgAEGcD_flKUFEmVhQlAYd20Yeej0MiKNuYPUGBnCwDThQlwUCPtCqtX3RC7LUKE-JYan3T4g"
            type="text/javascript"></script> 
    <script type="text/javascript"> 
 
     function initialize() {if (GBrowserIsCompatible()) {
      var map = new GMap2(document.getElementById("map_canvas"));
      map.setCenter(new GLatLng(56.31572,44.017158), 15);
 
      map.addControl(new GSmallMapControl());
      map.addControl(new GMapTypeControl());
 
 
	// Создаем новый маркер
	var marker = new GMarker(new GLatLng(56.31572,44.017158));
 
	// Добавляем обработку события щелчек по маркеру
	GEvent.addListener(marker, 'click', function() {
	// При клике открываем информационное окно
	marker.openInfoWindowHtml('<div style="text-align:center"><strong>Оперный театр им. А. С. Пушкина</strong><br><img src="http://webmap-blog.ru/examples/files/yanmap_z5_2.jpg" width="200" height="138" /><br>ул. Белинского, д. 59</div>');
	});
 
	// Добавляем маркер на карту
	map.addOverlay(marker);
 
    }
}
 
    </script> 
  </head> 
<body onload="initialize()" onunload="GUnload()">
 
<div id="map_canvas" style="width: 800px; height: 600px"></div> 
 
</body> 
</html>

Пример в действии

Преобразуем этот пример в версию Gooogle Maps  v3

1. В новой версии отсутствует API-ключ для привязки карты к конкретному домену.

В место

<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAACHCJdlgAEGcD_flKUFEmVhQlAYd20Yeej0MiKNuYPUGBnCwDThQlwUCPtCqtX3RC7LUKE-JYan3T4g" type="text/javascript"></script>

Заменяем на

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

Еще необходимо обратить внимание на параметр sensor в строке определения API.

Он определяет возможность определения местоположения пользователя, принимает два значения – true или false.

2. Новое пространство имен.

Если в версии 2 имена глобальных переменных начинались с буквы G, например, GMap и GLatLng.
В версии 3 используется пространство имен google.maps.

3. Инициализация карты

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

Для версии 2

var map = new GMap2(document.getElementById("map_canvas"));
map.setCenter(new GLatLng(56.31572,44.017158), 15);>

Для версии 3

var myLatlng = new google.maps.LatLng(56.31572,44.017158);
    var myOptions = {
      zoom: 15,
      center: myLatlng,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    }
 
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

В начале, мы определяем центр карты, создаем объект myLatlng.

Затем определяем свойства myOptions  нашей карты в виде набора параметров:

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

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

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

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

4. Задания элементов управления для карты

В версии 2 мы сами должны были всегда добавлять необходимые элементы управления на карту, при помощи метода map.addControl.

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

Подробнее об элементах управления можно прочитать по адресу http://code.google.com/intl/ru/apis/maps/documentation/javascript/controls.html

5. Добавление маркера на карту

В версии 2 за это отвечают две строки:

var marker = new GMarker(new GLatLng(56.31572,44.017158));
map.addOverlay(marker);

А в версии 3 это делается так:

var marker = new google.maps.Marker({
        position: myLatlng,
        map: map,
        title: 'Оперный театр им. А. С. Пушкина'
    });

Объект google.maps.Marker отвечает за определение маркера и принимает единственный аргумент – список параметров.

Этот список должен обязательно содержать такие параметры как, map [Map] – индентификатор карты, на которой будет размещен маркер; position [LatLng] – координаты точки, в которую будет установлен маркер; должно иметь тип google.maps.LatLng.

Дополнительные параметры:

title [string]– задет текст всплывающей подсказки для маркера;

clickable [boolean] – отключает возможность каких либо действий при клике по метке. Если установлено в значение false, то по клике по метке ни чего не происходит;

icon [string|MarkerImage] – определяет иконку маркера. Это свойство может принимать значение как URL’а, указывающего на соответствующее изображение, так и объекта Marker;

shadow [string|MarkerImage] – устанавливает тень для иконки маркера. Это свойство может принимать значение как URL’а, указывающего на соответствующее изображение, так и объекта MarkerImage;

shape [object] – определяет кликабельную область вокруг иконки маркера. Принимает объект MarkerShape, содержащий координаты многоугольной области, в качестве значения;

flat [boolean] – определяет наличие тени у иконки маркера. Если значение этого свойства установлено в true, то тень у иконки отсутствует.

Подробнее о параметрах меток и других элементов, размещаемых на карте http://code.google.com/intl/ru/apis/maps/documentation/javascript/overlays.html

6. Определение обработчика события и содержимого балуна (информационного окна).

Для задания содержимого балуна в версии 2 используется marker.openInfoWindowHtml(‘ ‘);

Здесь в балуне отображается html-код.

Но чтобы информационное окно открывалось только при щелчке по маркеру необходимо добавить обработчик события click.

	GEvent.addListener(marker, 'click', function() {
	// При клике открываем информационное окно
	marker.openInfoWindowHtml('<div style="text-align:center"><strong>Оперный театр им. А. С. Пушкина</strong><br><img src="http://webmap-blog.ru/examples/files/yanmap_z5_2.jpg" width="200" height="138" /><br>ул. Белинского, д. 59</div>');
	});

В версии 3 это делает следующий код:

var contentString = '<div style="text-align:center"><strong>Оперный театр им. А. С. Пушкина</strong><br><img src="http://webmap-blog.ru/examples/files/yanmap_z5_2.jpg" width="200" height="138" /><br>ул. Белинского, д. 59</div>';
 
var infowindow = new google.maps.InfoWindow({
        content: contentString
    });
google.maps.event.addListener(marker, 'click', function() {
      infowindow.open(map,marker);
    });

В начале, определяем параметр contentString и задаем html-код содержимого инфо-окна.

После этого определяем объект инфо-окно.

И добавляем обработчик события к маркеру используя метод addListener(), который находится в пространстве имен google.maps.event.

Этот метод принимает три аргумента: первый – объект ( маркер), к которому привязывается событие; второй – собственно наименование события ( click); третий – функций, которая сработает после того, как произойдет событие.

Посмотреть пример в действии и исходный код

Узнать подробнее о событиях

Узнать подробности об инфо-окнах

Переходим от API Google Map v2 к версии 3: 17 комментариев

  1. Рамиль

    Подскажите как можно от центровать карту по «балуну», сейчас центровка происходит по координатам но при этом часть «балуна» не влазит (обрезается)

    1. admin Автор записи

      Карту можно центрировать только по точке привязки балуна, но у балуна в API Google Maps v3 существует специальное свойство для задания его максимальной ширины в пикселях — maxWidth.

      Например, параметры балуна можно записать так:

      var infowindow = new google.maps.InfoWindow({
      content: contentString,
      maxWidth: 200
      });

      В переменной contentString определен текст или HTML-код содержимого балуна.

  2. Константин

    Вопрос, возможно, не совсем в тему…

    Как можно (если можно) вызвать info-окно для определённого маркера функцией «со стороны»? Есть ли такие функции?

    (например, при загрузке карты надо по-умолчанию открывать одно из info-окон)

    1. admin Автор записи

      Я понимаю Вас интересует вопрос, можно ли сделать ссылку с другой страницы сайта на карту так, чтобы при переходе открывался балун с необходимой информацией и центрировалась карта.
      Да, такое возможно. Например, данные о маркерах хранить в XML-файле, одним из параметров метки будет ее ID. По ссылке на карту передавать методом GET ID-метки которую нужно показать на карте.
      И уже на самой карте по ID проводить центрирование карты и открытие балуна.

  3. Сергей

    Подскажите, а как определить центр (позицию) и зум карты если из базы данных берутся только координаты маркеров. Т.е. хотелось бы видеть все маркеры на карте, или можно определять позицию зная название страны, или города?

  4. Сергей

    Решение найдено, наверное многим пригодится:

    var map = new google.maps.Map(…);
    var bounds = new google.maps.LatLngBounds();

    for(var i in locations) {
    var ll = new google.maps.LatLng(locations[i].lat, locations[i].lng);
    bounds.extend(ll);
    }

    map.fitBounds(bounds);

  5. Иван

    Буду признателен если ответите на 2 вопроса.

    1. У меня щас V2 API на что мне теперь исправить
    var map = new GMap2(document.getElementById(«map»));
    document.getElementById(‘map’).style.backgroundColor = ‘white’;
    var mapType = new GmapUploaderMapType(map, «/gisga/», «png», 7);
    map.setCenter(new GLatLng(0,0), 1, mapType);
    map.addControl(new GLargeMapControl());
    map.enableContinuousZoom();

    2. У меня есть полигоны, нужно функцией со стороны симитировать клик по определенному полигону.
    Спасибо

  6. Андрей

    Немного непонятно как правильно нанести на одну карту несколько объектов.
    Т.е. задать центр для карты, а для объектов на ней свои координаты.
    Не могли бы сделать пример, хотя бы с парой объектов.

  7. Евгений

    Добрый день!

    Вы занимаетесь (за отдельную плату) работами связанные с переходом Google Maps API v2 на v3 в компоненте по недвижимости joomla 1.5 ?

    1. admin Автор записи

      Напишите какой компонент переделывать.

  8. Антон

    Добрый день!
    Подскажите пожалуйста, если маркеры очень близко, то они накладываются друг на друга. Можно ли задавать группе маркеров свойство типа «Pane», которое бы определяло порядок наложения маркеров друг на друга (какой выше, какой ниже) и как правильно это делать?
    Спасибо!

    1. admin Автор записи

      У маркера есть свойство zIndex (число) — zIndex относительно других фигур. getZIndex() — мы можем получить zIndex для маркера, а setZIndex(zIndex:number) — установить

  9. Антон

    использую такой код:
    var places1 = [
    [‘название’,55.55, 77.77],
    [‘название2’,66.66, 88.88],
    ];

    function setMarkers1(map, locations) {

    //Определяем область показа маркеров
    var latlngbounds1 = new google.maps.LatLngBounds();
    var image1 = new google.maps.MarkerImage(‘https://……png?’,
    new google.maps.Size(10, 10),
    new google.maps.Point(0,0),
    new google.maps.Point(5, 5));
    for (var i = 0; i < places1.length; i++) {
    var myLatLng1 = new google.maps.LatLng(locations[i][1], locations[i][2]);
    //Добавляем координаты маркера в область
    latlngbounds1.extend(myLatLng1);
    var marker1 = new google.maps.Marker({
    position: myLatLng1,
    map: map,
    icon: image1,
    title: locations[i][0]
    });
    }

    //Центрируем и масштабируем карту
    map.setCenter( latlngbounds1.getCenter(), map.fitBounds(latlngbounds1));

    };

    и так использую несколько групп маркеров, для каждой из которых свое изображение (через url).
    В описании на developers.google.com не нашел у маркера опции "Pane"

  10. Антон

    Спасибо большое! не обратил внимание на zIndex сразу. Теперь все получилось.

  11. Александр

    Устанавливаю несколько маркеров на карту, и пытаюсь для каждого из них определить свое infowindow, но получается, что оно устанавливается только на последний маркер из добавляемых.
    Подскажите пожалуйста, как поставить несколько маркеров на карту и для каждого из них определить infowindow?

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

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