Створення та розгортання в Bluemix додатки для пошуку банкоматів

Що потрібно для створення додатка
Крок 1. Створення заготовки додатки.
Крок 2. Отримання ключа API
Крок 3. Огляд API Google Places
Крок 4. Включення інтерфейсу пошуку
Крок 5. Додавання статичної карти
Крок 6. Додавання інтерактивної карти
Крок 7. Розгортання в Bluemix
Висновок
Ресурси для скачування

API Google Places і Google Maps спрощують пошук найближчих банкоматів і їх нанесення на карту

Одне з найбільш часто використовуваних додатків на моєму смартфоні - Google Maps . Воно дуже корисно для швидкої перевірки пробок на дорогах перед виїздом і при спробах знайти шлях до нового місця призначення. Крім того, це хороший спосіб пошуку нових цікавих ресторанів і магазинів в новому районі або місті.

Але служба Google Maps цікава і з точки зору розробки. Як і багато інших продуктів Google, вона надає ряд API, які дозволяють розробникам створювати власні програми, використовуючи її дані. наприклад, API Google Places дозволяє отримувати інформацію про магазини, підприємствах і установах на їхню адресу, а API Google Maps - вбудовувати в веб-сторінки статичну або інтерактивну карту. Обидва цих API, а також кілька інших, можна використовувати за допомогою поширених мов програмування, таких як PHP і JavaScript.

У цьому керівництві демонструється робота з API Google Places і показано, як створити простий додаток, що використовує поточне місце розташування користувача для пошуку найближчих банкоматів, і інтегрувати цю інформацію в веб-додаток на основі PHP. Потім пояснюється, як використовувати API Google Maps для швидкого створення статичної або інтерактивної карти, на якій ці банкомати вказані з урахуванням вашого поточного місця розташування. Природно, при цьому підтримуються мобільні пристрої, так що можна розгорнути додаток в IBM® Bluemix® і відразу ж почати працювати з ним через планшет або смартфон.

Що потрібно для створення додатка

Знайомство з HTML, CSS і jQuery і вміння працювати в середовищі розробки Apache / PHP.
Знайомство з основами роботи з REST і з класами і об'єктами PHP, так як вони використовуються в прикладі PHP-коду для цього керівництва.
Обліковий запис Google: Приклад програми, наведений у цьому керівництві, використовує API Google Places для створення списку найближчих банкоматів і API Google Maps для побудови статичних і інтерактивних карт. Для доступу до цих API потрібна обліковий запис Google, яку можна використовувати для генерування ключа API.
Примітка. Будь-який додаток, яке використовує API Google Places або будь-який інший API Google Maps, має дотримуватися умови обслуговування Google, політику конфіденційності , А також правила API Places . Перед початком проекту потратьте декілька хвилин на читання цих правил і зробіть так, щоб ваше додаток їх дотримувалося.
Bootstrap : Для створення мобільних додатків я використовую Bootstrap, платформу для користувача інтерфейсів на основі HTML5, спеціально призначену для сенсорних пристроїв, таких як планшети і смартфони. Bootstrap допомагає швидко розробити призначений для користувача інтерфейс з мінімальними проблемами сумісності для платформи і браузерів.
Обліковий запис Bluemix і інструмент командного рядка CloudFoundry для завантаження свого додатка в Bluemix.

запустити програму отримати код

Крок 1. Створення заготовки додатки.

У припущенні наявності у вас всіх необхідних інструментів, на першому кроці створимо заготовку додатки. Перейдіть до кореневого каталогу документів веб-сервера (зазвичай / usr / local / apache / htdocs на Linux або C: \ Program Files \ Apache \ htdocs на Windows) і створіть новий підкаталог для додатка. Назвіть цей каталог atm.

shell> cd / usr / local / apache / htdocs shell> mkdir atm

Посиланням на цей каталог atm по ходу статті буде служити $ APP_ROOT. У каталозі $ APP_ROOT створіть новий файл з ім'ям index.php і заповніть його наступним змістом:

