[gMarker.js]Google Mapに複数マーカーを簡単に追加する方法[JSライブラリ]

Google Mapにマーカー追加するの面倒ですよねあれ。
なのでライブラリ作りました。

その名も「gMarker.js」だす！

何が楽になるかというとJavaScriptは書かなくてもよくなります。
JavaScriptからの解放

デモ

マーカーをクリックすると「Hey!!」と陽気に語りかけます。

ソースコード

使い方

jQueryの導入

入っている人はいれなくていいです。
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>

Google Mapが表示されるDivを用意(１ページに複数可)

id="gmarkerDiv1"
Google Mapを表示するためにIDを設定します。
IDの先頭にgmarkerDivが着いていればgmarkerDiv1とかgmarkerDiv2にしておけば、
１ページで複数のGoogle Mapを表示することができます。
ただしIDなので重複してはいけませんよ。

data-zoom="14"
というのはGoogle Mapの初期表示でどのくらい拡大しておくかの数値です。
数が大きいほどズームします。

マーカー情報を用意(gmarkerDivのdiv配下に複数可)

一番上に来るspanがGoogle Mapの中心になるマーカーになります。

data-longitude="35.6811673"
必須項目です。
経度です。小数点で入力してください。
縦に引かれた線ですね。
ちなみにGoogle Mapで位置を確認した時に出る順番は「経度、緯度」です。

data-latitude="35.6811673"
必須項目です。
緯度です。小数点で入力してください。
横に引かれた線ですね。

data-icon="http://himakan.net/test.png"
標準で表示されるマーカーの画像を変更します。
自動で正方形の35pxに圧縮されます。

data-anime="bounce"
Google Map上でマーカーを動かします。
bounce はずっとジャンプします。
drop は一度だけ上から落ちてきます。
lo は一度だけかすかにジャンプします。
jo は一度だけジャンプします。

data-event="%3Cdiv%3EHey%21%21%3C/div%3E"
クリックされた時に出る吹き出しに何を表示するかを設定できます。
上記内容は<div>Hey!!</div>をHTMLエスケープしてます。
内容は必ずHTMLエスケープしてください。
やり方がわからないのであれば以下のテキストに入力するとHTMLエスケープされるので使ってください。

最後にgMarkerを読み込む

最後に読み込まないとエラーになります。
不安な人はフッダーに追加しておくと安全かも。
ページ内にIDがgmarkerDivのものが存在しない場合は何もしないので常に読み込んでもいいですよ。
かなり軽いので影響はそんなにないと思います。
<script src="https://himakan-cdn-files.firebaseapp.com/gmarker.min.js" id="gmarkerjs" data-key="<GOOGLE_MAP_API_KEY>"></script>
src="https://himakan-cdn-files.firebaseapp.com/gmarker.min.js"
ソースはダウンロードして使ってくださいね。
ダウンロードはこちら。

id="gmarkerjs"
このIDは必ずこのまま入力してください。

data-key="<GOOGLE_MAP_API_KEY>"
Google MapのAPI KEYを入力してください。
API　KEYの取得方法はこちら

あとがき

これがあればGoogle Mapライフが送れるはずッ！！

ソースコード

v1.0 とりあえず動くよ！ソースコードはこちら

参考

Google Maps APIを使って複数のマーカーと吹き出しを設置してみる
Google Maps JavaScript API

Google Maps の APIキー を簡単に取得する

スポンサードリンク