googlemapのinfowindowでの表示について

Question

◆前提
スマホで取得した位置情報をgooglemapで可視化。近隣店舗の情報を提示するサイトを制作しています。使用言語はhtml/css/javascript/php/mysqlです。

◆やりたいこと
①複数の位置情報（配列化した緯度経度）を読み込み、map上にマーカーを配置。
②マーカーをタップするとinfowindowが開き、都市名とボタンを表示。
③ボタンをタップすると都市名をphpにget送信。
④php側で処理した情報（近隣店舗）を返却し、当該infowindow内に表示。

◆現状
近隣店舗の情報生成は後回しで、ステップとして試験的に「③で都市名ではなく数値（緯度）を送信。phpで緯度に文字列（return）を足して返却する」という動きを作っている中で、問題にあたりました。

◆問題点と発生手順
最初に開いたinfowindowだけ「緯度+return」が表示されない（③の送信または④の返却がされない）

1. 初期状態でマーカーを複数個表示。infowindowはどれも開いていない。
2. どのマーカーをタップしてもinfowindowは開き正しい情報とボタンが表示される。
3. しかしボタンをタップしてもなにも表示されない。
4. そのまま別のマーカーをタップするとinfowindowが開き、同時に手順2のinfowindowは閉じる。開いているinfowindow内のボタンをタップすると、都市名が返却され、表示される。つまり想定通りに挙動する。
5. そのまま、さっきうまくいかなかったマーカーをもう一度試すと、手順4の動きになる。どのマーカーを試しても同じように手順4の動きになる。
6. しかしいったんinfowindowを閉じる（×をタップする）と、以降は同じ問題が発生する。つまり状態として手順1に戻り、次に開いたinfowindowは手順3の状態になる。

◆以下コードから、問題点の原因についてご指摘いただけると幸いです。
最初に開いたinfowindowでも滞りなく数値を送信し返却された情報を表示できるようにしたいです。

locations[i][0]:緯度
locations[i][1]:経度
locations[i][2]:都市名

function initialize() {

	//位置情報の配列
	 var locations = <?php echo json_encode($result); ?>;

	//Map
	var map = new google.maps.Map(document.getElementById('map_canvas'));
	var bounds = new google.maps.LatLngBounds();
	var infoWindow = new google.maps.InfoWindow({
		maxWidth: 200
	});
	var marker;

	//位置情報の配列からマーカー表示
	for (var i = 0; i < <?php echo $row_count;?>; i++) {
	  marker = new google.maps.Marker({
	    position: new google.maps.LatLng(locations[i][0], locations[i][1]),
	    map: map,
			animation: google.maps.Animation.BOUNCE
	  });

  // 地図表示領域をマーカー位置に合わせて拡大
  bounds.extend (marker.position);

	//マーカーをクリックしたらinfowindowを表示
	  google.maps.event.addListener(marker, 'click', (function(marker, i) {
	    return function() {
				//infowindowの中身
	      infoWindow.setContent(
					'<div style="text-decoration:none;"><input type="text" id="request_lat" value="'+locations[i][0]+'" hidden><img id="request" src="./img/heart.png" width="40" height="40" align="right"></img>'
					+
					locations[i][2]
					+
					'<div id="return"></div>'
				);//end_infoWindow.setContent(


				$('#request').click(function(){    //id属性requestの要素がclickされたら
						$.get('request.php', {         //GETでrequest.phpに対して
							 position:$('#request_lat').val()     //id属性request_latの要素を
								}, function(data){      //コールバック関数functionの引数として渡す。
								$('#return').html(data.return_position);   //戻り値はid属性resultにhtml表示
						});
				});

	      infoWindow.open(map, marker);

	    }//end_return function...
	  }) (marker, i));//end_google.maps.event...end_(function(marker...
	}//end_for (var i = 0...

	// 引数に指定した矩形領域を地図に収める
	map.fitBounds(bounds);
};

request.php

<?php
session_start();
header('Content-Type: application/json; charset=utf-8');

$rp=array(
	"return_position" => $_GET['position']."return",
);
echo json_encode($rp);
?>

Comments

[shozi3]

request.phpのログを出してみれば何か分かるかも。

[yoshiomurakami]

ありがとうございます。エラーログには何も出てなかったのですが、それ以外の詳細なログを見る方法を調べて見ようと思います。

[shozi3]

error_log()使って引数と戻り値を出してみるとか。http://php.net/manual/ja/function.error-log.php

[yoshiomurakami]

こういうエラーログの吐き出し方があるのですね。うまく使えるようにいろいろ試してみます。なお本質問についてはjavascript側に問題があったようで、解決することができました。ありがとうございました。

