Google Places API – практика

Вы используете Google Maps? Я уверен, что да. Вы никогда не пробовали функцию "Поиск поблизости"? Мне нравится эта функция и сегодня я покажу вам, как вы можете реализовать данный скрипт на своем сайте. Мы будем использовать обычные Google карты, плюс дополнительные библиотеки - Places (Google Places API). После прочтения данной статьи вы сможете реализовать при помощи Google Places API - поиск адреса, объектов, а также настроить поиск с дополнительными параметрами: ключевое слово, тип и радиус.

Сложность

Google Places API

Шаг 1. HTML разметка

Создайте новый HTML файл, поставьте основные заголовки, а затем добавьте следующий код в секцию head:

<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?libraries=places&sensor=false"></script>
<script src="/js/script.js"></script>

Добавили необходимые библиотеки (главную библиотеку Google с дополнительной библиотекой - Places API), и файл со скриптом script.js. Далее идет тело документа:

<div id="gmap_canvas"></div>
<div class="actions">
<div class="button">
<label for="gmap_where">Where:</label>
<input id="gmap_where" type="text" name="gmap_where" /></div>
<div id="button2" class="button" onclick="findAddress(); return false;">Search for address</div>
<div class="button">
<label for="gmap_keyword">Keyword (optional):</label>
<input id="gmap_keyword" type="text" name="gmap_keyword" /></div>
<div class="button">
<label for="gmap_type">Type:</label>
<select id="gmap_type">
<option value="art_gallery">art_gallery</option>
<option value="atm">atm</option>
<option value="bank">bank</option>
<option value="bar">bar</option>
<option value="cafe">cafe</option>
<option value="food">food</option>
<option value="hospital">hospital</option>
<option value="police">police</option>
<option value="store">store</option>
</select>
</div>
<div class="button">
<label for="gmap_radius">Radius:</label>
<select id="gmap_radius">
<option value="500">500</option>
<option value="1000">1000</option>
<option value="1500">1500</option>
<option value="5000">5000</option>
</select>
</div>
<input type="hidden" id="lat" name="lat" value="40.7143528" />
<input type="hidden" id="lng" name="lng" value="-74.0059731" />
<div id="button1" class="button" onclick="findPlaces(); return false;">Search for objects</div>
</div>

Первый элемент (gmap_canvas) является основным объектом Google Map HTML canavas. Далее - простая HTML форма (форма загрузки).

Шаг 2. CSS

Теперь мы можем подготовить стиль для нашей демонстрационной страницы:

