時々日本地図をサイトに載せ、そこから地域のページにリンクさせるということをすることがありますが、47都道府県のリンクを日本地図上に配置する作業は、とても骨が折れます。 jQueryのプラグインで、Japan Mapという、日本地図をcanvasで表示し、 マウスをホバーしたときや、地域をクリックしたときのアクションをつけることが出入るものが公開されていましたので、ご紹介いたします。 Japan Mapのサイト↓ Japan Map ( jQuery plugin ) DEMO 使い方 まず、Japan Mapのサイトから「jquery-japan-map.js」をダウンロードし、 htmlのheadでjQueryとともに読み込みます。 <head> ・・・ <script type="text/javascript" src="js/jquery-1.9.1.min.js"></scrip
Close-Up Enterprise 日々刻々、変化を続ける企業の経営環境。変化の中で各企業が模索する経営戦略とは何か?『週刊ダイヤモンド』編集部が徹底取材します。 バックナンバー一覧 「駐車場が道路になった」「自宅がいつの間にか美容院になっていた」「バス停が消えた」――。3月末に起こった“グーグルマップ”ショック。騒動の裏にはデジタル事業の覇権争いを左右する位置情報データをめぐる各陣営のつばぜり合いが垣間見える。(ダイヤモンド編集部 鈴木洋子)
Google マップはグーグルが提供している地図サービスです。この Google マップをカスタマイズして独自のマーカーを表示させたり、指定した区間のルート検索を行ったりすることができるように色々な API が提供されています。ここでは Google マップで提供されている API の中でもウェブサイトで利用者が操作可能な地図をカスタマイズして表示することができる Google Maps JavaScript API の使い方の解説します。 ※ Google マップを利用者として使う場合の使い方については「Googleマップの使い方」を参照されて下さい。 なお JavaScript の基本的な使い方については「JavaScript入門」を参照されてください。
jGmaps | jQuery Plugins Googleマップを使った経路案内も一瞬で実装できるjQueryプラグイン「jGmaps」 必要なライブラリを読み込んで、次のようにjgmapsメソッドを呼び出すとGoogleマップによる経路案内の地図と文字による案内情報が出ます。 $('#mapa').jgmaps( { width: 300, height: 300, directions:{ address: ['東京都新宿区', '東京都港区'], usePanel: true, panelId: 'panelDirections' } } ); 次のように、経路が地図に表示されます。 文字による案内情報も表示できます。 会社案内や会場案内なんかもこれで速攻実装できそうですね。 ダウンロードできるサンプルをいじくってみましょう。 地名に日本の場所を漢字で使う場合、文字コードはUTF-
インターネットからすぐにご購入いただけます。 機能制限なしで15日間ご利用いただける体験版もございます。
トップページ 日本地図 都道府県別地図 北海道 / 青森県 / 岩手県 / 宮城県 / 秋田県 / 山形県 / 福島県 / 新潟県 / 茨城県 / 群馬県 / 栃木県 / 埼玉県 / 東京都 / 千葉県 / 神奈川県 / 山梨県 / 長野県 / 富山県 / 石川県 / 福井県 / 静岡県 / 愛知県 / 岐阜県 / 三重県 / 大阪府 / 京都府 / 滋賀県 / 兵庫県 / 奈良県 / 和歌山県 / 鳥取県 / 島根県 / 岡山県 / 広島県 / 山口県 / 徳島県 / 香川県 / 愛媛県 / 高知県 / 福岡県 / 佐賀県 / 長崎県 / 熊本県 / 大分県 / 宮崎県 / 鹿児島県 / 沖縄県 デザイン日本地図 ご使用にあたって・リンク
概要 地図などの img 要素に、map 要素と area 要素で imagemap を指定したとき簡単にロールオーバー効果を与えることができる JavaScript ライブラリです。 動作確認用の demo ダウンロード 使い方 画像のファイル名を目印にしてロールオーバー効果を与えることができます。 例えば、次のような XHTML のソースの断片があったとします。 <p><img src="img/map_swap0.gif" alt="地図" width="300" height="200" usemap="#imagemap" /><p> <map name="imagemap" id="imagemap"> <area shape="rect" coords="0,0,30,30" href="#area1" alt="エリア1" /> <area shape="rect"
CSS Image Maps - Flickr-like Technique? Below is a sample image map that's built entirely using CSS and XHTML. CSSだけでイメージマップを作る有用サンプル。 画像の特定部分にカーソルを合わせると、説明を画像上に表示できるCSSとXHTMLサンプルが公開されていました。 JavaScript を一切使っておらず、CSSだけで実現されているところがすごいですね。 JavaScript が要らず、次のような綺麗なHTMLで実現できるところも嬉しいですね。 実装も簡単そうです。 <dl id="officeMap"> <dt id="monitor">1. Monitor</dt> <dd id="monitorDef"><a href="#"><span>Here's my 17" M
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く