JavaScript

Google マップを簡単でシンプルに使えるようにしてくれる「gmaps.js」

Google マップをとても簡単に扱えるようにしてくれるgmaps.jsを使ってみました。経度と緯度を指定するだけでとても簡単に目的の地図を表示させることができます。ズームの倍率もオプションで指定できたり、マーカーも緯度と経度を指定して置くことができます。ということで以下使い方です。

[ads_center]

使い方

jQuery本体、Google マップ、gmaps.jsを読み込んでいきます。

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js?ver=1.7.1'></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script type="text/javascript" src="gmaps.js"></script>

そして、地図を表示させるための設定をします。

<script type="text/javascript">
var map;
$(document).ready(function(){
    map = new GMaps({
        div: '#map',
        lat: 35.710058,
        lng: 139.810718,
    });
});
</script>

mapというidがついたボックスに地図を表示させます。

<!-- ここに地図を表示 -->
<div id="map"></div>

マーカーをつけたい場合はmap.addMarkerを追加します。

<script type="text/javascript">
var map;
$(document).ready(function(){
    map = new GMaps({
        div: '#map',
        zoom: 15,
        lat: 35.710058,
        lng: 139.810718
    });

    map.addMarker({
        lat: 35.710058,
        lng: 139.810718,
        title: 'タイトル',
        infoWindow: {
            content: '<p>東京スカイツリー TOKYO SKYTREE</p>'
        }
    });
});
</script>

この他にもオーバーレイやルート表示、画像化など、できることがたくさんあるので色んなところで活用できそうですね。以下のサイトからダウンロードできます。

関連記事

  1. JavaScript

    ぼかし背景を画像から作成できるjQueryプラグイン「Blurr」

    BlurrというjQueryプラグインを使えば、ぼかし背景を画像から簡…

  2. P-Loading

    JavaScript

    パワフルなローディングマスクを実装できるjQueryプラグイン「P-Loading」

    P-Loadingは、パワフルなローディングマスクを手軽に実装すること…

  3. jQuery Seat Charts
  4. SmartPhoto.js

    JavaScript

    レスポンシブなイメージビューアを実装できる「SmartPhoto.js」

    SmartPhoto.jsは、レスポンシブに対応したかっこいいイメージ…

  5. Typewriter JS

    JavaScript

    タイプライターっぽいエフェクトでテキストを表現できる「Typewriter JS」

    Typewriter JSは、タイプライターを使って文字入力するような…

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

最近の記事

  1. スタンスミス(EDIFICE/IENA別注)
  2. WI-1000XM2
  3. mill オイルヒーター
  4. Anker PowerWave 10 Pad & Stand セット

アーカイブ

PAGE TOP