GoogleMapを埋め込んでみる

HTML5の学習をスタート。実験を兼ねて、このブログに残して行こうと思う。 今回はHTML5ということでもないが、GoogleMapを埋め込み表示させてみた。GoogleMapから取得したコードをBlogに入れるだけ。このレベルのことだと、YouTube並みに手軽に実現できるのね。

デフォルトだとはじめから吹き出しが出るので、これを消して、マーカーをクリックしたときだけ吹き出し表示するようにした。また吹き出し内に写真を入れてみた。

より凝ったことをするには Google Map JavaScript API を使うようだ。HTML5に沿ってちょっと作ってみたら、本格的な開発も可能なことが分かった。試しに作ったので、Blog内に入れようと思ったら、いろいろ制限があって、簡単ではないようだ。Bloggerの制限をよく理解していないので、強引に表示することはできなかった。アップするよい場所がない・・・ GoogleSiteに置こうと思ったら、普通のHTMLをすべて拒絶する仕組みなのね。ということでペンディング。Bloggerにアップできる方法が分かったらアップします。

寝る前にちょっとがんばったら実現できたので、早速ブログにアップしてみた。内容は上記とあまり変わらないが、APIを見て機能を盛り込んでいけば、ストリートビューとの連動とか、いろいろ実現できる。JavaScriptの埋め込みについては、理解が足りないけども、Bloggerの場合、テンプレートにおくべきコードと、記事に置くべきコードを切り分けられれば何とかなる。今回のポイントは ＜body onload="init()"＞ をJavaScript内に window.onload = init; として書き直したところ。テンプレートのbodyに前者を書いても機能するけど、すべての記事に有効になってしまうため、後者のようにした。