<! DOCTYPE html> <html lang = "en"> <head> <meta charset = "utf-8"> <meta http-equiv = "X-UA-Compatible" content = "IE = edge"> <meta name = "viewport" content = "width = device-width, initial-scale = 1"> <title> Find an ATM </ title> <style> html, body, .tab-content, .tab-pane, #map { height: 100%; } #Footer {text-align: center} </ style> <link rel = "stylesheet" href = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css"> < link rel = "stylesheet" href = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap-theme.min.css"> <script src = "https://ajax.googleapis.com /ajax/libs/jquery/1.11.1/jquery.min.js "> </ script> <! - [if lt IE 9]> <script src =" https://oss.maxcdn.com/html5shiv/ 3.7.2 / html5shiv.min.js "> </ script> <script src =" https://oss.maxcdn.com/respond/1.4.2/respond.min.js "> </ script> <! [ endif] -> </ head> <body> <div id = "content"> <ul class = "nav nav-tabs" role = "tablist"> <li class = "active"> <a href = "# list "data-toggle =" tab "> List </a> </ li> <li> <a href="#map" data-toggle="tab"> Map </a> </ li> </ ul > <div class = "tab-content"> <! - list tab -> <div role = "tabpanel" class = "tab-pane active" id = "list"> </ div> <! - map tab -> <div role = "tabpanel" class = "tab-pane" id = "map"> </ div> </ div> <div id = "footer"> <img src = "powered-by-google -on-white.png "/> <br /> <a href =" terms.html "> Legal Notices </a> </ div> </ div> <script src =" https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js "> </ script> </ body> </ html>

Ця сторінка-заготовка встановлює ключові компоненти, такі як Bootstrap і jQuery, з їх CDN і створює базовий призначений для користувача інтерфейс програми. Як бачите, цей інтерфейс складається з двох вкладок: для списку банкоматів і для карти, на якій відображається їх розташування. Поки при спробі доступу до цієї сторінки через браузер ви побачите порожній інтерфейс з вкладками.

Не хвилюйтесь! Ця сторінка скоро заповниться.

Крок 2. Отримання ключа API

Щоб використовувати API Google Places, потрібно зареєструвати веб-додаток в Google.

Увійдіть в Google, використовуючи свої облікові дані Google, і зайдіть в Google Developers Console .
Створіть новий проект, надайте йому ім'я і включіть доступ до Google Places API, Google Static Maps API і Google Maps JavaScript API, як показано нижче. Ознайомтеся з умовами використання кожного з цих API-інтерфейсів.
У вікні облікових даних запишіть ключ доступу до API (див. Малюнок). Він буде потрібно для авторизації всіх запитів додатка до API.

Готово? Тепер можна вийти з особистого кабінету Google.

Крок 3. Огляд API Google Places

Перш ніж почати розробку додатків за допомогою API Google Places, потрібно зрозуміти, як він працює. Як і багато інших веб-API, він використовує протокол HTTP і очікує HTTP-запитів в призначеної кінцевій точці. Після отримання запиту сервер API відповідає документом JSON, що містить запитані дані. Потім ці дані можна проаналізувати за допомогою серверного мови програмування (наприклад, PHP або Perl) або інструментарію на стороні клієнта (наприклад, jQuery або AngularJS) і витягти з них відомості для інтеграції в веб-сторінку.

Щоб зрозуміти, як працює API Google Places, спробуємо його на пошуку ресторанів в районі Ковент-Гарден у Лондоні (координати на карті 51.5117316 N, -0.1232697 W): введіть в браузер наступний URL-адресу, змінивши його відповідно до свого ключем API, отриманим на попередньому кроці.

https://maps.googleapis.com/maps/api/place/nearbysearch/json?key=YOUR_API_KEY&location=51.5117316,-0.1232697&rankby=distance&types=restaurant

Ось приклад результату:

Як видно з малюнка, API Places відповідає на запит документом JSON, що містить список ресторанів в районі з вказаними координатами. Для кожного результату у відповідь входять найменування, тип, координати, адреса і унікальний ідентифікатор закладу. Є також цілий ряд інших полів; см. документацію API Places .

Крок 4. Включення інтерфейсу пошуку

Тепер, коли ви знаєте, як працює API, можна приступити до створення програми. Першим кроком буде використання API геопозиционирования HTML5, який включений в більшість сучасних браузерів для визначення поточного місцезнаходження користувача. Додайте в файл index.php наступний код:

