MD-Blog_Web Creative

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

• https://www.monster-dive.com/blog/_sample/170331/jquery.gmapping.html

ダウンロード

• jquery.gmapping.js
• jquery.gmapping.min.js (圧縮版)

動作確認済み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

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