Google Maps API PHP連携 〜マップ情報をDBに登録する〜

Html -> DB

Google Maps APIを使用して地図を表示する画面の作成を行いました。

こんな感じです。

PHP連携

この画面の下部分にデータを登録するための入力部分があります。ここの入力をサーバー(PHP)へ送信してDBに登録します。
クライアントサイド(HTML)は作成したので次はリクエストを送信したときにデータを受け取りDBに登録する処理(PHP)を作成します。
ちょいメモ
実は画面からリクエストを送信する部分(ボタン)ですがまだ作ってません。。。

PHP作成

参考にするサイトはこちらです。PHPマニュアルです。。。

関連ページ(PHP)

  1. PHP PDO 〜MySQLにアクセスする〜
  2. PHP Ajax 〜DBに登録したデータを受信する〜
  3. Google Maps API PHP連携 〜マップ情報をDBに登録する〜
  4. PHP Image File 〜iPhoneやAndroidでの画像送受信の問題〜
  5. AngularJS Routing 〜PHPをWeb APIにする〜
  6. WordPress PHPカスタム〜根本的に見た目を変える〜
  7. WordPress PHPカスタム〜根本的に見た目を変える2〜
  8. Eclipse PHPプラグイン 〜ElipseでWordPress環境を構築〜
  9. WordPress テスト実装 〜heade-test.phpを表示〜
  10. AngularJS + PHP 〜WordPressと連携する〜
  11. AngularJS + PHP 〜AngularJSの実装〜
  12. AngularJS + PHP 〜AngularJSの実装2〜
  13. WordPress 処理解析 ~index.phpを眺める~


JS Google Maps API 〜GeoLocation 現在位置の取得〜

Google Maps API

現在位置の取得処理でつまづいたのでメモです。
GoogleMapを作成して、現在位置の取得メソッド(監視メソッド)を使用するときの実装サンプルです。

function getCurrentPos() {
    if (navigator.geolocation == false) {
        console.log("GEO Locaion is unable.");
        return;
    }
    // オプション・オブジェクト
    var optionObj = {
        "enableHighAccuracy": false ,
        "timeout": 5000 ,
        "maximumAge": 0 ,
    };
    target = {
        latitude: 0,
        longitufe: 0
    };
    // Navigator.geolocation
    id = navigator.geolocation.watchPosition(
        successCurrentPos // 成功時のコールバック
        , errorCurrentPos // 失敗時のコールバック
        , optionObj); // オプション設定

}

そして、現在位置を取得してその位置を表示する処理は。はじめは以下のようなコードでした。>はじめは以下のようなコードでした。

/** GeoLocationの成功時のコールバック */
function successCurrentPos(position) {
    var crd  = position.coords;
    // マップの位置情報オブジェクト
    var mapLatLng = new google.maps.LatLng(crd.latitude, crd.longitude);

    if (target.latitude === crd.latitude && target.longitude === crd.longitude) {
      console.log('Congratulations, you reached the target');
      navigator.geolocation.clearWatch(id);
    }
    // マーカーの追加
    var current = new google.maps.Marker({
        map: map,
        position: mapLatLng
    });
    console.log("test");
}