<! DOCTYPE html> <html lang = "en"> <! - snip -> <body> <div id = "content"> <? Php // якщо широти або довготи немає, // Спробуємо пошук за допомогою засобів геопозиционирования браузера if (empty ($ latitude) || empty ($ longitude)) {?> <script> $ (document) .ready (function () {if (navigator.geolocation) {navigator.geolocation.getCurrentPosition (handle_geo_query, handle_error );} function handle_geo_query (location) {window.location = '? latitude =' + location.coords.latitude + '& longitude =' + location.coords.longitude;} function handle_error (e) {alert ( 'An error occurred during geo-location. ');}}); </ Script> <? Php exit; }?> </ Div> </ body> </ html>

Як правило, якщо цей код виконується в браузері, користувач бачить вікно запиту на дозвіл розкрити його поточне місце розташування. Важливо відзначити, що для того щоб додаток отримувало дані про поточне місцезнаходження користувача, він повинен явно дозволити таке розкриття. Зазвичай місце розташування визначається за допомогою найближчій стільникового вишки або системи GPS на пристрої.

У припущенні, що користувач дозволив визначати своє місце перебування, сценарій викликає функцію handle_geo_query, яка зчитує широту і довготу і перезавантажує URL сторінки; на цей раз ці значення додаються до URL-адресою як параметри GET, щоб їх можна було використовувати за допомогою PHP.

У разі помилки - наприклад, якщо користувач заборонив визначати своє місцезнаходження або якщо його не вдається визначити, - викликається функція handle_error для відображення вікна попередження. Варто зазначити, що повідомлення про помилку можна уточнити, використовуючи тип помилки, проте тут цей код не показаний.

Після перезавантаження сторінки значення широти і довготи, певні в попередньому коді, використовуються для запиту до API Google Places з подальшим перетворенням результату в відформатований список. Ось відповідний розділ коду:

Перші кілька рядків коду створюють новий запит до API з використанням формату, описаного в попередньому розділі. Ключ API і координати Вашого поточного місцезнаходження користувача інтерполюються в URL-запит, а результат фільтрується для відображення тільки банкоматів з параметром types. Нарешті, результати ранжуються по відстані, так щоб першим у списку значився найближчий банкомат.

Для передачі запиту використовуються PHP-функції curl, а результат в коді JSON декодируется в PHP-об'єкт за допомогою функції json_decode (). Тепер легко перебрати безліч результатів і представити їх у вигляді HTML-списку в одній з двох заготовлених вкладок. Цей список для кожного елемента містить найменування банкомату, його місце розташування і автоматично генерується буквене позначення. Ось приклад результату:

Ви помітите, що цей код також створює масив з ім'ям $ markers, що містить рядок в заданому форматі. Рядок містить колір маркера, автоматично генерується буквене позначення банкомату і його широту / довготу. Згодом цей масив використовується для створення міток на карті, що відповідають розташуванню банкоматів.

Крок 5. Додавання статичної карти

На попередньому етапі ми отримали список банкоматів. Тепер ці банкомати потрібно відобразити на карті, щоб користувач міг легко знайти їх зі свого поточного місцезнаходження. Найпростіший спосіб - зробити це за допомогою API Google Static Maps, який у відповідь на запит видає картографічне зображення зазначеного місця з маркерами за вказаними координатами.

Щоб зрозуміти, як працює API Google Static Maps, використовуємо його для отримання карти району Ковент-Гарден у Лондоні, вказавши ті ж координати, що і вище. Введіть в браузер наступний URL-адресу, змінивши його відповідно до свого ключем API:

https://maps.googleapis.com/maps/api/staticmap?key=YOUR_API_KEY&size=640x480&maptype=roadmap&zoom=15&scale=2&markers=51.5117316,-0.1232697

Ось приклад результату:

Як бачите, API Static Maps відповідає на запит зображенням, що містить карту за вказаними координатами. В URL-запиті вказані розмір зображення, коефіцієнт збільшення і масштаб, і можна також додати маркери, включивши в URL-запит параметр markers з їх координатами. Є також цілий ряд інших параметрів для управління відображенням карти; см. документацію Static Maps API .

Тепер, коли ви знаєте, як працює цей процес, досить легко розширити попередній PHP-код, додавши статичні карти. Велика частина важкої роботи вже виконана; все, що потрібно, - це зробити другий запит до кінцевої точки Static Maps API та вставити отримане зображення в другу вкладку. Ось відредагований код:

