地図をテーブルの中に入れて、画面全体に表示したい

Byungdug Jun

unread,

Jun 12, 2012, 1:52:45 AM6/12/12

to google-map...@googlegroups.com

JUNと申します。ご教示ください。

やりたいことは、
・html,body,tableともwidth, heightを100%に設定
・tableのあるセルの中に、Google Mapを表示したい
・windowが広くなっても狭くなっても、tableに地図を連動させたい

----<sample>---
<!DOCTYPE html>
<html>
<head>
<title>Google Maps API v3 & JavaScript Example-1</title>
<meta name="viewport"
content="width=device-width, initial-scale=1.0, user-scalable=no">
<meta charset="UTF-8">
<style type="text/css">
html,body,table {
height: 100%;
margin: 0px;
padding: 0px;
}
#map_canvas {
height: 100%;
width: 100%;
margin:0px;
padding:0px;
}
</style>
<script type="text/javascript"
src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
var map;
function initialize() {
var myOptions = {
zoom: 15,
center: new google.maps.LatLng(32.786842,129.864836),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('map_canvas'),
myOptions);
}

google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<table border="1">
<tr>
<td>blank</td>
<td><div id="map_canvas" style="height:100%;width:100%;"></div></td>
</tr>
</table>
</body>
</html>
-----------------

どうしても、上記のソースだと地図が表示されません。
しかし <td><div id="map_canvas" style="height:100px;width:100px;"></div></td>
のように地図の大きさをピクセルで指定すると表示します。
どうすれば、tableのあるセルに地図を表示させ、テーブルの大きさに
連動するように、地図を埋め込むことができるのでしょうか。

よろしくお願いいたします。

--
Byungdug Jun, byung...@gmail.com

KF

unread,

Jun 13, 2012, 5:51:08 AM6/13/12

to google-map...@googlegroups.com

tdタグにもwidth="100%" height="100%"を指定してみてください。

実際のコードと説明を以下に用意しましたので参考にしてみてください。Safari 5, Firefox, Opera , Google Chromeで確認済みです。

http://www.openspc2.org/reibun/Google/Maps/API/ver3/code/map/map/0006/index.html

Byungdug Jun

unread,

Jun 13, 2012, 6:04:53 AM6/13/12

to google-map...@googlegroups.com

JUNと申します。

早速のご回答、ありがとうございました。ちなみに、
<td style="height:100%;width:100%"></td>
でもうまくいきますが、styleを使わなかった場合と
何か意味が違うのでしょうか。

2012年6月13日 18:51 KF <ope...@alpha.ocn.ne.jp>:

> --
> このメールは Google グループのグループ「Google-Maps-API-Japan」の登録者に送られています。
> このディスカッションをウェブ上で閲覧するには、https://groups.google.com/d/msg/google-maps-api-japan/-/Xpgqb1LtIMUJ
> にアクセスしてください。
> このグループに投稿するには、google-map...@googlegroups.com にメールを送信してください。
> このグループから退会するには、google-maps-api-...@googlegroups.com
> にメールを送信してください。
> 詳細については、http://groups.google.com/group/google-maps-api-japan?hl=ja
> からこのグループにアクセスしてください。

--
I have brought you glory on earth by completing the work you gave me
to do.(John 17:4) David Jun, HP +81-80-3954-0626

KF

unread,

Jun 14, 2012, 1:27:43 AM6/14/12

to google-map...@googlegroups.com

td要素に直接style属性を使った場合でも同じです。マップを表示する際に幅が決定していればよい、という事ですので。

Byungdug Jun

unread,

Jun 15, 2012, 4:58:52 AM6/15/12

to google-map...@googlegroups.com

JUNと申します。

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

2012年6月14日 14:27 KF <ope...@alpha.ocn.ne.jp>:
> td要素に直接style属性を使った場合でも同じです。マップを表示する際に幅が決定していればよい、という事ですので。

>
> --
> このメールは Google グループのグループ「Google-Maps-API-Japan」の登録者に送られています。

> このディスカッションをウェブ上で閲覧するには、https://groups.google.com/d/msg/google-maps-api-japan/-/tFCWGnc8D6wJ

> にアクセスしてください。
>
> このグループに投稿するには、google-map...@googlegroups.com にメールを送信してください。
> このグループから退会するには、google-maps-api-...@googlegroups.com
> にメールを送信してください。
> 詳細については、http://groups.google.com/group/google-maps-api-japan?hl=ja
> からこのグループにアクセスしてください。

--

Byungdug Jun; byung...@gmail.com

Reply all

Reply to author

Forward