Answer 1

最初にinfowindowが開くまで、$('#request').click(function(){ }は#requestを見つけれていません。
一度閉じてしまった場合も同じ理由で見失っています。

なので、
$('#request').click(function(){ }の中身を別のfunctionとして外に出して、<img>の中でonclick=として呼び出します。

全体としてはこんな感じ

function initialize() {

  //位置情報の配列
  var locations = <?php echo json_encode($result); ?>;

  //Map
  var map = new google.maps.Map(document.getElementById('map_canvas'));
  var bounds = new google.maps.LatLngBounds();
  var infoWindow = new google.maps.InfoWindow({
    maxWidth: 200
  });
  var marker;

  //位置情報の配列からマーカー表示
  for (var i = 0; i < 3; i++) {
    marker = new google.maps.Marker({
      position: new google.maps.LatLng(locations[i][0], locations[i][1]),
      map: map,
      animation: google.maps.Animation.BOUNCE
    });

    // 地図表示領域をマーカー位置に合わせて拡大
    bounds.extend (marker.position);

    //マーカーをクリックしたらinfowindowを表示
    google.maps.event.addListener(marker, 'click', (function(marker, i) {

      return function() {
        //infowindowの中身
        infoWindow.setContent(
          //<img> タグに onclick 追加
          '<div style="text-decoration:none;"><input type="text" id="request_lat" value="'+locations[i][0]+'" hidden><img onclick ="req()" id="request" src="./img/heart.png" width="40" height="40" align="right"></img>'
          +
          locations[i][2]
          +
          '<div id="return"></div>'
        );//end_infoWindow.setContent(

          infoWindow.open(map, marker);

        }//end_return function...
      }) (marker, i));//end_google.maps.event...end_(function(marker...
    }//end_for (var i = 0...

      // 引数に指定した矩形領域を地図に収める
      map.fitBounds(bounds);
  };

//--- これ追加 initialize()の外に出します。
function req(){
  $.get('request.php', {         //GETでrequest.phpに対して
    position:$('#request_lat').val()     //id属性request_latの要素を
  }, function(data){      //コールバック関数functionの引数として渡す。
    $('#return').html(data.return_position);   //戻り値はid属性resultにhtml表示
  });
}

Comments

[yoshiomurakami]

ご回答ありがとうございます。コードまでご提示いただき恐縮です。早速試してみたところ、問題が解決されました！

ただ、function req()をinitialize()の外に置かなければいけない理由が、正直なところピンときていません。

function req()を中に置いてみるとやはり「１回目を見失う」動きを見せます。「１回目を見失う」という挙動も、場合によっては活用できる可能性があると考え、ぜひ理解しておきたく思った次第ですが、この辺りは＜関数スコープ＞の理解が必要ということでしょうか？

[colling]

infowindowが開くまで、id="request" が設定されたimgタグは存在していません。
idが存在していないタイミングで、id="request" のclickイベントをチェックしろという命令を出されているので。
「誰やねんそれ？」という状態です。

[yoshiomurakami]

だから、img onclick ="req()"ではじめて「チェックしろ」と命令するわけですね。

[yoshiomurakami]

プログラムの流れをセリフで表現するとイメージが湧いてきますね。面白いものです。いろいろご教示いただきありがとうございました！

[colling]

onclick ="req()"は、オレをclickでreq()を発動せるぜ！って感じの素直な命令になります。

Answer 2

私の勘違いならすみません。

どんなときも想像通りに動作しないのがプログラミングというものではないでしょうか。

もし可能なら、事前にインフォウィンドウをポップアップで開いておきます。
マーカーをタップしたらフォーカスを切り替えて表示させたものを可視化する。
インフォウィンドウにはマップで見るボタンを用意すると共に、
<input type="hidden"
で緯度けいどの値を保持させる。
そうすれば事前にインフォウィンドウは表示されているので、
とりあえず実装したい機能は実装可能になるのではないでしょうか？

こんな考え方は不良だと思いますが、王道がいつもうまくいく手立てとは、私は限らないと思っていますが、いかがでしょうか？

Comments

[yoshiomurakami]

ご回答ありがとうございます。勘違いはされてないと思います。
おっしゃるように、他のアプローチを検討することも解決手段の一つかもしれませんね…。自分のイメージに固執して前に進めないというのも非効率だし、よりよいインターフェースが考えつくかもしれないので、別の表現を考えてもみようと思います。

ありがとうございました。

[phpsyoshinsya]

私はスマートフォン関連の最新技術はあまり詳しくなくて、こんな回答しか出せなくてもどかしいです。