Як бачите, в цю редакцію входить додатковий запит до Static Maps API. Крім стандартних параметрів size, zoom і scale, URL-запит включає в себе кілька значень параметра markers. Перше - це зелений маркер, поточне місце розташування користувача. За ним слідує масив $ markers, кожен елемент якого створює червоний маркер, що відображається у відповідному місці розташування банкомату. Мітка кожного маркера ATM відповідає його автоматично генерується буквеному позначенню, що спрощує користувачеві пошук банкомату в списку по його місцю розташування на карті.

Отримане зображення міститься на сторінку другий вкладки. Ось як це виглядає:

Проблема цього підходу полягає в тому, що, коли в одному і тому ж місці багато банкоматів, маркери зливаються. Це ускладнює визначення місцеположення конкретного банкомату в кластері. Один із способів вирішення цієї проблеми - надати користувачеві можливість бачити на карті тільки один обраної банкомат, що дозволить йому легко визначити його місце розташування.

Ця зміна реалізовано в такій редакції попереднього коду:

<! DOCTYPE html> <html lang = "en"> <! - snip -> <body> <div id = "content"> <? Php // ключ API Google Maps / Places $ apiKey = 'YOUR_API_KEY'; // variables from URL request string $ latitude = isset ($ _ GET [ 'latitude'])? trim ($ _ GET [ 'latitude']): null; $ Longitude = isset ($ _ GET [ 'longitude'])? trim ($ _ GET [ 'longitude']): null; $ Selected = isset ($ _ GET [ 'selected'])? trim ($ _ GET [ 'selected']): null; // создания URL-Запитів до API з необхіднімі параметрами $ placesApiUrl = 'https://maps.googleapis.com/maps/api/place/nearbysearch/json?key='. $ ApiKey. '& Location ='. sprintf ( '% f,% f', $ latitude, $ longitude). '& Rankby = distance & types = atm'; $ MapsApiUrl = 'https://maps.googleapis.com/maps/api/staticmap?key='. $ ApiKey. '& Size = 640x480 & maptype = roadmap & scale = 2 & markers = color: green |' . sprintf ( '% f,% f', $ latitude, $ longitude); // відправки запиту в API Places (для групи банкоматів або одного обраних банкомату) $ ch = curl_init (); curl_setopt_array ($ ch, array (CURLOPT_RETURNTRANSFER => 1, CURLOPT_SSL_VERIFYPEER => 1, CURLOPT_SSL_VERIFYHOST => 2, CURLOPT_URL => $ placesApiUrl,)); $ Places = json_decode (curl_exec ($ ch)); curl_close ($ ch); $ Results = isset ($ places-> result)? $ Places-> result: $ places-> results; ?> <? Php if (count ($ results) && empty ($ selected)):?> <Div class = "alert alert-success" role = "alert"> <? Php echo count ($ results); ?> ATM (s) found. </ Div> <? Php elseif (count ($ results) &&! Empty ($ selected)):?> <Div class = "alert alert-success" role = "alert"> Selected ATM found. </ Div> <? php else:?> <div class = "alert alert-warning" role = "alert"> No ATM (s) found. </ Div> <? php endif; ?> <Ul class = "nav nav-tabs" role = "tablist"> <li class = "active"> <a href="#list" data-toggle="tab"> List </a> </ li > <li> <a href="#map" data-toggle="tab"> Map </a> </ li> <a href="index.php" class="btn btn-success"> Refresh </ a> </ ul> <div class = "tab-content"> <! - list tab -> <div role = "tabpanel" class = "tab-pane active" id = "list"> <ul class = "list-group"> <? php // перебір повернутого списку банкоматів // создания Даних для маркерів на карті // відображення найменування, Мітки и Розташування шкірного банкомату $ c = 65; foreach ($ results as $ place) {$ label = chr ($ c); if (! empty ($ selected)) {$ selArr = explode ( ':', $ selected); $ Label = $ selArr [0]; $ SelectedId = $ selArr [1]; if ($ place-> place_id! = $ selectedId) {continue; }} $ Markers [] = "markers = color: red | label:". $ Label. "|" . $ Place-> geometry-> location-> lat. ",". $ Place-> geometry-> location-> lng; $ C ++; ?> <Li class = "list-group-item"> <h3> <span class = "label label-danger"> <? Php echo $ label; ?> </ Span> <span class = "label label-default"> <? Php echo $ place-> name; ?> </ Span> </ h3> <p> <? Php echo $ place-> vicinity; ?> </ P> <a href="?latitude=<?php echo $latitude; ?> & longitude = <? Php echo $ longitude;?> & Selected = <? Php echo $ label;?>: <? Php echo $ place-> place_id;?> # map "> Pinpoint on map </a> </ li> <? php}?> <li class =" list-group-item "> <? php echo implode ( ' , ', $ places-> html_attributions); ?> </ Li> </ ul> </ div> <! - map tab -> <div role = "tabpanel" class = "tab-pane" id = "map"> <img class = "img- responsive "id =" mapImage "src =" <? php echo $ mapsApiUrl;?> & <? php echo implode ( '&', $ markers);?> "/> </ div> </ div> </ div > </ body> </ html>

