サーバー構築不要！スマートフォンアプリ向けの新クラウド

トップ >ドキュメント >チュートリアル（JavaScript & Monaca）:Monacaでチェックインアプリを作成する

チュートリアル（JavaScript & Monaca）

Monacaでチェックインアプリを作成する

概要


※本チュートリアルは、各種バージョンアップに未対応のため、現在正常に動作しておりません。
改修を進めておりますので、更新が完了するまで今しばらくお待ちください。

今回のチュートリアルでは、

  • 位置情報の検索
  • データストアへのオブジェクト登録

を利用して任意の場所をスポットとして登録していくチェックインアプリを作成します。

チェックインアプリの作成

チェックインアプリの作成については、以下のスライドを参考に作業を進めてください。
(mobile backendのアカウント登録がまだの方は、こちらから無料アカウントの登録を行ってください。)

スライドで利用しているMonacaプロジェクトは以下で公開しております。

NIFCLOUD-mbaas/LocationDemo

GoogleMapへのスポット表示

Google Map APIを利用する準備

GoogleのAPIコンソールにアクセスします。

左メニューでAPIを選択して、Google Maps JavaScript API v3を探します。
apiの一覧画面

APIの設定画面を開いたら、APIをオンに設定してください。
google map javascript apiの設定画面

Monacaで使用するAPIキーを用意します。
左メニューで認証情報を開き、「新しいキーを作成」をクリックします。
ブラウザキーを選択して新しくキーを作成してください。
キーの作成

地図を表示させる

ここまでは、スポットを検索するとスポット名が一覧で出てくるものでした。
ここからはスポットの位置ををGoogle Mapに表示させていきます。

Monacaでindex.htmlを開き、Google map APIを読み込むようにします。
以下のscriptタグを追加するのですが、YOUR_API_KEYの部分は
Google APIコンソールで作成したブラウザキーに置き換えます。

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&sensor=false"
  type="text/javascript"></script>

Google mapを表示するタグを用意します。
page1.htmlのidがresultに指定されている部分を、map_canvasに変更します。

変更前

<div id="result"></div>

変更後

<div id="map_canvas" style="width:100%; height:400px;"></div>

app.jsを修正して、pタグを書き換える部分をmapの表示とマーカー作成メソッドの呼び出しに変更します。
searchメソッドの下側にmobile backendからデータを検索したあとに行う処理を書いているところがあります。
そこを以下のように変更します。

変更前

//mobile backend上のデータ検索を実行する
query.find({
    success: function(points) {
        $("#result").html("");
        // 検索が成功した場合の処理
        for (var i = 0; i < points.length; i++){
            var point = points[i];
            $("#result").append("<p>店名：" + point.get("name") + "</p>");
        }
    },
    error: function(error) {
        // 検索に失敗した場合の処理
        console.log(error.message);
    }
});

変更後

//mobile backend上のデータ検索を実行する
query.find({
    success: function(points) {
    ///////////////// ここから変更部分 ////////////////////
        // 検索が成功した場合の処理

        //Google mapの設定
        var mapOptions = {
              //中心地設定
              center: new google.maps.LatLng(current.geopoint.latitude,current.geopoint.longitude),
              //ズーム設定
              zoom: 15,
              //地図のタイプを指定
              mapTypeId: google.maps.MapTypeId.ROADMAP
            };

        //idがmap_canvasのところにGoogle mapを表示
        var map = new google.maps.Map(document.getElementById("map_canvas"),
            mapOptions);

        for (var i = 0; i < points.length; i++){
            var point = points[i];
            console.log("<p>店名：" + point.get("name") + "</p>");

            //位置情報オブジェクトを作成            
            var location = point.get("geo");
            var myLatlng = new google.maps.LatLng(location.latitude,location.longitude);

            //店舗名、位置情報、Google mapオブジェクトを指定してマーカー作成メソッドを呼び出し
            markToMap(point.get("name"), myLatlng, map);
        }
    ///////////////// ここまで変更部分 ////////////////////
    },
    error: function(error) {
        // 検索に失敗した場合の処理
        console.log(error.message);
    }
});

マーカーを作成するmarkToMapは以下のようになります。

function markToMap(name, position, map){
    var marker = new google.maps.Marker({
        position: position,
        title:name
    });
    marker.setMap(map);
    google.maps.event.addListener(marker, 'click', function() {
        var infowindow = new google.maps.InfoWindow({
            content:marker.title
        });
        infowindow.open(map,marker);
    });
}

ここまででアプリを実行してみましょう。
mobile backendから検索された店舗情報がGoogle mapにマッピングされ、
マーカーが表示されます。
アプリの実行画面

お探しの内容が見つからなかった場合はユーザーコミュニティ もご活用ください。（回答保証はいたしかねます）
なお、 Expertプラン以上のお客様はテクニカルサポートにてご質問を承らせて頂きます。

推奨画面サイズ1024×768px以上

ページの先頭へ