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>

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

テキストを中央に向かうにつれて大きくしたりできるjQueryプラグイン「jqIsoText」前のページ

次のページを自動で読み込んでくれるChrome拡張機能「AutoPager Chrome」を入れてみた次のページ

関連記事

  1. Sticky Multi Header Scroll
  2. Holmes

    JavaScript

    ページ内で特定のテキストを高速に検索してくれるライブラリ「Holmes」

    Holmesは、ページ内部を簡単にかつ高速に検索してくれるライブラリで…

  3. jQuery contextMenu plugin & polyfill
  4. Data Img

    JavaScript

    ブラウザ幅に応じて画像を切り替えれるレスポンシブ対応のjQueryプラグイン「Data Img」

    Data Imgはブラウザ幅に応じて最適なサイズの画像を切り替えて表示…

  5. Bricklayer

    JavaScript

    軽量なグリッドレイアウトを実装できる「Bricklayer」

    Bricklayerは軽量なグリッドレイアウトを実装することができるラ…

  6. JavaScript

    とてもシンプルで綺麗なツールチップを簡単に実装することができるjQueryプラグイン「gips」

    使いやすさや見た目もシンプルで綺麗なツールチップを実装することができる…

コメント

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

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

最近の記事

  1. 10種の野菜と5種のビーンズ サラダラップとドリップコーヒー
  2. EOS RP
  3. COMOLI シルクネルジャケット シルクネルドローストリングパンツ
  4. スターバックス ハシエンダ アルサシア

アーカイブ

PAGE TOP