Зверніть увагу, що кожен елемент списку тепер включає в себе гіперпосилання з написом «Визначити на карті». Гіперпосилання перезавантажує сторінку з усією тією ж інформацією, що і раніше, але в URL-запиті міститься додатковий параметр selected з ідентифікатором унікального розташування банкомату. Якщо в URL присутній цей параметр selected, код додатково фільтрує повернутий результуючий набір, включаючи в нього тільки вибрані ATM і відповідно генерує тільки один маркер банкомату. У цьому випадку зображення карти містить тільки поточне місце розташування користувача і цей обраний банкомат.

Ось як це Виглядає:

Останній штрих - це кнопка Refresh, яка дозволяє отримати новий перелік банкоматів, якщо користувач перемістився в нове місце. Тут немає ніякої магії: кнопка просто перезавантажує додаток без всяких відомостей про місцезнаходження, змушуючи браузер отримати і створити новий набір координат.

Крок 6. Додавання інтерактивної карти

У статичної карти є один недолік: її не можна збільшувати і зменшувати, повертати, або натискати на елементи на карті, щоб отримати додаткову інформацію. Альтернативою служить API Google Maps JavaScript, який дозволяє створювати інтерактивні карти, що реагують на події торкання або натискання кнопки за допомогою JavaScript.

Щоб використовувати API Google Maps JavaScript, потрібно включити файл вихідного коду JavaScript за допомогою наступного рядка:

Потім можна створити новий об'єкт карти наступним чином:

<Script> var mapOptions = {zoom: 18, center: new google.maps.LatLng (51.5117316, -0.1232697), mapTypeId: google.maps.MapTypeId.ROADMAP}; var map = new google.maps.Map (document.getElementById ( 'map'), mapOptions); </ Script>

І додати маркер на об'єкті карти:

<Script> var marker = new google.maps.Marker ({position: new google.maps.LatLng (51.5117316, -0.1232697), map: map, title: 'My Location',}); marker.setMap (map); </ Script>

Це призведе до створення нової карти з центром в Ковент-Гарден і масштабом 18. Карта автоматично приєднується до елементу DOM map, який повинен бути присутнім в коді HTML-сторінки.

Звичайно, це тільки вершина айсберга: в API Google Maps JavaScript багато всього, і тут це не охопити. Погляньте на довідкову документацію, і ви зрозумієте, як легко змінити попередній сценарій і замінити статичну карту динамічної за допомогою API JavaScript. Відредагований код виглядає наступним чином:

