本文へジャンプ

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

Posted by MONSTER DIVE

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

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

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

使い方

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

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script>

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

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

Recent Entries
MD EVENT REPORT
What's Hot?