Google+ ものっすごい簡単にGoogleマップAPIを操作出来るjQueryGoogleMAPプラグイン : ナオハシのパソコンのすごくおもしろい裏技や芸能GOSSIP♪
    2017 05 « 1.2.3.4.5.6.7.8.9.10.11.12.13.14.15.16.17.18.19.20.21.22.23.24.25.26.27.28.29.30. »  2017 07

    スポンサーサイト

     【--//--】

    上記の広告は1ヶ月以上更新のないブログに表示されています。
    新しい記事を書く事で広告が消せます。

    Category: スポンサー広告

    Comments (-)Trackbacks (-) | トップへ戻る

    ものっすごい簡単にGoogleマップAPIを操作出来るjQueryGoogleMAPプラグイン

     【28//2015】

    jQueryGoogleMapプラグイン
    タイトルで全部言っちゃってる気がしないではないですが、WebサイトにGoogleMAPを設置して、色々と簡単にAPIを叩けるプラグインです。

    ちなみにこの記事の為にこのjQueryプラグインを読み込むなんてことはしておりませんので、説明で使用しているMAPは全てキャプチャー画像です。本来なら、ぐりぐりと拡大縮小出来るあのMAPを貼り付ける事が出来ます。気になる方は、最後に紹介するチュートリアルページをご覧になっていただければ、わかると思います。

    まずは呼び出し


    基本の呼び出し。
    まずはページのどっかに書いて読み込みましょう。

    <script src="javascripts/jquery.js"></script>
    <script type="text/javascript" src="//www.google.fr/jsapi"></script>
    <script type="text/javascript">
    google.load("maps", "3.4", {
    other_params: "sensor=false&language=fr"
    });
    </script>
    <script type="text/javascript" src="javascripts/jquery.googlemap.js"></script>

    普通のMAP


    これなら普通にGoogleMAPのコードコピペすればいいです。

    <div id="map" style="width: 300px; height: 300px;"></div>
    <script type="text/javascript">
    $(function() {
    $("#map").googleMap({
    zoom: 10, // Initial zoom level (optional)
    coords: [48.895651, 2.290569], // Map center (optional)
    type: "ROADMAP" // Map type (optional)
    });
    })
    </script>

    マーカーを追加し、マーカーにリンクを追加


    マーカーにリンクをはる
    ただ、、、マーカーをクリックするっていう事自体が一般的なユーザー体験ではないので、注意が必要です。

    <div id="map" style="width: 300px; height: 300px;"></div>
    <script type="text/javascript">
    $(function() {
    $("#map").googleMap();
    $("#map").addMarker({
    coords: [48.895651, 2.290569], // GPS coords
    url: 'http://www.tiloweb.com', // Link to redirect onclick (optional)
    id: 'marker1' // Unique ID for your marker
    });
    })
    </script>


    マーカーを追加し、マーカーをクリックしたら吹き出しを出して案内文を表示する


    説明文
    マーカー自体をクリックすると説明文を吹き出しします。こちらもマーカーをクリックするというユーザー体験を過信しないように作る必要があります。

    <div id="map" style="width: 300px; height: 300px;"></div>
    <script type="text/javascript">
    $(function() {
    $("#map").googleMap();
    $("#map").addMarker({
    coords: [48.895651, 2.290569], // GPS coords
    title: 'Marker n°1', // Title
    text: '<b>Lorem ipsum</b> dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.' // HTML content
    });
    })
    </script>

    その他の機能


    その他にも簡単コードで以下の様なことが出来ます。
    道案内はちょっとだけ複雑ですけどね。

    複数のマーカーを設置する
    複数マーカーの設置


    道案内をMAPに表示する(複数も可)
    道案内

    オリジナルマーカーを利用する
    オリジナルマーカーの利用


    jQuery Google Mapのチュートリアル、ダウンロードは以下から


    jQuery Google Map

    これだけ手軽に設置出来るプラグイン、是非チェックしてみてください。
    関連記事
    スポンサーサイト

    Category: 裏技

    Theme: お得なパソコン情報

    Genre: コンピュータ

    Tags : ナオハシ 無料 Google

    Comments (0) | Trackbacks (0) | トップへ戻る

    Commentform


    URL:




    Comment:

    Password:

    Secret:

    管理者にだけ表示を許可する

    Trackbacks

    全記事表示リンク

    プロフィール

    ナオハシ

    Author:ナオハシ
    広島で主に風俗店などのホームページやバナーを作成したり、ヘブンやワンナビなどのランキングの為のアクセスを販売したり、自動アフィリエイトプログラムなどを組んだりしています。
    製作などの仕事も請け負いますのでご連絡ください♪
    パソコンの裏技などを投稿いたします♪

    検索フォーム

    ブロとも申請フォーム

    QRコード

    QR

    フリーエリア

    上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。