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. PWS Tabs jQuery Plugin
  2. Square Menu
  3. jQuery.appear

    JavaScript

    ビューポート外のコンテンツ表示を防止できる「jQuery.appear」

    jQuery.appearは、元々は非表示となっているものや、ビューポ…

  4. jquery countDownTimer
  5. JavaScript

    ボタンやアイコンに素敵なクリックエフェクトを実装できる「Waves」

    ボタンやアイコンに素敵なクリックエフェクトを実装することができる「Wa…

  6. Simply Modal Box

コメント

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

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

最近の記事

  1. クリニカのY字タイプのフロス
  2. 日和山公園の桜
  3. 成城石井 フレンチロースト
  4. COMOLI カシミアシルクニットパーカ
  5. 橋

アーカイブ

PAGE TOP