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. socialShare.js
  2. no-image

    JavaScript

    フロントエンドアプリケーションを構築するためのJSライブラリ「HyperApp」

    HyperAppは、フロントエンドアプリケーションを構築するための1K…

  3. Vague.js

    JavaScript

    要素をぼかすことができるjQueryプラグイン「Vague.js」

    要素をぼかすことができるjQueryプラグイン「Vague.js」が面…

  4. shCircleLoader
  5. Tip

    JavaScript

    シンプルなUIで使いやすいツールチップ実装「Tip」

    TipはシンプルなUIによる使いやすいツールチップを実装することができ…

コメント

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

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

最近の記事

  1. サーモンアボカドサラダラップとドリップ
  2. 猿田彦フレンチ
  3. Zarigani Curry 挽肉のカレー ゴーダチーズとピクルスを添えて
  4. ビジネスホテル
  5. ドリップコーヒー

アーカイブ

PAGE TOP