blog@ongmap.com

大げさなタイトルですが、ちょっと便利なツールを追加してみました。

POP*POPの

遂にGoogle MapsがYouTubeぐらい簡単に貼り付け可能に！

を見て遅まきながら知ったんですが、ようやくGoogle MapもYouTubeみたいにAPI Key無しでの貼り付けが可能になったんですね。

で、ちょっと使ってみたところ、少々使い勝手が悪いんじゃないかと思って作ったツールです。

簡単な説明ページについては、このエントリーの前に書いていますが、大は小を兼ねるということで英語で書いているので、日本語での説明をこちらで。

使い方は、結構簡単だと思います。

右クリックメニューか、左側のメニュー（ツリーではなく、アコーディオンメニューです）の中から、「貼り付け用タグ生成」というメニューを選択すると、生成されたタグが表示される空白のテキストエリアが左側に現れます。

この状態で、地図上でクリックしてからマウスを動かすと破線で囲まれた長方形がマウスの動きに合わせて伸縮するようになります。次にクリックをすると領域が確定して、その領域を表示するための貼り付け用のタグが先ほど表示された空白のテキストエアリアの中に表示されます。

あとは、これをコピー＆ペーストするだけです。

注意点としては、

• 選択のための動作は、「クリック→マウスを動かす→クリック」になります。マウスのボタンを押したまま動かしてしまうと領域は選択されずに普通に地図が動いてしまいます
• 2度目のクリックの際に、クリックのタイミングが遅いと地図が動いてしまい、選択していた領域が消えてしまいます。その場合には、再度領域を選択してください。あと、クリックをすばやく行ってみてください
• メニューを閉じれば、選択モードが解除されます
• 致命的に足りていない機能としては、「インフォウィンドウ」がまだ表示できません。Google Map上だと、住所とかを検索すると矢印と一緒にインフォウィンドウが表示されるんですが、その表示機能をまだ実装できていません。そのうち作ります。

下が埋め込んだ例です：

拡大地図を表示(Tag by ongmap.com)

あと、このツールで吐いているタグは、小粋空間さんの

Google マップの貼り付け用 HTML を valid にする

なんかを参考にして「＆」や「<br/>」については「&amp;」、「<br />」にしていますが、「iframe」タグはとりあえずそのままにしています。

というのも、原因はわからないんですが、小粋空間さんの変換スクリプトで生成されたタグをWordpressに貼り付けたところ、なぜか、コメントアウトのタグに変なスペースが入り込んだりして、IE6で変な挙動になってしまうので、とりあえず、「object」タグではなく、「iframe」のままにしています。

あと、これも原因不明なんですが（これは多分僕の環境だけなんじゃないかと思うんですが）、iframeタグを貼り付けるとちゃんと表示はするのに、再編集が不可能になってしまうという不可解なことが起きています。だれか、Wordpress詳しい人教えてくれないだろうか？
（この件については、WYSIWYGエディタ機能をオフにしたら、とりあえず解決しました）

ONGMAP.COM

参考リソース

• YouTube-style Embeddable Maps - Google Lat Long Blog
• Google Adds Embedding To Google Maps - TechCrunch
• Google Maps Launches Embedded Maps - Mashable hre
• Google Releases YouTube-Style Embedded Maps - O’Reily Radar
• Add Google Maps to Your Site
• Google マップの地図がブログなどへ簡単にコピペで埋め込み可能に - GIGAZINE