<! DOCTYPE html> <html lang = "en"> <! - snip -> <body> <div id = "content"> <? Php // ключ API Google Maps / Places $ apiKey = 'YOUR_API_KEY'; // змінні з рядка URL-запиту $ latitude = isset ($ _ GET [ 'latitude'])? trim ($ _ GET [ 'latitude']): null; $ Longitude = isset ($ _ GET [ 'longitude'])? trim ($ _ GET [ 'longitude']): null; $ Selected = isset ($ _ GET [ 'selected'])? trim ($ _ GET [ 'selected']): null; // створення URL-запиту до API з необхідними параметрами $ placesApiUrl = 'https://maps.googleapis.com/maps/api/place/nearbysearch/json?key='. $ ApiKey. '& Location ='. sprintf ( '% f,% f', $ latitude, $ longitude). '& Rankby = distance & types = atm'; // відправка запиту в API Places (для групи банкоматів або одного обраного банкомата) $ ch = curl_init (); curl_setopt_array ($ ch, array (CURLOPT_RETURNTRANSFER => 1, CURLOPT_SSL_VERIFYPEER => 1, CURLOPT_SSL_VERIFYHOST => 2, CURLOPT_URL => $ placesApiUrl,)); $ Places = json_decode (curl_exec ($ ch)); curl_close ($ ch); $ Results = isset ($ places-> result)? $ Places-> result: $ places-> results; ?> <? Php if (count ($ results) && empty ($ selected)):?> <Div class = "alert alert-success" role = "alert"> <? Php echo count ($ results); ?> ATM (s) found. </ Div> <? Php elseif (count ($ results) &&! Empty ($ selected)):?> <Div class = "alert alert-success" role = "alert"> Selected ATM found. </ Div> < ? php else:?> <div class = "alert alert-warning" role = "alert"> No ATM (s) found. </ div> <? php endif; ?> <Ul class = "nav nav-tabs" role = "tablist"> <li class = "active"> <a href="#list" data-toggle="tab"> List </a> </ li > <li> <a href="#map" data-toggle="tab"> Map </a> </ li> <a href="index.php" class="btn btn-success"> Refresh </ a> </ ul> <div class = "tab-content"> <! - ATMs as list -> <div role = "tabpanel" class = "tab-pane active" id = "list"> <ul class = "list-group"> <? php // перебір повернутого списку банкоматів // створення даних для маркерів на карті // відображення найменування, мітки і розташування кожного банкомату $ c = 65; foreach ($ results as $ place) {$ label = chr ($ c); if (! empty ($ selected)) {$ selArr = explode ( ':', $ selected); $ Label = $ selArr [0]; $ SelectedId = $ selArr [1]; if ($ place-> place_id! = $ selectedId) {continue; }} $ Markers [] = array ( 'title' => $ label. ':'. $ Place-> name, 'lat' => $ place-> geometry-> location-> lat, 'lng' => $ place-> geometry-> location-> lng,); $ C ++; ?> <Li class = "list-group-item"> <h3> <span class = "label label-danger"> <? Php echo $ label; ?> </ Span> <span class = "label label-default"> <? Php echo $ place-> name; ?> </ Span> </ h3> <p> <? Php echo $ place-> vicinity; ?> </ P> <a href="?latitude=<?php echo $latitude; ?> & longitude = <? Php echo $ longitude;?> & Selected = <? Php echo $ label;?>: <? Php echo $ place-> place_id;?> # map "> Pinpoint on map </a> </ li> <? php}?> <li class =" list-group-item "> <? php echo implode ( ',' , $ places-> html_attributions); ?> </ Li> </ ul> </ div> <! - ATMs on map -> <div role = "tabpanel" class = "tab-pane" id = "map"> </ div> </ div> </ div> <script type = "text / javascript" src = "https://maps.googleapis.com/maps/api/js?key=<?php echo $ apiKey;?>"> </ script > <script> $ (document) .ready (function () {var mapOptions = {zoom: 18, center: new google.maps.LatLng (<? php printf ( "% f,% f ', $ latitude, $ longitude );?>), mapTypeId: google.maps.MapTypeId.ROADMAP}; var map = new google.maps.Map (document.getElementById ( 'map'), mapOptions); var marker = new google.maps.Marker ({ position: new google.maps.LatLng (<? php printf ( "% f,% f ', $ latitude, $ longitude);?>), map: map, title:' Current Location ', icon: {path: google .maps.SymbolPath.CIRCLE, scale: 10, strokeColor: 'green',}}); marker.setMap (map); var infowindow = new google.maps.InfoWindow ({content: 'None'}); <? php foreach ($ markers as $ marker):?> var marker = new google.maps.Marker ({position: new google.maps.LatLng (<? php echo $ marker [ 'lat'];?>, <? php echo $ marker [ 'lng'];?>), map: map, title: '<? php echo $ marker [' title ']; ?> '}); marker.setMap (map); google.maps.event.addListener (marker, 'click', function () {infowindow.setContent ( '<strong>' + this.getTitle () + '</ strong>'); infowindow.open (map, this) ;}); <? Php endforeach; ?> $ ( "A [href = '# map']"). On ( 'shown.bs.tab', function () {google.maps.event.trigger (map, 'resize');}); }); </ Script> </ body> </ html>

Багато що з цього здасться вам знайомим по попередньої, статичної версії коду. Основна відмінність пов'язано з тим, як створюється карта: замість запиту до API Google Static Maps, який повертає зображення, ця версія коду завантажує API Google Maps JavaScript і використовує його для створення і візуалізації карти з необхідними маркерами. Нижче перераховані основні зміни:

