本文へジャンプ

jQueryプラグイン作ってみた ~jQuery.gMapping.js~

Posted by Satoshi Ohki

jQueryプラグイン作ってみたシリーズ3作目の今回は「Google マップ」を簡単に自身のサイトに表示できるプラグインを作ってみました。

最近のWebサイト制作では「Google マップ」は必須と言っても過言ではないくらい使われています。
表示させるだけであれば「共有 > 地図を埋め込む」からソースをコピペすれば表示できます。
ただ、色の変更、マーカーの変更などはJavaScriptを使わなくてはなりません。
しかし、それが結構面倒で、更によくやり方を忘れるため、都度ググる羽目に。。

ということで作ってみました。

使い方

まずは下記のコードをjQueryの読み込み前に記述します。


YOUR_API_KEYの所に、自身のAPI KEYを入れます。
API KEYの所得方法はこちらの記事を参考にしてください。

そして必要最小限の使い方は緯度・経度を指定するだけです。

$('#表示したい場所のid').gMapping(緯度, 経度);

オプション

基本的なオプションはGoogle Maps APIsのMapOptionsをご覧ください。

そして、色やマーカーを変更するためのオプションを用意しました。

options.color

hue

  • マップの色相を設定
  • 型: string | number

saturation

  • マップの彩度を設定
  • 型: number

lightness

  • マップの輝度を設定
  • 型: number

options.marker

url

  • 画像のパス
  • 型: string

size

  • マーカーの大きさを設定
  • 型: [width: number, height: number]

anchor

  • マーカーの位置を調整
  • 型: [x: number, y: number]


下記のように使用します。

$('#map').gMapping(35.661289, 139.723348, {
  color: {
    hue: '#A02223',
    saturation: 50,
    lightness: 10
  },
  marker: {
    url: './images/marker.png',
    size: [30, 30],
    anchor: [15, 15]
  }
});

これだけなので、JavaScriptに詳しくない方でも簡単に扱えると思います!
是非、使ってみてください!!

DEMO

ダウンロード

動作確認済みjQueryバージョン

  • jQuery 1.12.4
  • jQuery 2.2.4
  • jQuery 3.2.1

動作確認済みブラウザ

  • Win: Google Chrome、FireFox、Edge、IE10+
  • Mac: Safari
  • Android: Google Chrome
  • iOS: Safari

ライセンス

  • MIT

※当プラグインを使用して生じた、何らかのトラブルや損失・損害等につきましては一切の責任を負いません。

FRESHERS WANTED!
Recent Entries
MD EVENT REPORT
What's Hot?
日本各地の酒蔵との直取引により厳選して仕入れた日本酒を世界に販売
2018年度 新卒採用 Webデザイナー/エンジニア、プロデューサー/ディレクター募集
Movable Type AWS 移管&アップグレード サービス
SNS・ブログ・メールからの流入数が一目でわかる
こんな僕たちの仲間に入りませんか?
50,000円からのシネマグラフ(Cinemagraph)制作
TAKUYAが教えるギター・レッスン
KenKenが教えるベースギター教則アプリ
SNS連動型クチコミ拡散システム「レビュー ジェネレーター サービス」
1時間1万円の撮影スタジオ
Share this on
Facebook Twitter Google+ Tumblr