ブログ

Google MapsをJQueryで

Google MapsをWebサイトに組み込むのはいまや一般的になりました。

しかし、iframeで組み込んだのいいけどデザイン的に微妙だったり、APIを使ってJavaScriptで組み込んだりしても、コードを書くのが面倒だったりする場合もあるかと思います。

僕はJQueryのプラグインを使用しているのですが、あまり使っているという話を聞かないのでちょっと紹介してみます。

使っているプラグインはgMapというプラグインです。
現在バージョン2ですが、ベータ版でGoogle Maps V3に対応したものも開発しているようです。

gMapの紹介は、IDEA*IDEAさんあたりとかでちょろっとされていますが、日本語で解説していたりするページがないのでさくっと紹介してみます。

どう使うの?

まず、ヘッダーに以下のようなコードを指定します。
注意しないといけないのは、JQueryのコードの前にAPIキーを指定しなければいけないことです。

実際のコードは以下のようになります。

12行目の「html:」部分にはHTMLの要素を記述することができますが、改行すると「表示がうまくいかないときがあるので、1行で記載した方がいいかと思います。

注意点など

latitudeとlongitudeで座標位置を指定することは他と変わりません。
zoomの上のlatitudeとlongitudeで画面中心の位置を指定します。
markersの中のlatitudeとlongitudeで吹き出しの位置を指定することになります。

markersの中に「popup:true,」を指定するとGoogle Mapsをロードしたときに吹き出しを表示することができます(ただし1つのみ)。
htmlの中に、吹き出しメッセージを入れることができますが、この中にはhtmlタグを使用できます。ただし改行できません。定義リストとかで場所の名前とか入れています。

参考までにサンプルページを3つ作ってみました。(公開終了しました)

ゆめいろデザインへのお問い合わせやお見積もり依頼はこちらから。
お客さまのニーズにあった提案を行い、パートナーとして共に成長することを目指しています。