Google MapsをWebサイトにiframe埋め込む際に
Google Mapsのサイトでカスタマイズさせてくれるのはサイズと尺度、初期位置くらいです。
せっかく埋め込むのなら色々とカスタマイズしようと思ったのですが
日本語のリファレンスがなかなか見当たりませんでした。
なら自分でまとめてしまえ、という事で動作確認の取れた引数のみ、まとめました。
まず、Google Mapsをサイトに埋め込む方法から。
１、http://maps.google.co.jp/ にアクセスし、住所を検索
２、画面右端の「リンク」をクリック
３、出てきた窓の「埋め込み地図のカスタマイズとレビュー」をクリック
４、枠のサイズを選択、カスタムを選ぶと好きなサイズに出来ます
５、プレビュー画面でズームや位置、地図のタイプ(地図や衛星写真等)を感覚的に決めます。
６、HTMLをコピーし、サイトの埋め込みたい箇所に貼りつける。
これでとりあえず、表示されます。次はカスタマイズの時間です。
※今回は引数を分かりやすくするため、改行してありますが
改行するとエラーが出る可能性があるので、使用時は１行にしてください。
<iframe
width="600"
height="350"
frameborder="0"
scrolling="no"
marginheight="0"
marginwidth="0"
src="http://maps.google.co.jp/maps?
<!-- ここから引数 -->
<!-- 目的別 q → デフォルト d → 乗換案内(output=embedがない時のみ有効)-->
f=q&
<!-- マップ内仕様言語 ja → 日本語 en → 英語-->
hl=ja&
<!-- 緑の矢印マーカー座標(URLエンコードで入力すれば日本語も可) -->
q=35.508591,139.4427722&
<!-- マップタイプ m → マップ k → 衛星写真 p → 地形 e → Google Earth-->
t=m&
<!-- オーバービュー表示非表示 0 → 非表示 1 → 表示(output=embedがない時のみ有効) -->
om=0&
<!-- URL内に日本語を入れる際の文字コード -->
ie=UTF8&
<!-- 出力文字コード -->
oe=UTF8&
<!-- 地図中心座標 -->
ll=35.508191,139.4440022&
<!-- 尺度（0～23、値が小さいほど縮小する） -->
z=17&
<!-- この引数があるとmapのみを枠に埋め込みます -->
output=embed
"></iframe>
これを実行するとこうなります。
上記以外の引数を発見した方はコメントを残していただけると嬉しいです。
現在はHTML、CSSコーディングの知識を深めようと思い勉強中なのですが
最近知った、感心したものをひとつ、ご紹介したいと思います。
私は普段、floatを解除する際はCSSにて
.clear {
clear:both;
}
を用意して置き、
<div class="float_a"> ～～～ </div> /*float要素a*/
<div class="float_b"> ～～～ </div> /*float要素b*/
<div class="clear"></div> /*float解除*/
という手法を取っていましたが、空のdiv要素をコードの中にいくつも配置するのは美しくありません。
もっと良い方法はないかと思い他の社員の方に聞いてみた所、こんな方法もあるよと教えてくださいました。
CSSにて
/*IE7以外のモダンブラウザ向け*/
.clearfix:after{
content:".";
display:block;
height:0;
clear:both;
visibility:hidden;
}
/*IE7およびMacIE5向け*/
.clearfix{ display:inline-block; }
/*IE6以前向け*/
/*Hides from IE-mac\*/
* html .clearfix{height:1%;}
.clearfix{display:block;}
/*End hide from IE-mac*/
そして
<div class="float_box clearfix"> /*floatの親要素＋clearfix*/
<div class="float_a"> ～～～ </div> /*float要素a*/
<div class="float_b"> ～～～ </div> /*float要素b*/
</div>
と記述することにより、親要素が閉じた瞬間にfloatが解除されます。
一度覚えてしまえば何てことはないですし、状況によっては前者の方が良い場合もありますが
選択肢が増えるという事は、それだけきれいにコードが書けるようになるという事です。
たくさんの知識を増やして、常にきれいなコードが書けるよう心がけたいですね。
突然ですが、僕は文章を書くのが下手です。なので
所々見にくい箇所があったり、急に書き方が変わったりするかもしれませんが
どうか温かい目で見てやってください。。。
0.2 環境変数の設定
環境変数ってなに？
詳しい説明を書いても、ここではあまり理解しにくいと思いますので
読んでみて、良く分からなくても、先に進んでしまってください。
やっているうちに、分かると思います。
実はこの環境変数、する必要がありません。
「しなくてもできる」と書いた方が正しいかもしれません。
しかし、環境変数の設定をしない場合
例： C:\WORK>C:\Program Files\Java\jdk1.6.0_17\bin\javac HelloWorld.java
プログラムを実行するたびに、このような長い文字を書かなければならないのです。
(詳しいプログラムの実行の方法については別の記事に書きます)
これはとても面倒なので、簡略化するためにするのが「環境変数の設定」です。
「プログラムのファイルを実行する時、分からなかったらここを見てね」と
パソコンにお願いしておくようなものでしょうか？
(この書き方は正確ではないかもしれませんが、こんな感じだと思います)
どうやって設定するの？
1. マイコンピュータを右クリック
2. プロパティをクリック
3. 詳細設定タブをクリック
4. 環境設定をクリック
5. 「○○(アカウント名)ユーザの環境変数」または「システムの環境変数」のどちらでもいいので「PATH」があるか確認
6. PATHがない場合は、「新規」から変数名をPATH、変数値をJDK内のbinファイルの絶対パス
(例：C:\Program Files\Java\jdk1.6.0_17\bin)で新しく作成
7. PATHがある場合は、「編集」から変数値を「元々の変数値;JDK内のbinファイルの絶対パス」
のように、セミコロンをつけて並べて編集
以上で設定が完了しているはずです。
とりあえずやったけど、本当に設定できてるの？
確認できているかどうか、確かめてみましょう。
1. スタート→すべてのプログラム→アクセサリ→コマンド プロンプト を選択
2. javac と入力してみる
3. java と入力してみる
２と３で、よくわからない文字がいっぱい出てきたら、とりあえず成功です。
(現段階では気にする必要はありませんが、出てくる文字はそれぞれのhelpです)
「見つかりません」のようなメッセージが出てきた場合は、何かが失敗しているので調べて治しましょう！
余談
知らなくても支障はないので詳しくは書きませんが、実は上記の”javac”は最初のほうに書いた
例： C:\WORK>C:\Program Files\Java\jdk1.6.0_17\bin\javac HelloWorld.java
の代わりをしてくれています。毎回これを書くことを思えば、やはり設定した方がいいですね。
まず初回は、開発環境を整える所から始めます。
最初から全部理解するのは難しいと思いますが
「なんでこの操作が必要なのかな？」と考えながらやると
今後のためになるかもしれません。
０.１ JDKのインストール
JDKってなに？
プログラミングをするには、大きく分けて「開発環境」と「実行環境」が必要です。
javaの開発環境をJDK(Java Developers Kit)といい
実行環境はJRE(Java Runtime Environment)と呼ばれます。
でも、「開発は出来るけど実行できないよ」なんてのは意味がないので
JDKをダウンロードすればJREもついてきます。
どこで手に入る？
10/01/05現在では
http://java.sun.com/javase/downloads/widget/jdk6.jsp
ここから無料でダウンロードできます。([Continue>>]から)
インストールの進め方は？
指定通りに進めればまず間違えないと思います。
あえて言うなら、「インストールするプログラムの機能選択」画面で
「開発ツール」を選択して進めましょう。
僕は間違えて一度やり直しました。
皆さんはじめまして、ウェブ開発部の勝見です。
よろしくお願いします。
最近になってやっとjavaを勉強し始めました。
なので、学んだ事をブログに書いていきたいと思います。
題して「０から始めるjava入門」です。
これからjavaを始める人が僕の記事を読んで
少しでも楽に、楽しくjavaを学べたらいいなぁ、と思います。
それでは、乞うご期待。
