Навороты для Google Maps API v3

Опубликовано Опубликовано в рубрике API, Google Maps API v.3, JavaScript, PHP

Как подключить к сайту третью версию API гуглокарт я рассказывал совсем недавно. Сегодня я приведу пример того, как можно «тюнинговать» свои карты. Задачей будет вывод на карту информации от сервиса Google Place.

Будем считать, что у нас уже есть подключенные при помощи API карты Google. Для того, чтобы заработал требуемый сервис Google Place, необходимо подключить соответствующую библиотеку. Обновим адрес подключения скрипта API карт:


В разметке HTML пока ничего не меняем. Напомню, что карты выводятся в div с id=»map». Теперь можно приступить непосредственно к подключению карт.

     var map;
      var infowindow;

      function initialize() {
        var myLatLon = new google.maps.LatLng(, );

        map = new google.maps.Map(document.getElementById('map'), {
          mapTypeId: google.maps.MapTypeId.ROADMAP,
          center: myLatLon,
          zoom: 15
        });

var metka = new google.maps.Marker({
  position: myLatLon,
  map: map,
  title:"Тут описание точки"
});

Код всё тот же. Динамически генерируем координаты центра карты, туда же ставим метку с необходимым объектом. Теперь начинаем работать с Places. Сформируем запрос к серверу Google.

var request = {
          location: myLatLon,
          radius: 500,
          types: ['bar']
        };
infowindow = new google.maps.InfoWindow();
        var service = new google.maps.places.PlacesService(map);
        service.search(request, callback);
      }/*это скобка, закрывающая функцию initialize*/

Синтаксис таков: location — это центр окружности, в которой будет производиться поиск объектов. radius — это радиус соответствующей окружности в метрах. Types — тип искомых объектов. Сейчас там выставлено значение bar — ищем бары в радиусе 500 метров от центра карты. Если необходимо вывести несколько типов, их можно перечислить через запятую.

Далее добавляем к каждой полученной точке инфоокно, в котором будет содержаться название точки.

После всего этого вызываем функцию service.search. Это поиск по запросу в переменной request и работающий с функцией callback. Опишем её.

function callback(results, status) {
        if (status == google.maps.places.PlacesServiceStatus.OK) {
          for (var i = 0; i < results.length; i++) {
            createMarker(results[i]);
          }
        }
      }

Вкратце - для каждой найденной точки генерируется метка.

Теперь опишем свойства самой метки и то, как она генерируется

var image = 'metka.png';
      function createMarker(place) {
        var placeLoc = place.geometry.location;
        var marker = new google.maps.Marker({
          map: map,
          position: place.geometry.location,
          icon: image
        });

При создании метки ей будет добавляться картинка metka.png, которая лежит в корне нашего сервера.

И напоследок добавим вывод инфоокна метки по клику на ней самой.

google.maps.event.addListener(marker, 'click', function() {
          infowindow.setContent(place.name);
          infowindow.open(map, this);
        });
      }

      google.maps.event.addDomListener(window, 'load', initialize);

Готово! Теперь можно посмотреть на результат. Однако, он статичен. Вдруг пользователю интересны не магазины, а, скажем, кафе? Научим наш модуль работать динамически.

Добавим форму с выпадающими списками

Радиус:   Показать:

Как нетрудно догадаться, данные передаются обратно на страницу методом POST. Поэтому в голове страницы запишем такой PHP-код

if(isset($_POST['place'])) {$place=$_POST['place'];} else {$place = "airport";};
if(isset($_POST['radius'])){$rad=$_POST['radius'];} else {$rad = "500";};

Если пользователь решил что-то поискать, то он это и найдёт. Если же вход на страницу первый, то выставим поиск по умолчанию - вывести на карту все аэропорты в радиусе 500 метров от точки. И не забудем добавить пару сниппетов в нащ JavaScript карты.

var request = {
          location: pyrmont,
          radius: ,
          types: ['']
        };

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

За сим всё!

Безошибочного кода Вам!

P.S.: полная документация по Google Maps API V.3 на английском языке лежит здесь.

Навороты для Google Maps API v3: 1 комментарий

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

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