しかし、これだと以下のようなエラーメッセージが出ました。
this.setValues is not a function
「なんでぢゃ〜」と叫びはしませんでしたが、結構手間取りました。そして[こちらのページ](https://stackoverflow.com/questions/36598503/error-this-setvalues-is-not-a-function-in-js-code-use-google-map-api)を参照すると
newが抜けてるよ」というアドバイスがあり。。。
同じようにして修正したら直しました。
そしてついでなので、このままオプションの変更をしない状態だと、毎度おなじみのオーバーレイが表示されるので、そいつを別のものに変更したいと思い以下のようにオプションを設定してやるとできました。

// マーカーの追加
var current = new google.maps.Marker({
    map: map,
    position: mapLatLng,
    icon: './mapImg/you.png' // ファイルの指定
});

![自作アイコンの追加](https://pbs.twimg.com/media/D_bqqRaU8AIAOit.jpg:large)
でわでわ。。。



PHP Ajax 〜DBに登録したデータを受信する〜

イントロダクション

前回は、PDOを使用してMySQL(DB)に画面から入力したデータを登録しました。
今回は、登録したデータを画面に表示する処理を実装しようと思います。

処理イメージ

<画面>

<サーバー>

こんなイメージです。サーバー側の処理としては登録した地図情報を全部リロード(再描画)する方法と追加した情報のみを描画する方法の2種類ありますが、起動してみた結果で判断するか。。。
ちょっと悩みどころです。

地図をリロードする方法

これは、単純に地図データをリフレッシュするので綺麗に再描画されます。その代わりデータが増えると重くなるかもしれないです。
<対策>
逆に初期表示をちゃんとメモリも考慮した形で実装すれば問題ありません、

追加した情報のみ再描画する方法

これは、更新する部分が少なくパフォーマンスも良いのですが、表示済みの地図情報間でのリンクなど関連する情報があるときに問題が発生します。
<対策>
表示する地図データに関してそれぞれを独立させつつも、連携取るための仕組みをきちんと考える。

関連ページ

  1. PHP PDO 〜MySQLにアクセスする〜
  2. PHP Ajax 〜DBに登録したデータを受信する〜
  3. Google Maps API PHP連携 〜マップ情報をDBに登録する〜
  4. PHP Image File 〜iPhoneやAndroidでの画像送受信の問題〜
  5. AngularJS Routing 〜PHPをWeb APIにする〜
  6. WordPress PHPカスタム〜根本的に見た目を変える〜
  7. WordPress PHPカスタム〜根本的に見た目を変える2〜
  8. Eclipse PHPプラグイン 〜ElipseでWordPress環境を構築〜
  9. WordPress テスト実装 〜heade-test.phpを表示〜
  10. AngularJS + PHP 〜WordPressと連携する〜
  11. AngularJS + PHP 〜AngularJSの実装〜
  12. AngularJS + PHP 〜AngularJSの実装2〜
  13. WordPress 処理解析 ~index.phpを眺める~



JS Google Maps API 〜オリジナル・データマップを作ろう〜

Google Maps APIを使う

Google Maps API(javascript版)を使用して便利な地図アプリを作成します。そのためにGoogleのAPIを使用するための手続きをやります。
参考サイトはこちらです。

手順1

とりあえずはこちらのサイトを開きます。

そして、下のようなアイコンがあるのでそれをクリックします。

見つからない場合は下のように

をクリックして

GoogleMapを選択します。そして詳細をクリック

認証情報を作成

APIキーを選択

こんな感じでできました。

以下のような形で一定量は無料で使えます。詳細はGoogleに聞いてみるしかなさそうです。。。(Google Japanあたり?)

実装

HTMLで表示するので、JavaScriptでの実装を行います。
そしてこちらがJSのドキュメントです。JavaとかそこらへんのAPIも揃えているようなので、目移りしてしまいますね(笑)

そして英語のなので当然! Google翻訳でドキュメントを読みます。

嬉しいことに

上記のドキュメントサイトにサンプルコードがありました。
このコピーしたコードの32行目に以下のようなコードがあります。

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY" callback=initMap''
async defer></script>

ここの「YOUR_API_KEY」を上記で作成(取得)したキーを貼ります。その実行結果がこちらです。シドニーが表示されています。オーストラリア。。。いいですね。ジンギスカンですか。。。

とりあえずは初期表示ハローGoogle Mapと言うことで。。。

しかしエラーが

画面を表示して一瞬は正常に表示されたけどAPIキーの設定がまだだったのでエラー。。。

APIキーの設定をする

デフォルトの状態ではAPIの制限などが入っていないので問題ないのですが、自分は以前使用したものがありウェブサイトの指定を行なっていました。
なので今回使用するURLを追加しました。

最後に「*」アスタリスクをつけないとサブディレクトリが対象に含まれません。。。

アカウントを有効化

この作業を行わないとAPIキーが有効になりません。ちょっとためらうのが「支払い設定」でした。
しかし、入力するページには下のような文言があり、無料での使用は可能だと言うことがわかります。「有料アカウントに手動でアップグレードしない限りは・・・」と言う記載があります。

そんなわけで、入力を続けていくと下のような画面が出てきます。これで設定完了!

そして、URLの制限などがないことを確認します。
そして表示!

まだエラーが。。。

画面の表示はできるけど、シドニー(オーストラリア)は表示できるけど、日本は表示できない事件がありました。
原因は

{lat: 141.33432, lng: 141.434334}

のように北緯の値が90度以上になっていて表示できなかったというわけでした。
正しくは

{lat: 43.064157, lng: 141.353364};

でした。

追伸

Google Mapの座標を取得するページでの経度と緯度の値部分の順番がそのままではないので注意です。

lat: 経度
lng: 緯度

でわでわ。。。

関連ページ

  1. Github page 〜Github pageでリポジトリの情報を公開しよう〜
  2. 夢を形にする① 目標ブレーク〜じゃんけんゲームの場合〜
  3. プログラム 習得 順序1 概要
  4. Github page 〜Github pageでリポジトリの情報を公開しよう〜
  5. Github 使い方〜リポジトリにライセンスを設定する〜
  6. Github 使い方〜Issueでやることを整理〜