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®ion=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>