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. Gradientify

    JavaScript

    シンプルなCSSグラデーション変化を実装できる「Gradientify」

    GradientifyはシンプルなCSSグラデーション変化を実装するこ…

  2. 2013年上半期jQueryプラグインまとめ

    JavaScript

    2012年に紹介したjQueryプラグインのまとめ

    当ブログで2012年にご紹介したjQueryプラグインをまとめてみまし…

  3. Playful Little Tooltip Ideas
  4. jQueryプラグインのスライダー集

    JavaScript

    【jQueryプラグイン】素晴らしい機能が満載のスライダー集

    jQueryプラグインには様々な役立つ機能がありますが、中でも人気が高…

  5. awNotices

    JavaScript

    スタート・ストップ機能がついたシンプルなjQueryニュースティッカー「awNotices」

    awNoticesはスタート・ストップ機能がついたシンプルに切り替わる…

  6. no-image

コメント

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

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

最近の記事

  1. Anker PowerExpand Direct 6-in-1 USB-C PDメディアハブ
  2. ペットボトルホルスター

アーカイブ

PAGE TOP