ImageMaps - Naver製。地図画像の編集ツール MOONGIFT
地図は地図のまま利用するのではなく、多くの場合その上にアイコンを載せたり線を描いたりします。そうすることで目的の場所を目立たせたり、駅などから目的地へ移動しやすくなるでしょう。 今回紹介するのはImageMaps、地図の上にアイコンなどを載せられるjQueryプラグインです。 ImageMapsの使い方 編集画面です。アイコンやテキスト、円や四角などが描けます。 こんな感じでアイコンを載せて大きさを変えたりしながら地図を編集していきます。 できあがった地図。これは画像ではなく、SVGとなっています。 ImageMapsの編集結果は読込専用のSVGとなっています。画像ではないので注意してください。日本語なども問題なく扱えますし、アイコンやドローを多彩にすると便利そうです。 ImageMapsはjQuery/JavaScript製のオープンソース・ソフトウェア（MIT License）です。
World Map Generator by kevalbhatt
Description This WorldMapGenerator is jquey plugin for creates a Map using SVG using this plugin user can select and get timezone value of selected area. Usage <script type="text/javascript" src="//cdn.jsdelivr.net/jquery/1/jquery.min.js"></script> <script type="text/javascript" src="[yourpath]/WorldMapGenerator.js"></script> Select any element you want and create map inside that element
[JS]画像を用意しなくていいから簡単！クリッカブルに対応した日本の都道府県の地図を表示するスクリプト -Japan Map
デモページ 2 Japan Mapの使い方 Step 1: 外部ファイル jquery.jsと当スクリプトを外部ファイルとして記述します。 <head> ... <script src="https://code.jquery.com/jquery-2.1.1.js"></script> <script src="jquery.japan-map.min.js"></script> </head> Step 2: HTML 日本地図を配置するdivをセットします。 <body> ... <div id="map-container"></div> ... </body> Step 3: JavaScript jQueryのセレクタで配置する場所を指定し、スクリプトを実行します。 <script> $(function(){ $("#map-container").japanMap({ on
Google Mapで任意の場所の周囲にある施設をマーカーで表示するjQueryプラグイン・WhatsNearby
Google Mapで、任意のポイントと、そのポイントの周囲にある施設をマーカーで表示出来る、というスクリプトです。範囲の距離の指定や施設の種類、中心地に設定したマーカーなども設定出来るようになっています。 Google Mapの任意の場所の周囲にある施設をマーカー表示する、というもの。うまく説明出来ませんが語彙がアレなのでご了承下さい。 以下動作サンプルです。 下北沢駅周辺の半径200メートル内のカフェを表示させました。マーカーをクリックすればお店の情報がポップアップします。 $("#foo").whatsnearby({ zoom:17, width:"100%", address: "下北沢", placesRadius: 200, placesTypes: [ 'cafe' ] });セッティングは上記のような感じ。placesRadiusで指定場所から半径～メートル内にある、pl
Googleマップを、オートコンプリート機能付きで検索出来るようにするシンプルなjQueryプラグイン・Geocomplete
Googleマップをオートコンプリート機能付きで検索出来るようにする、というスクリプトのご紹介。シンプルで良さそうですね。jQueryに依存します。 検索可能なGoogleマップをWebサイトに設置した際に、オートコンプリート機能を付けたもの。情報量の多い地図コンテンツとは相性ピッタリですね。 検索出来るGoogleマップ向けのキーワード補完スクリプトです。便利。 上記のように入力中に該当キーワードが表示されます。 <script src="http://maps.googleapis.com/maps/api/js?sensor=false&libraries=places"></script> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <scri
VenoBox 2 - modal window javascript plugin, touch swipe gallery
VenoBox 2 Just another jQuery Vanilla JS Lightbox plugin, suitable for Images, Videos, Inline contents, iFrames, Ajax requests. The big difference compared to many others modal-window plugins is that VenoBox calculates the max width of the image displayed and preserves its height if is taller than the window. (so in small devices you can scroll down the content, avoiding vertical microscopic resiz
Maplace.js - A Google Maps javascript plugin for jQuery.
Maplace.js helps you to embed Google Maps into your website, quickly create markers and controls menu for the locations on map. It requires jQuery and Google Maps API v3 so you need to have both in your page. Features Straightforward implementation with simple options Can run as many maps as required Markers and custom icons, zoom level and custom controls menu Supports for Directions, Polygons, C
Initmapjs Outcomes/Objectives by jeromesmadja
Core Application Scoring Guides to be used: *Reading, Writing, Quantify, Communicate, Collaborate, Use Technology. Foundation Skill(s) Scoring Guides to be used: *Technology, Communication, Quantification, Analysis. Task Description As students are introduced to computer operation, terminology, ASCII and binary numbering system, history of computers, desktop publishing they will be able to identif
個人的に使ってるtableの日本地図をjQueryで叩く
CSSはこちら。特に変わったことはしていません。CSS3はtext-shadowとtransitionです。これは必須という訳ではないですね。 #map1 a{ font-size: 14px; color: #666; text-decoration: none; text-shadow: rgba(255,255,255,0.6) -1px 1px 0; } #map1 td{ padding: 6px 3px; text-align: center; } #map1 td.frame{ padding: 0; width: 20px; height: 10px; } #map1 td.land{ background-color: #eef2bf; } #map1 td.sea{ background-color: #f0f9ff; } #map1 td.selected{ back
APIと少しのjQueryコードでGoogle Mapの地図の色を変更する
Google MapのデザインをjQueryで変更する為のメモ書き。Google Map APIとjQueryでGoogle Mapの色合いを変更し、オリジナルのマーカーを付けてみます。こうする事で、既存デザインに合わせたGoogle Mapが出来ます。 今後必要になりそうだったので調べ物をしたついでにメモ書きです。デザインを変更、というと語弊がありますけど、好みの色に変えてみます。 ゴール↓ こんな感じのをjQueryでやろう、みたいな内容です。特に目新しい情報では無いですが。 なんかシャドウ変になっちゃった・・色やマーカーだけでもWebサイトで使用している色にあわせれば地図だけ浮いてしまうような事も無くなるんじゃないかなと思います。 ジオコーディングリクエスト<script type='text/javascript' src='http://ajax.googleapis.com/a
11 Helpful jQuery Google Maps Plugins and Tutorials – Pelfusion.com
jQuery Google maps are very easy to use technique and popular among the users to locate a specific location on the world map. Which can easily be done using some of jQuery Google Maps plugins. Companies are integrating Google maps on their websites to help people know where they are located. Though it is very simple map but complexity comes in when you want to integrate it. But this complex proces
郵便番号や地名を入力するだけでGoogleマップ検索できる地図コンテンツをjQueryで作る
ちょっと便利そうなライブラリがあった ので備忘録。Googleマップでキーワード や郵便番号を入力するだけで、該当する 場所を表示します。ちょっと場所を確認 したい、みたいなシーンは地味にありま すし、これは手軽に実装出来るので覚え ておきたい。 Googleマップネタです。jQueryでオート検索する地図コンテンツを作りましょう、というもの。フォーム入力の補助にもなりそうなならなそうな。 jQuery Automatic Geocoder動作サンプルです。適当に入力してみてください。郵便番号でも検索できます。 表示が、ブログのCSSに影響されてしまっていますが気にしないで下さい。シンプルで使いやすい印象でした。 コード<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/
[JS]カスタマイズも豊富なマッピングコンテンツを作成するスクリプト -jQuery Geo
geomap find test 点・線・図形などのポイントをマップに配置。 jQuery Geoの使い方 外部ファイル 「jquery.js」と当スクリプトを外部として記述します。 <script src="http://code.jquery.com/jquery-1.6.4.min.js"></script> <script src="http://code.jquerygeo.com/jquery.geo-1.0a3.min.js"></script> HTML 地図の配置は、jQueryのセレクタで指定できるようidを指定した空のdiv要素を使います。 <div id="map" style="height: 320px;"></div> JavaScript 空のdiv要素をjQueryのセレクタで指定し、geomap();を呼び出します。 <script> $(functio
地図にマッピングし、指定した位置にコンテンツを表示出来る軽量jQueryプラグイン・CRAFTMAP
使いやすそうだったので備忘録。 Googleマップライクに動かせて マーキング、その場にコンテンツ を表示させる事も可能な軽量 jQueryプラグイン・CRAFTMAPです。 ちょっと説明下手ですね・・ マーキングもデザインのカスタマイズも割と楽で色々なものに応用できそうです。商用は有料なのですが、もしかしたら使うかも。 メニューから選択するだけでなく、ドラッグ可能でマーカーをクリックすることでもスクロールしてくれます。地図コンテンツでたまに見かけるインターフェースですね。 特にGoogle Map API等は使用していません。シンプルに、地図の画像を作って、座標に応じてマーカーを設置する、というものです。ライブラリも軽量ですよ。 サンプル作ったのでどうぞ。 Sample コード<script type='text/javascript' src='https://ajax.googlea
GoogleMapをインクリメンタルサーチし、位置情報を取得するjQueryプラグイン・Address Picker
住所を入力するとオートサジェスト でGoogleMapから候補を出し、選択 するだけで位置を取得できるjQuery プラグイン・Address Pickerをご紹介 します。動作も速くて少し驚きです。 GoogleMap APIを使用しています。 ちょっとこのタイトルだと誤解与えそうですね・・・オートサジェストとして出た候補を選択するだけで地図を変更、経度や緯度などの位置情報も取得するjQueryプラグインです。GoogleMapAPIを使っています。 入力するだけで候補が出るオートサジェスト機能と、候補にマウスを乗せるだけでするだけで地図が切り替わるインクリメンタルサーチ機能の付いた位置情報ピッカー。 と、聞こえはなかなかいいですけどオートサジェストが日本語入力だと若干挙動が微妙なんですよね。Chromeはそこそこ良い反応ですが、Firefoxは特に微妙ですな・・・IEは大丈夫ぽかったで
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
MapIt | An easy way to embed google maps in your site.
Lazy-loading Google Maps by Osvaldas Valutis
クリッカブルな日本地図を実装するjQueryプラグイン・「Japan Map」
http://mappy.apphb.com/
フィルタリング可能なGoogleMapを実装するjQueryプラグイン・Searchable Map
