Blog

ブログ

Google Mapsを​jQueryで

  • Web制作
  • 記事公開日:
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タグを使用できます。ただし改行できません。定義リストとかで場所の名前とか入れています。

このページを共有

関連記事

この記事を読んだ人はこの記事も読んでいます

  1. Grid Systems in Graphic Design
    Grid Systems in Graphic Design
  2. SketchをUI構築案件で利用してみた
    SketchをUI構築案件で利用してみた
  3. レスポンシブWebデザインで画像関係のスクリプトを使うときにチェックすべき点を書いてみた
    レスポンシブWebデザインで画像関係のスクリプトを使うときにチェックすべき点を書いてみた
ページの上部に戻る