WEBデザインの勉強

WEB制作初心者が1から勉強するブログ。

GoogleMAPにオリジナルマーカーや吹き出しが簡単に設置できるjQueryプラグインAxGmap

f:id:mmmmofu:20160927120056p:plain

objc-lovers.com

GoogleMAPにオリジナルマーカーや吹き出しが簡単に設置できるjQueryプラグイン
マップの色変更には対応していない

デモはこちら

http://efu.sakura.ne.jp/web/axgmap/

GitHubからファイルをダウンロードする
github.com

jQuery」と「Google Maps API」と「jquery.axgmap.js」を読みこむ

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>AxGmap</title>
  <script src="https://maps.googleapis.com/maps/api/js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
  <script type="text/javascript" src="js/jquery.axgmap.js"></script>
</head>
<body>
  <div class="axgmap" data-latlng="35.658105, 139.701758" data-zoom="15"
  data-map-width="750" data-map-height="420">
  <p data-marker-image="img/marker.png" data-title="渋谷駅" data-window-open="1" data-latlng="35.658318, 139.701570">渋谷駅</p>
</div>
</body>
</html>

2016年6月22日からGoogle Maps APIを使用する際はAPIキーが必須になった模様
ここからAPIキーを取得する
developers.google.com

<script src="https://maps.google.com/maps/api/js?key=APIキー"></script>

参考
blog.cloud9works.net

クラス「axgmap」 が地図になる

地図オプション

data-latlng 地図の座標
data-zoom 地図のズームレベル
data-map-width 地図の横幅(CSSで設定も可)
data-map-height 地図の高さ(CSSで設定も可)

etc...

マーカーオプション

data-latlng マーカを設置する座標
data-marker-image マーカーの画像
data-title マウスオーバーで表示する文字
data-window-open ふきだしを開いておくか(true,false or 0,1)

座標の確認はGoogleMAPを開き、目標の位置を右クリック→「この場所について」で座標が表示される