Pickupニュース

gmaps.js
jQueryプラグイン

gmaps.js

Googleマップを簡単に挿入するjQueryプラグイン
gmaps.jsはGoogleマップをWebページに簡単に埋め込むことが出来るjQueryプラグインです。地図を表示するだけでなく、マーカーやポリゴン等を追加、ストリートビューの表示など様々なオプションが用意されています。
このページでは、gmaps.jsをWebサイトで使用するための導入から基本的な使い方を紹介しています。
1 gmaps.jsの導入
Google Maps APIの利用には必ずAPIキーの設定が必要になりました。

Google Maps API無償版のポリシー変更が6月22日に発表され、猶予期間が10月12日で終了した。
このポリシー変更は、Google Maps APIを利用しているユーザーにとって大きな影響があり、「突然、ウェブサイトの地図が表示されなくなる」という可能性もあるものだという。

gmaps.jsのリンク(ファイルをダウンロードして利用する場合)

ダウンロード

リンク先のDownloadをクリックして、ファイルをダウンロードします。

Webサイト

HTMLマークアップ

<head>タグ内にサーバーに設置したgmaps.jsまでのパスと、jQueryGoogleマップAPIへリンクする記述を追加します。
HTMLCopy
<script src="http://code.jquery.com/jquery-2.2.4.min.js"></script> <script src="https://maps.googleapis.com/maps/api/js?key=(API KEY)"></script> <script src="path/gmaps.js"></script>

gmaps.jsのリンク(CDNを利用する場合)

gmaps.jsはCDN配信サービスcdnjsでも配信されていますので、リンクを貼るだけでプラグインを利用することが出来ます。

HTMLマークアップ

<head>タグ内にCDNで配信されているgmaps.jsまでのリンクと、jQueryGoogleマップAPIへリンクする記述を追加します。
HTMLCopy
<script src="http://code.jquery.com/jquery-2.2.4.min.js"></script> <script src="https://maps.googleapis.com/maps/api/js?key=(API KEY)"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gmaps.js/0.4.12/gmaps.min.js"></script>

基本的な使い方

gmaps.jsはGoogleマップを挿入したい要素を指定して使用します。

HTMLマークアップ

Webページ内にGoogleマップを表示する要素を記述します。
HTMLCopy
<div id="map"></div>

スタイルシートの設定

Googleマップを表示する要素の幅、高さをスタイルシートで設定する必要があります。
CSSCopy
#map{ width: 100%; height: 300px; }

JavaScriptの記述

JavaScriptに以下のような記述を追加します。
JavaScriptCopy
map = new GMaps({ div: '#map', //地図を表示する要素 lat: 34.408882, //緯度 lng: 133.204869, //軽度 zoom: 18 //倍率(1~21) });

デモ


        <div id="map"></div>
    

        #map{
            width: 100%;
            height: 300px;
        }    
    

        $(function () {
            map = new GMaps({
                div: '#map', //地図を表示する要素
                lat: 34.408882, //緯度
                lng: 133.204869, //軽度
                zoom: 18 //倍率(1~21)
            });
        });
    

基本オプション

gmaps.jsでGoogleマップを表示するための基本的なオプションです。
プロパティ 内容 パラメータ
div 地図を表示する要素 HTML div要素
lat 表示する地図の中心緯度 ジオコード
lng 表示する地図の中心経度 ジオコード
zoom 地図の倍率(1~21倍、値が大きいほど拡大して表示) 1~21の数値(初期値15)
1 2 3 4 5 6 7

コメントを残す

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

記事ランキング