みんなの「教えて(疑問・質問)」にみんなで「答える」Q&Aコミュニティ

こんにちはゲストさん。会員登録(無料)して質問・回答してみよう!

締切り済みの質問

google map api プログラミング

javascript google map api どなたか助けてください
マップを作成しているのですが、どうしてもわからないところがあります。
下のソースコードの中にテーブルがあるのですが、そこに、検索を押したときの
マーカーの場所の詳細を表示させたいのですがどうやっても表示できません。
どなたかプログラミングにお詳しい方教えてください!
よろしくお願いします。

<!DOCTYPE html>
<html>
<head>

<meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
<meta http-equiv="content-type" content="text/html; charset=UTF-8n"/>
 <title>練習</title>

<script type="text/javascript" src="http://maps.google.com/maps/api/js?libraries=geometry&sensor=false&region=jp"></script>
<script language="JavaScript" src="gcode_com.js"></script>
<script language="JavaScript" src="gcode.js"></script>
<script language="JavaScript" src="GoogleMapsCustomMapType.js"></script>

<!link href="http://code.google.com/apis/maps/documentation/javascript/examples/standard.css" rel="stylesheet" type="text/css" />

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

 <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&language=ja"></script>
<script type="text/javascript">
<!--

var geocoder;
var map;

function initialize() {
geocoder = new google.maps.Geocoder();

var latlng = new google.maps.LatLng(36.370324,138.65968);
var myOptions = {
zoom: 10,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU},
navigationControl: true,
navigationControlOptions: {style: google.maps.NavigationControlStyle.SMALL},
scaleControl: true
}

map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
}




function codeAddress() {
var address = document.getElementById("address").value;
// var zm = document.getElementById("zm").value;
geocoder.geocode( { 'address': address}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
map.setCenter(results[0].geometry.location);
// document.write( alert ( zoom ) );
var marker = new google.maps.Marker({
map: map,
position: results[0].geometry.location
});
} else {
alert("Geocode was not successful for the following reason: " + status);
}
});
}
// -->
</script>
</head>



<body onload="initialize()" background="">
<center>
<font size=5>練習</font>
<div id="map_canvas" style="width: 1000px; height: 600px; border: 1px solid Gray;"></div>
</center>
<div>
キーワード:
<input id="address" type="textbox" size="30" value="ここにキーワードを入力してください">
<!input id="zm" type="textbox" size=2 value="8n">
<input type="button" value="検索" onclick="codeAddress()">
</div>

<table width="400" height="200" border="1" align="left">
<tr>
<td width="150" height="50">緯度</td>
<td width="150" height="50">経度</td>
<td width="800" height="50">住所</td>
</tr>
<tr>
<td width="150" height="25"></td>
<td width="150" height="25"></td>
<td width="800" height="25"></td>
<tr>
<td width="150" height="25"></td>
<td width="150" height="25"></td>
<td width="800" height="25"></td>
</tr>
<tr>
<td width="150" height="25"></td>
<td width="150" height="25"></td>
<td width="800" height="25"></td>
</tr>
<tr>
<td width="150" height="25"></td>
<td width="150" height="25"></td>
<td width="800" height="25"></td>
</tr>
<tr>
<td width="150" height="25"></td>
<td width="150" height="25"></td>
<td width="800" height="25"></td>
</tr>
<tr>
<td width="150" height="25"></td>
<td width="150" height="25"></td>
<td width="800" height="25"></td>
</tr>
</table>





</body>
</html>

投稿日時 - 2015-09-22 20:26:05

QNo.9052030

困ってます

このQ&Aは役に立ちましたか?

1人が「このQ&Aが役に立った」と投票しています

回答(2)

ANo.2

すみません。
質問内容を見直したところ、私のNo.1の回答は質問者様の意図に
沿っていないことが分かりました。

検索ボックスに入力した住所で、緯度経度を取得
  ↓
テーブルに、緯度経度と住所を表示
  ↓
上記を繰り返して、行を追加していく。

というような感じをお望みかと思います。

正直これは、ひとつだけなら私にも出来ますが、連続だと行にidかnameを
増分して定義していく必要があると思うので、ハードルが高そうです。

仕事で必要なものであれば、専門業者に依頼すべきレベルだと思います。

投稿日時 - 2015-09-24 21:45:52

ANo.1

キーワードのテキストボックスに住所を入力すると、
検索地点にマーカーが立ちますから、基本的な所は
問題ないと思います。

一方、下に設置されているのテーブルは、枠が形成
されているだけなので、これでは検索ボックスに
紐付けされていない為、検索表示されないでしょう。

テーブルの各行に検索ボタンを設置するか、行を選択
するプルダウンメニューの設置等が必要かと思います。

投稿日時 - 2015-09-23 11:46:21

あなたにオススメの質問