по-перше, масив $ markers заповнюється інакше, так що кожен елемент являє собою один з банкоматів, що повертаються API Google Places. Кожен елемент масиву містить інформацію про ім'я банкомату, його широтою та довготою;
потім код JavaScript в кінці сторінки, використовуючи цю широту і довготу, створює новий об'єкт Map, який передається в URL-запиті, і поміщає його на другу вкладку сторінки. Він також створює об'єкт InfoWindow, який містить інформацію про обраний банкоматі в будь-якій заданій точці;
нарешті, PHP-цикл foreach () перебирає масив $ markers, обробляє місця розташування банкоматів і для кожного місця розташування банкомату створює JavaScript-об'єкт Marker. Потім ці об'єкти Marker приєднуються до Map, причому кожному призначається прослуховувач подій click. Коли Marker отримує подія click, об'єкт Прослуховувач оновлює зміст InfoWindow, вставляючи ім'я обраного ATM, і відображає його.

Ось як це Виглядає:

Крок 7. Розгортання в Bluemix

Тепер, коли код додатка готовий, на останньому етапі його потрібно розгорнути. Звичайно, якщо зробити це локально, то все буде в порядку - додаток можна буде використовувати як зазвичай. Однак щоб розгорнути його в Bluemix, вам знадобиться обліковий запис Bluemix і доведеться завантажити і встановити клієнт командного рядка Cloud Foundry. Для завершення процесу розгортання виконайте наступні дії.

Створіть маніфест додатка. Файл маніфесту додатки вказує Bluemix, як розгортати додаток. Зокрема, він вказує середовищі виконання PHP (buildpack-пакет), що слід використовувати. Створіть цей файл в $ APP_ROOT / manifest.yml, заповнивши його наступною інформацією. --- applications: - name: atm-finder- [random-number] memory: 256M instances: 1 host: atm-finder- [random-number] buildpack: https://github.com/dmikusa-pivotal/cf- php-build-pack.git
Не забудьте відредагувати імена хоста і додатки, щоб зробити їх унікальними, - змінивши їх або додавши випадкове число. Я використовую buildpack-пакет CloudFoundry PHP, хоча є й інші варіанти.
Увійдіть в Bluemix і розгорніть додаток. Для входу Bluemix за допомогою імені користувача та пароля IBM використовуйте інтерфейс командного рядка cf: shell> cf api https://api.ng.bluemix.net shell> cf login
Перейдіть в каталог $ APP_ROOT і опублікуйте додаток в Bluemix:
shell> cf push
Ось приклад того, що ви побачите в ході цього процесу.

Тепер ваше застосування повинне бути розгорнуто Bluemix. Щоб запустити його, введіть в браузер адреса хоста з маніфесту свого застосування - наприклад, http: // atm-finder- [випадкове число] .mybluemix.net. Або натисніть кнопку Запустити програму на початку цієї статті, щоб спробувати демо-додаток.

Висновок

Як демонструє ця стаття, Bluemix забезпечує міцний фундамент для створення і розгортання мобільних додатків на хмарної платформі. Додайте PHP, Bootstrap і jQuery, і у вас буде надійний інструментарій для створення динамічних інтерактивних мобільних веб-додатків.

Весь код, реалізований в цій статті, можна завантажити зі сховища JazzHub разом з файлами конфігурації для buildpack-пакета PHP, використовуваного в цій статті. Я рекомендую отримати код, пограти з ним і спробувати додати до нього нові функції. Я гарантую, що ви нічого не зламаєте і напевно придбаєте нові знання.

Ресурси для скачування

Схожі тими

Підпішіть мене на ПОВІДОМЛЕННЯ до коментарів

Готово?
Com/maps/api/place/nearbysearch/json?
Snip -> <body> <div id = "content"> <?
Php // якщо широти або довготи немає, // Спробуємо пошук за допомогою засобів геопозиционирования браузера if (empty ($ latitude) || empty ($ longitude)) {?
Location = '?
Longitude;} function handle_error (e) {alert ( 'An error occurred during geo-location. ');}}); </ Script> <?
Php exit; }?
Snip -> <body> <div id = "content"> <?
Php // ключ API Google Maps / Places $ apiKey = 'YOUR_API_KEY'; // змінні з рядка URL-запиту $ latitude = isset ($ _ GET [ 'latitude'])?
Trim ($ _ GET [ 'latitude']): null; $ Longitude = isset ($ _ GET [ 'longitude'])?

IRC-сервер - Irc.Online.com.ua