#gmap_canvas {
    height: 700px;
    position: relative;
    width: 900px;
}
.actions {
    background-color: #FFFFFF;
    bottom: 30px;
    padding: 10px;
    position: absolute;
    right: 30px;
    z-index: 2;

    border-top: 1px solid #abbbcc;
    border-left: 1px solid #a7b6c7;
    border-bottom: 1px solid #a1afbf;
    border-right: 1px solid #a7b6c7;
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    border-radius: 12px;
}
.actions label {
    display: block;
    margin: 2px 0 5px 10px;
    text-align: left;
}
.actions input, .actions select {
    width: 85%;
}
.button {
    background-color: #d7e5f5;
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #d7e5f5), color-stop(100%, #cbe0f5));
    background-image: -webkit-linear-gradient(top, #d7e5f5, #cbe0f5);
    background-image: -moz-linear-gradient(top, #d7e5f5, #cbe0f5);
    background-image: -ms-linear-gradient(top, #d7e5f5, #cbe0f5);
    background-image: -o-linear-gradient(top, #d7e5f5, #cbe0f5);
    background-image: linear-gradient(top, #d7e5f5, #cbe0f5);
    border-top: 1px solid #abbbcc;
    border-left: 1px solid #a7b6c7;
    border-bottom: 1px solid #a1afbf;
    border-right: 1px solid #a7b6c7;
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    border-radius: 12px;
    -webkit-box-shadow: inset 0 1px 0 0 white;
    -moz-box-shadow: inset 0 1px 0 0 white;
    box-shadow: inset 0 1px 0 0 white;
    color: #1a3e66;
    font: normal 11px "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif;
    line-height: 1;
    margin-bottom: 5px;
    padding: 6px 0 7px 0;
    text-align: center;
    text-shadow: 0 1px 1px #fff;
    width: 150px;
}
.button:hover {
    background-color: #ccd9e8;
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ccd9e8), color-stop(100%, #c1d4e8));
    background-image: -webkit-linear-gradient(top, #ccd9e8, #c1d4e8);
    background-image: -moz-linear-gradient(top, #ccd9e8, #c1d4e8);
    background-image: -ms-linear-gradient(top, #ccd9e8, #c1d4e8);
    background-image: -o-linear-gradient(top, #ccd9e8, #c1d4e8);
    background-image: linear-gradient(top, #ccd9e8, #c1d4e8);
    border-top: 1px solid #a1afbf;
    border-left: 1px solid #9caaba;
    border-bottom: 1px solid #96a3b3;
    border-right: 1px solid #9caaba;
    -webkit-box-shadow: inset 0 1px 0 0 #f2f2f2;
    -moz-box-shadow: inset 0 1px 0 0 #f2f2f2;
    box-shadow: inset 0 1px 0 0 #f2f2f2;
    color: #163659;
    cursor: pointer;
}
.button:active {
    border: 1px solid #8c98a7;
    -webkit-box-shadow: inset 0 0 4px 2px #abbccf, 0 0 1px 0 #eeeeee;
    -moz-box-shadow: inset 0 0 4px 2px #abbccf, 0 0 1px 0 #eeeeee;
    box-shadow: inset 0 0 4px 2px #abbccf, 0 0 1px 0 #eeeeee;
}

Шаг 3. JS

Создадим файл script.js в папке JS, со следующим содержимым:

var geocoder;
var map;
var markers = Array();
var infos = Array(); function initialize() {
// подготовка Geocoder
geocoder = new google.maps.Geocoder(); // установка начальной позиции (New York)
var myLatlng = new google.maps.LatLng(40.7143528,-74.0059731); var myOptions = { // стандартные настройки карты
zoom: 14,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('gmap_canvas'), myOptions);
} // функция очистки стилей
function clearOverlays() {
if (markers) {
for (i in markers) {
markers[i].setMap(null);
}
markers = [];
infos = [];
}
} // функция очистки информации
function clearInfos() {
if (infos) {
for (i in infos) {
if (infos[i].getMap()) {
infos[i].close();
}
}
}
} // функция поиска адреса
function findAddress() {
var address = document.getElementById("gmap_where").value; // скрипт использует 'geocoder' для поиска локации по адресу
geocoder.geocode( { 'address': address}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) { // если все ок, // центрируем карту на данной точке
var addrLocation = results[0].geometry.location;
map.setCenter(addrLocation); // сохраним текущие координаты в переменной
document.getElementById('lat').value = results[0].geometry.location.$a;
document.getElementById('lng').value = results[0].geometry.location.ab; // добавим новый маркер
var addrMarker = new google.maps.Marker({
position: addrLocation,
map: map,
title: results[0].formatted_address,
icon: 'marker.png'
});
} else {
alert('Geocode was not successful for the following reason: ' + status);
}
});
} // функция поиска
function findPlaces() { // поготовка переменных (фильтр)
var type = document.getElementById('gmap_type').value;
var radius = document.getElementById('gmap_radius').value;
var keyword = document.getElementById('gmap_keyword').value; var lat = document.getElementById('lat').value;
var lng = document.getElementById('lng').value;
var cur_location = new google.maps.LatLng(lat, lng); // подготовка запроса координат
var request = {
location: cur_location,
radius: radius,
types: [type]
};
if (keyword) {
request.keyword = [keyword];
} // отправка запроса
service = new google.maps.places.PlacesService(map);
service.search(request, createMarkers);
} // создание маркеров (функция 'findPlaces')
function createMarkers(results, status) {
if (status == google.maps.places.PlacesServiceStatus.OK) { // если есть результат - очистка карты (слоев)
clearOverlays(); // и создаем новые маркеры по результатам поиска
for (var i = 0; i < results.length; i++) {
createMarker(results[i]);
}
} else if (status == google.maps.places.PlacesServiceStatus.ZERO_RESULTS) {
alert('Sorry, nothing is found');
}
} // функция создания единичного маркера
function createMarker(obj) { // подготовка объекта - новый маркер
var mark = new google.maps.Marker({
position: obj.geometry.location,
map: map,
title: obj.name
});
markers.push(mark); // подготовка окна с информацией
var infowindow = new google.maps.InfoWindow({
content: '<img src="' + obj.icon + '" /><font style="color:#000;">' + obj.name +
'<br />Rating: ' + obj.rating + '<br />Vicinity: ' + obj.vicinity + '</font>'
}); // добавление обработчика маркера
google.maps.event.addListener(mark, 'click', function() {
clearInfos();
infowindow.open(map,mark);
});
infos.push(infowindow);
} // инициализация
google.maps.event.addDomListener(window, 'load', initialize);

Во время инициализации, мы подготавливаем пустой объект Geocoder, установим начальную точку в городе Нью-Йорк, и наконец, мы инициализируем карту объекта с нашими параметрами. В момент нажатия на кнопку "Поиск адреса", скрипт использует геокодирование, для поиска нужного адреса на карте. При положительном поиске - берем первый результат и помещаем его в качестве маркера на карте. Теперь можно начинать поиск объектов с использованием Places API. Пожалуйста, обратите внимание на функцию findPlaces. Она собирает все выбранные параметры (тип, радиус, ключевое слово), затем создает запрос, и отправляет его на PlacesService. В качестве обратного вызова, я использовал функцию createMarkers, которая будет добавлять найденные объекты на карту. Все просто и логично, не правда ли?

Перевод статьи Google Places API – practice

Тэги: APImapsplaces

Вход

Уважаемый пользователь! Мы обнаружили, что вы используете AdBlock и вынуждены скрыть часть материалов на нашем сайте. Siteacademy существует и развивается за счет доходов от рекламы. Просим внести наш сайт в список исключений или отключить Блокировщик рекламы на нашем сайте.