Home > IEはいらない

2008.05.06

google mapsの表示テスト

別サイトに設置したgoogle mapsの表示をTest your web design in different browsersを使用して
MSIE 5.5、MSIE 6.0、MSIE 7.0、Firefox 2.0、Opera 9.27の5種類のブラウザで確認してみます。

他のサイトでgoogle mapsのみのページを作成しobject要素を使いブログに設置した場合。
google maps表示
MSIE 5.5、MSIE 6.0、MSIE 7.0、Firefox 2.0、Opera 9.27の5種類のブラウザでレイアウトに問題がありそうなものの全て表示出来ているようです。

google mapsのマイマップで作成した地図をobject要素を使いブログに設置した場合。
google my map
テスト画像で見る限りMSIE 5.5、MSIE 6.0、MSIE 7.0は全滅です、Firefox 2.0、Opera 9.27については全く問題はありません。

この地図はgoogle mapsのマイマップで制作したもののgoogleで提供されている「埋め込み地図」用コードをobject要素を使いブログに設置しただけなのですが、googleのコードがInternet Explorerにはあわないのか?又はInternet Explorerがgoogleマイマップに対応してないかのどちらかという事になるのでしょうか?

2008.04.12

google my map

googleマイマップで作成した地図のコードはiframeタグで提供されます。
しかし、XHTML 1.0 StrictやXHTML 1.1では「非推奨要素・属性」とされvalidになりません。

Google Mapsのマイマップで取得した以下コードの赤い部分をコピーし

<iframe width="500" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.co.jp/maps/ms?ie=UTF8&amp;hl=ja&amp;s=AARTsJqaOi8Q3_GXqleVozq3OuYGVER_wQ&amp;msa=0&amp;msid=111785299853511043141.00044a44555f859aeb21d&amp;ll=35.376734,138.440094&amp;spn=0.097976,0.171661&amp;z=12&amp;output=embed"></iframe><br /><small><a href="http://maps.google.co.jp/maps/ms?ie=UTF8&amp;hl=ja&amp;msa=0&amp;msid=111785299853511043141.00044a44555f859aeb21d&amp;ll=35.376734,138.440094&amp;spn=0.097976,0.171661&amp;z=12&amp;source=embed" style="color:#0000FF;text-align:left">大きな地図で見る</a></small>

以下のobject コードの青い部分に張り付けます。
ピンクの部分はiframeタグがobjectタグに変わった部分です。
objectタグでは 等価な内容名を示す必要があります。

<object width="500" height="350" data="http://maps.google.co.jp/maps/ms?ie=UTF8&amp;hl=ja&amp;s=AARTsJqaOi8Q3_GXqleVozq3OuYGVER_wQ&amp;msa=0&amp;msid=111785299853511043141.00044a44555f859aeb21d&amp;ll=35.376734,138.440094&amp;spn=0.097976,0.171661&amp;z=12&amp;output=embed" type="text/javascript" >等価な内容名</object>
<small><a href="http://maps.google.co.jp/maps/ms?ie=UTF8&amp;hl=ja&amp;msa=0&amp;msid=111785299853511043141.00044a44555f859aeb21d&amp;ll=35.376734,138.440094&amp;spn=0.097976,0.171661&amp;z=12&amp;source=embed" style="color:#0000FF;text-align:left">大きな地図で見る</a></small>

等価な内容名
これでXHTML 1.0 StrictでもValidになります。

2008.04.11

google mapsにルートを書いてみる

これを利用する場合「Google Maps API」の取得の必要も無いんですね!

ただグーグルアカウントを取得するのみで「Google Maps」を利用できるんです。

まずは、google mapsのサイトを開きます、googleバナーの下に「検索結果」と「マイマップ」のボタンが表示されているので「マイマップ」のボタンをクリックします。

グーグルアカウントを持っていない場合はここで聞いてきますので「アカウント作成」ボタンをクリックしてメールアドレスとパスワードを登録してアカウントを作成して下さい。

サイドバーの編集ボタンをクリックすればmap左上にポイントツール、直線ツール、シェイプツール等が表示されるので早速ルートを書いてみましょう。

等価な内容名

GoogleMaps表示plugin WP-SimpleGmaps plugin

WP-SimpleGmaps:これは投稿位置情報を投稿画面で確認出来るためとても便利に使えるpluginです。

経度や緯度の座標指定など不要で、記事投稿画面のGoogleMapsから目的の場所を探して生成されたコードを貼り付けるだけの簡単なプラグインです。(aoina)

投稿画面の下のカスタムフィールドにGoogle Mapsの地図が表示され、その上の窓に地図の中央にマーカーが表示されその位置、拡大率、表示サイズのタグが生成されるのでそれを本文にペーストすれば投稿記事に表示されます。
[gmaps:35.63763832851929/139.73338812589645/14/510/300](comment)[/gmaps]
ところがAnother HTML-lint でCheckしたら99点が69点になってしまいました。

XHTML1.0 Strict で頑張るからいけないの!

●<div> を nn行目の <p>~</p> 内に書くことはできません。
●<div>~</div> 内に <p> を書くことはできます。 → 解説 43
●<a> に HTML4.0、HTML4.01、XHTML1.0 Transitional、XHTML1.0 Frameset、Mozilla または MSIE 用の属性 `target` が指定されています。 → 解説 80
●(<img> には width と height 属性を指定するようにしましょう。) → 解説 185
●<div> と </div> の間が空です。 → 解説 51

どこかで修正したいのですがpluginの中身に手を加えるなんて僕にできるのでしょうか?

pluginホルダ内の「gmaps_load.js」にある
「map.addControl(new GMapTypeControl());」のコメントアウトをはずし航空写真表示切り替えボタンを表示しました。