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

  • 2015/10/24
  • このエントリーをはてなブックマークに追加

スポンサーリンク

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

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

まずは呼び出し


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

<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

これだけ手軽に設置出来るプラグイン、是非チェックしてみてください。
それでは、また。

スポンサーリンク

トップへ戻る

Twitter版のネタ帳では毎週月曜~金曜までWeb屋さんに役立つ色んな情報や単なるネタまでをつぶやいています。

関連するエントリー

コメント

この記事にコメントする人はクリック

コメントポリシーをお読みください
管理者にだけ表示を許可する

FC2Ad

広告


IT・Web業界の求人なら転職サイトgreen(グリーン) ホームページテンプレート、WordPressテーマ、Facebookページテンプレートならクラウドテンプレート ネットマーケティングとは│ネットマーケティング検定 SEOコンサルティング&SEO対策 無料レスポンシブWebデザインテンプレート 広告主募集

あわせて読みたい
フィードメーター - ホームページを作る人のネタ帳

人気の記事一覧

あなたのブログの再訪問者を増やす50の方法

私の経験から感じた事を書き記します。全てが全てその時々で、正しいとは限りませんが、一つの指針としてお使いください。因みに全部リスト化すると230くらいありましたが、それはきっとセミナーとかでやるかなぁと。

http://e0166.blog89.fc2.com/blog-entry-824.html

あなたの生活を確実に拘束し時間を浪費させる動画50

今回は生産性を向上させる事ばかり考えて記事を書いてきたので、逆に年末にかけて忙しい皆さんの時間を出来るだけ拘束し、忙しさを倍増させるものが無いかを考えました。その結果、動画で行こうと言う事になったのが1ヶ月以上前。動画閲覧本数はおそらく600本以上。その中から、おもしろそうなものを50個ベストチョイスいたしました。

http://e0166.blog89.fc2.com/blog-entry-820.html

webデザインのセンスを磨く○○系のwebデザインまとめ

webデザインを学ぶならwebデザインから。と言うわけで、今回は海外のエントリを中心に、○○系のまとめをまとめます。

http://e0166.blog89.fc2.com/blog-entry-817.html

jQueryプラグインのベストトレンド総まとめ2010

もはやこの業界ではかなり浸透しつつあるjQuery。今回はそんなjQueryにスポットを当て、本年度紹介された中でも、ホットなトレンドプラグインをご紹介します。

http://e0166.blog89.fc2.com/blog-entry-816.html

ツイッターの日常における35の行動パターン

私が良く見かける35の行動パターンに名前をつけてみようと思う。年末の誰も見てない時に公開しようと思っていた、ただのネタだったのですが、結構時間がかかりこの時期に・・・。

http://e0166.blog89.fc2.com/blog-entry-823.html

ウェブデザイナーのためのウェブアプリ15

OSがWindowsであろうと、ubuntuであろうと、共通のサービスを受けることができるのがウェブアプリケーションです。ウェブデザイナーの中には、自宅ですでにubuntuを利用している人も多い。また、Mac、Windowsと、各自それぞれの使いやすい物を利用していると思います。

http://e0166.blog89.fc2.com/blog-entry-784.html

愛用するGoogleChromeエクステンション12個

この2年でノートPC2台購入。自他のPCはクラッシュしてリカバリー。会社のPCは新しいのがあたり、再セットアップ。そんなこんなで、会社はまぁともかくとして、とりあえず全PCが比較的3ヶ月に一度リカバリーしてもいいように、自分用にメモとして残しておきます。

http://e0166.blog89.fc2.com/blog-entry-784.html

文章や会話のプレゼンテーションを向上させる方法

文章力がないためにプレゼンに失敗した、会話がうまくできずにプレゼンに失敗した。こういう経験はなかなか無い。なぜなら多くの場合、失敗したことに気がつかないからです。

http://e0166.blog89.fc2.com/blog-entry-802.html

サイトの裏側の意識を変え売り上げをアップする方法

ネットショップ運営者が、あることをちょっとだけ始めてみただけでわずか5ヶ月で売り上げが3倍になりました。はたして、webサイト運営がどのように変わったのでしょうか。。

http://e0166.blog89.fc2.com/blog-entry-749.html

webサイトのリピーターを増やすさりげない5つのコツ

多くのビジネスサイトのアクセス数を支えている大手検索サイト、Yahoo、Googleのアルゴリズムが変わる事で、突然商売がひっくり返る事態を回避する方法。

http://e0166.blog89.fc2.com/blog-entry-746.html