Blog

ブログ

Google Mapsを​jQueryで

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. Movable Type 5.1でカスタムフィールドの順番を並び替える方法

    Movable Type 5.1でカスタムフィールドの順番を並び替える方法

  2. CMS(WordPressなど)を導入する時のレンタルサーバーの選び方

    CMS(WordPressなど)を導入する時のレンタルサーバーの選び方

  3. 外部リンクアイコン自動挿入Scriptを原形をとどめないほどに改造してみたよ

    外部リンクアイコン自動挿入Scriptを原形をとどめないほどに改造してみたよ