◆前提
スマホで取得した位置情報をgooglemapで可視化。近隣店舗の情報を提示するサイトを制作しています。使用言語はhtml/css/javascript/php/mysqlです。
◆やりたいこと
①複数の位置情報(配列化した緯度経度)を読み込み、map上にマーカーを配置。
②マーカーをタップするとinfowindowが開き、都市名とボタンを表示。
③ボタンをタップすると都市名をphpにget送信。
④php側で処理した情報(近隣店舗)を返却し、当該infowindow内に表示。
◆現状
近隣店舗の情報生成は後回しで、ステップとして試験的に「③で都市名ではなく数値(緯度)を送信。phpで緯度に文字列(return)を足して返却する」という動きを作っている中で、問題にあたりました。
◆問題点と発生手順
最初に開いたinfowindowだけ「緯度+return」が表示されない(③の送信または④の返却がされない)
- 初期状態でマーカーを複数個表示。infowindowはどれも開いていない。
- どのマーカーをタップしてもinfowindowは開き正しい情報とボタンが表示される。
- しかしボタンをタップしてもなにも表示されない。
- そのまま別のマーカーをタップするとinfowindowが開き、同時に手順2のinfowindowは閉じる。開いているinfowindow内のボタンをタップすると、都市名が返却され、表示される。つまり想定通りに挙動する。
- そのまま、さっきうまくいかなかったマーカーをもう一度試すと、手順4の動きになる。どのマーカーを試しても同じように手順4の動きになる。
- しかしいったんinfowindowを閉じる(×をタップする)と、以降は同じ問題が発生する。つまり状態として手順1に戻り、次に開いたinfowindowは手順3の状態になる。
◆以下コードから、問題点の原因についてご指摘いただけると幸いです。
最初に開いたinfowindowでも滞りなく数値を送信し返却された情報を表示できるようにしたいです。
locations[i][0]:緯度
locations[i][1]:経度
locations[i][2]:都市名
javascript
1function initialize() { 2 3 //位置情報の配列 4 var locations = <?php echo json_encode($result); ?>; 5 6 //Map 7 var map = new google.maps.Map(document.getElementById('map_canvas')); 8 var bounds = new google.maps.LatLngBounds(); 9 var infoWindow = new google.maps.InfoWindow({ 10 maxWidth: 200 11 }); 12 var marker; 13 14 //位置情報の配列からマーカー表示 15 for (var i = 0; i < <?php echo $row_count;?>; i++) { 16 marker = new google.maps.Marker({ 17 position: new google.maps.LatLng(locations[i][0], locations[i][1]), 18 map: map, 19 animation: google.maps.Animation.BOUNCE 20 }); 21 22 // 地図表示領域をマーカー位置に合わせて拡大 23 bounds.extend (marker.position); 24 25 //マーカーをクリックしたらinfowindowを表示 26 google.maps.event.addListener(marker, 'click', (function(marker, i) { 27 return function() { 28 //infowindowの中身 29 infoWindow.setContent( 30 '<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>' 31 + 32 locations[i][2] 33 + 34 '<div id="return"></div>' 35 );//end_infoWindow.setContent( 36 37 38 $('#request').click(function(){ //id属性requestの要素がclickされたら 39 $.get('request.php', { //GETでrequest.phpに対して 40 position:$('#request_lat').val() //id属性request_latの要素を 41 }, function(data){ //コールバック関数functionの引数として渡す。 42 $('#return').html(data.return_position); //戻り値はid属性resultにhtml表示 43 }); 44 }); 45 46 infoWindow.open(map, marker); 47 48 }//end_return function... 49 }) (marker, i));//end_google.maps.event...end_(function(marker... 50 }//end_for (var i = 0... 51 52 // 引数に指定した矩形領域を地図に収める 53 map.fitBounds(bounds); 54};
request.php
php
1<?php 2session_start(); 3header('Content-Type: application/json; charset=utf-8'); 4 5$rp=array( 6 "return_position" => $_GET['position']."return", 7); 8echo json_encode($rp); 9?>
回答2件
あなたの回答
tips
プレビュー