著者：セルゲイ・マトヴェンコ
あるプロジェクトの投資家が私のところに来て、「Googleマップで旅行プランナーを作ろう！」と言ったら、私は同意しました。 その後、投資家は、テクニカルディレクターがこのスケジューラのアーキテクチャをどのように想像したかを話し始めました。彼は、サーバーとの通信、APIキー、Googleへのリクエスト、リクエストに対するお金など、多くのことについて何かを言いました。 。 しかし、その後、Google APIドキュメントを注意深く読み始め、突然サーバーが必要ないことに突然気付きました。 一般的に！ スケジューラ全体をクライアントで実行できます。 そして、最も興味深いのは、APIキーがなくても実行できることです（JS APIを使用する場合）。 その結果、2日間で、サーバーを使用せずに、Google APIに基づいたクライアント側のロジックを使用して、このようなスケジューラを作成することができました。 すべてが非常にシンプルであることが判明しました。
この種の最も単純なスケジューラをわずか数時間で作成する方法を説明します。 もちろん、この間はプロトタイプのみを組み立てることができますが、主なことはそれが機能することです！ その主な機能は、関心のある都市の観光スポット間の最適なルートを設定することです。 日ごとの旅行計画の内訳が存在する場合があります。 すべてがGoogle Maps / Places APIを使用してAngularJSで行われます。 このAPIを使用する機能と、ドキュメントに記載されていない機能の一部について説明します。 また、クライアントアプリケーションへのロジックの割り当てについても説明します。
それで、そのようなプランナーは正確にどのように見えるでしょうか？ ブラウザの検索バーになり、そこに都市名や興味のある場所を入力します。 このような検索クエリに応じて、Googleマップ上のこの場所、この場所とその周辺の観光スポットのリスト、説明、写真、レビューが提供されます。 そして、もちろん、観光地の間で、最適なルートがGoogleマップにレイアウトされ、それらの間のおおよその移動時間が示されます。 また、日ごとにアトラクションを訪れる計画を分割する機能を簡単に追加することもできます。
何が必要ですか？
まず、 Google プレイスライブラリが必要です。 これは、スケジューラーの動作を保証する最も重要なことです。
<script src="https://maps.googleapis.com/maps/api/is?libraries=places&language=en"></script>
Auto Placeは、AngularJSにとって非常に便利なプロジェクトで、Google Placesライブラリをラップし、オートコンプリートで動作します。 RawgitはGitHubのバインディングであり、CDNもあります。
<script src="https://rawgit.com/kuhnza/angular-google-places-autocomplete/0.2.7/src/autocomplete.js"></script>
実際はAngularJSです。
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
ブートストラップです。
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
jQuery Bootstrapが必要ですか。
<link rel="stylesheet" href=https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> <link rel="stylesheet" href=https://rawgit.com/kuhnza/angular-google-places-autocomplete/master/dist/autocomplete.min.css">
これらは 、オートコンプリートとブートストラップのスタイルシートです。
それは私たちが持っているすべての外部です。 これらはすべてCDNから読み込まれます-サーバーはまったく必要ありません！
地図上の場所を探しています
次に、地図上で関心のある都市を検索してみましょう。 これがオートコンプリートの使用方法です。
<input type="text" class="form-control input-lg" g-places-autocomplete ng-model="destinationData" placeholder="Enter destination"> <button ng-click="showDestination = !showDestination" class="btn btn-block btn-default btn-xs">destinationData</button> <pre ng-show="showDestination">{{destination|json}}</pre> <div id="map" style="height: 200px;"></div>
ご覧のとおり、ここには1つの入力があります。
<input type="text" class="form-control input-lg" g-places-autocomplete ng-model="destinationData" placeholder="Enter destination">
したがって、Google Places Autocomplete Angularプロジェクトのおかげで、オートコンプリートが機能します。 これは、（エラーがあっても）検索フォームに場所の名前の入力を開始できることを意味し、検索で適切なオプションが提供されます。
その結果、Googleマップ上に場所の表示がある場所を検索しました。
次は？
近くのアトラクションを探しています
以前（バージョン3より前）、Google APIの場所での検索は1つの方法で実行されました-多くのパラメーターがあり、すべてが非常に複雑でした。 現在、検索は3つの方法に分かれています。 特に、専用のレーダー検索が登場しました-近くの興味深い場所の検索です。 以前は、都市や国が検索結果で見つかったため、そのような場所は追加でフィルタリングする必要がありました。 そして今、すべてがシンプルです。
彼はどのように働いていますか？
Googleは通常、地図に検索結果をすぐに表示することを提案しています。 しかし、実際には、最も近い場所のリストを取得したいだけなので、今は必要ありません。 したがって、半径50 km以内の地図なしでレーダー検索（
service.radarSearch
）を使用します。これは、都市とその周辺の通常の半径です。 博物館、教会、ナイトクラブ、動物園などの一般的な観光地を探します。これらはGoogle
types
としてリストされてい
types
。
$scope.destinationOptions = { location : destination.geometry.location, radius : 50000 }; $scope.popularPoints = []; $scope.map = new google.maps.Map(document.getElementById('map'), { center : $scope.destinationOptions.location, zoom : 5 }); var service = new google.maps.places.PlacesService($scope.map); var radarOptions = { location : $scope.destinationOptions.location, radius : $scope.destinationOptions.radius, types : [ 'airport', 'amusement_park', 'aquarium', 'art_gallery', 'casino', 'church', 'city_hall', 'courthouse', 'hindu_temple', 'library', 'museum', 'night_club', 'park', 'stadium', 'synagogue', 'university', 'zoo' ] }; service.radarSearch(radarOptions, function(points) { points.slice(0, 8).forEach(function(point) { service.getDetails({ placeId : point.place_id }, function(details) { $scope.popularPoints.push(details); }); }); $scope.$digest(); });
そのため、レーダー検索のリクエストを取得し、レンダラーを使用してマップの操作を開始する代わりに、すべてをAngularで取得し、検索により8つの最初の場所が得られます（そして200の結果が返されます）。 すぐに、同じサービスを使用して、場所に関する詳細をリクエストし、角度スコープに追加します：
$scope.popularPoints.push(details)
。
そこで、検索を行いました。地図上で場所を見つけると、半径50 km以内のすべてのアトラクションのリストがすぐに表示されます。 また、必要に応じて、このリストを展開し、この場所の画像、評価のあるユーザーのさまざまな詳細やコメントを表示できます。
ルートを取得
しかし、検索結果に最高のアトラクションを表示しただけでは、投資家は不満に思うでしょう。これらの場所への最適なルートを計画したいからです。 したがって、検索結果の下に、このルートを表示できるボタンがあります。 彼女はどのように働いていますか？
ここでも、Googleがすべてを行ってくれたことがわかりました。ルートを計画し、敷設するためのGoogleマップメカニズムへの完全なインターフェースを、中間点まで提供します。 しかし、私の友人の何人かが言いたいように、ここでのAPIは「捕食者にとって異質」です。 なぜなら、ポイントのリストがあれば、それらを一緒に渡し、それらに乗るつもりだと言いたいからです。 しかし、これは起こらないことがわかりますが、1つの場所でのみ開始し、他の特定の場所で終了し、内部でスライスを使用して中間点をフックする必要があります。
$scope.tripCalc = function() { var directionsService = new google.maps.DirectionsService(); directionsService.route({ origin : $scope.points[0].geometry.location, destination : $scope.points[$scope.points.length - 1].geometry.location, waypoints : $scope.points.slice(1, $scope.points.length - 1).map(function(point) { return { location : point.geometry.location }; }), travelMode: google.maps.TravelMode.DRIVING }, function(result) { $scope.route = result; $scope.$digest(); }); }
しかし、抜け道を見つけました-その人が休んでいるホテルへのルートの開始点（
destination
）と終了点（
destination
）を閉じました。 その後、別のホテルで夜を過ごすことができることを考慮して、日ごとに内訳も作成しました。 つまり、たとえば、出発点は空港、2番目はレンタカーポイント、最後は1泊目のホテルになります。 また、昼食のために昼間にレストランを探すことができるように道順を取得することもできます。 これらすべてのポイントは、Google Maps APIへのリクエストで適切なタイプを示すことで取得できます（
types
パラメーター）。 実際、これは単純なプログラミングタスクです。オブジェクトの配列を作成し、
waypoints
反映します。 完成したルートを取得します。
最も興味深く、最も楽しいのは、ルート上の2つのポイント間の移動に費やされる距離と時間を表示する機能です。 これは、たとえば、ポイント間を6時間移動する場合、これは途中でレストランを見つけるためのヒントであり、夜中を行く場合はホテルに伝えておくとよいことを意味します。 これはすべてクライアントで行われます。
サーバーが必要ですか？
そして、この旅行プランナーを行ったときに生じた興味深い議論になります。 これらすべてをサーバーに保存しますか？ ユーザーが探していたものを知る必要がありますか？
実際、私たちが興味を持っているのはただ1つです。ユーザーが私たちに売りたいものを注文するためです。 ユーザーに何を売りたいかは言いませんが、たとえば、このプランナーで選択したホテルの部屋などです。 概して、このプランナーは単に付加価値、付加価値、ホテルの部屋を販売するサイトでの便利なサービスです。 つまり、サーバーに何も保存する必要はありません。すべてクライアントで実行できます。 したがって、ルートを計画するときにこれらのホテルが表示されているホテルの部屋を予約するためのボタンを簡単に固定できます。
もちろん、まだ何らかの分析が必要な場合がありますが、ここでもGoogleアナリティクスを使用すればサーバーなしで実行できます。 そのため、たとえば、ユーザーが最も多く検索した場所を知る必要がある場合、検索テキストはHTML5 APIを介してURLに簡単にジャンプでき、Googleアナリティクスがそれを取得します。
他のすべては本当に私たちを悩ませません。 ページをアドバタイズして、Googleに負荷を処理させることができます。この場合、1つのIP、つまりユーザーからのリクエストの数のみが制限されます。 Amazon S3にページを配置できますが、負荷についてはまったく考えられず、広告キャンペーンでサーバーを配置できるとは考えられません。 ユーザーからのフィードバックを追加すると、ユーザーは何らかの種類のインタラクティブなサイトに結び付けられ始め、実際にはすべて外部からダウンロードされます。
スケジューラを実際に実行しました-もう少し、販売することができます。
実際、最も効果的なのは、まさにこれらのインターフェイスの編成方法です。 今では大手サプライヤーが本当にすべてを行っているので、何も心配する必要はありません。 たとえば、過去2年間、友人が彼らのためにWebサイトを作成する方法を尋ねたとき、私は彼らに「ブログスポットに行く」より良い答えはできませんでした。 結局のところ、すべてがそこにあります！ したがって、Googleマップは必要なすべてを提供します。 しかし、どのような条件下で？
GoogleMaps API利用規約
Google Maps APIの公式の説明を流readに読んだ場合、Googleマップのどこかですべてが発生しているように思えるかもしれません。何かを描画し、何もしないでください。 しかし、注意深く読むと、Googleによると、大まかに言えば、下隅にGoogleロゴを描き、あらゆる種類の使用条件にリンクするだけです。 Googleが必要なすべてのデータを提供してくれたので、独自のマップを描画して、必要に応じてこのデータをプッシュすることもできます。 そのため、サイト上でJavaScriptを使用して、サーバーなしで何でもできます。
プロジェクトソース
要点