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. Webデザイナーの格差が今後広がっていく

    Webデザイナーの格差が今後広がっていく

  2. IE9でSVGグラデーションを使う場合の注意事項

    IE9でSVGグラデーションを使う場合の注意事項

  3. 脱Adobe。次世代ソフトたちでWebデザインの仕事をしてみた - 課題篇

    脱Adobe。次世代ソフトたちでWebデザインの仕事をしてみた - 課題篇