Googleマップより簡単！JavaScriptで独自マップやナビ機能を作成できる「mapfit」を使ってみた！ - paiza times
どうも、まさとらん（@0310lan）です！ 今回は、簡単なJavaScriptコードを記述するだけでインタラクティブなマップを自分のWebサイトに設置できるサービスをご紹介します！ Googleマップよりも手軽に扱えるのが特徴で、スクリプトを読み込んで少ないコードを記述するだけなので誰でも簡単に利用できると思います。 マップのカスタマイズやマーカーの設置、イベント処理、ナビ機能など…、それぞれの基本的な使い方を詳しく解説していきます！ 【 Mapfit 】 ■「Mapfit」の使い方 それでは、実際に「Mapfit」を使うために必要な準備から進めていきましょう！ 「Mapfit」を使うには、専用のCSSファイルとJavaScriptファイルが必要になるのですが、これらはCDN経由で簡単に導入できるようになっています。 以下の「linkタグ」と「scriptタグ」をHTMLファイルに挿入す
JavaScriptで制御できるWebベースの万能マップエディタ「Mapbox Studio」を使ってみた！ - paiza times
どうも、まさとらん（@0310lan）です！ 今回は、自分好みのマップをブラウザ上でカスタマイズしたり、JavaScriptから自在に制御可能な地図サービスのご紹介です！ データを取り込んでマッピングしたり、プラグインによる拡張も可能で自分のWebアプリやサービスなどにも簡単に組み込めるスグレモノです！ 【 Mapbox Studio 】 ■「Mapbox Studio」の使い方 それでは、まず最初に「Mapbox Studio」の基本的な使い方から見ていきましょう！ 初めての人は無料のユーザー登録が必要なので、サイトのトップページにあるボタンをクリックします。 好きなユーザー名・メルアド・パスワードだけで、簡単に登録ができます！ 登録後は、Webページにマップを表示させる簡単なチュートリアルが始まるので、試しにやってみましょう！ 表示された画面にある「JS」の項目をクリック！ 左側の「C
Maplace.js - 軽量なjQuery × Googleマップライブラリ MOONGIFT
Googleマップをプログラマブルに組み込むのに良さそうです。 GoogleマップはAPIの多彩さ、機能の柔軟さもあって様々なサービスで使われています。位置情報や地図を扱おうと思ったら一番に考えるのではないでしょうか。 そんなGoogleマップをさらに手軽に使えるようにしてくれるライブラリがMaplace.jsです。機能は限られますが広範囲に利用できそうです。 まずは簡単なデモ。地図の表示を行います。コードとしてはたった数行です。 // JavaScript var maplace = new Maplace(); maplace.Load(); // or new Maplace().Load(); // HTML <div id="gmap"></div> その結果は次のようになります。 シンプルな地図表示。 次はドロップダウンやリストを使ったマーカーのデモ。マーカーは自動的に中央に表
「住宅都市整理公団」別棟 : 東京の中心は空虚ではない
2013年08月19日15:49 カテゴリ地図・GPS 東京の中心は空虚ではないTweet 「路線図アーティスト」、エセックス大学のMax Roberts博士による東京の地下鉄路線図デザインが話題になっていた。これ↓ 出典のぼくが読んだ元記事はこちら 博士は認知心理学の観点から路線図のデザインを手がけておられるとのこと。でもこれ、見やすいんだろうか。いや、見やすいと思う方もいらっしゃるだろうし、地図って既存の形式への慣れが大きくものを言うし、この手の話題って議論を呼びやすいのであまりうかつなことは言えないんですけれども。とにかく、ぼくは見づらいなあと思った。で、なんで見やすくないのかを考えたら、おもしろいことがわかったのでそれについて書こう。 博士による他の都市の地下鉄路線図を見てみよう。地下鉄路線図デザインの老舗・ロンドン↓ パリ↓ ニューヨーク↓ いずれも同心円と放射状の組み合わせで駅
Google Maps 入門
Google マップはグーグルが提供している地図サービスです。この Google マップをカスタマイズして独自のマーカーを表示させたり、指定した区間のルート検索を行ったりすることができるように色々な API が提供されています。ここでは Google マップで提供されている API の中でもウェブサイトで利用者が操作可能な地図をカスタマイズして表示することができる Google Maps JavaScript API の使い方の解説します。 ※ Google マップを利用者として使う場合の使い方については「Googleマップの使い方」を参照されて下さい。 なお JavaScript の基本的な使い方については「JavaScript入門」を参照されてください。
Google Maps API V3 での細かな設定 | バシャログ。
最近だんだん暖かくなってきて嬉しい kimoto です。今日は啓蟄ということで、冬眠から覚めた虫も這い出てくるそうです。 さて、前回書いた Google Map API V3 ですが、前回は基本的なことをざっと紹介しました。 今回は、そこからちょっとだけ踏み込んで、よくある設定を簡単にご紹介します。 マウスホイールでのズーム デフォルト設定だと、マウスホイールで縮尺が変更になります。 ホイールで拡大縮小ができるのは便利といえば便利なのですが、ページをスクロールしようとしてるのに、マップにポインタが重なった瞬間にページがスクロールせずマップが縮小されて行ったりします。 これは意外と不便なので場合によってはオフにした方が良いでしょう。 google.maps.event.addDomListener(window, 'load', function() { var map = document
そろそろ確認！Google Map API V3 への移行は済んでますか？ | バシャログ。
寒い！最近の状況を説明するにはひと言で十分。 寒い！！kimoto です。 Google Map を自分のサイトに埋め込めることができる Google Maps API。 現在の最新バージョンは v3 なのですが、一つ前の v2 のサポートが今年の5月に切れます。 （v2 のマニュアルにも注意書きがあります） ※ 2/26追記：正確にはサポートが切れたのは2010年の5月で、2013年の5月までは動作を保証する、という事だそうです。つまり、それ以降は動作の保証が無くなるということですね。 もし API を利用している方はバージョンが幾つか確認し、v2 であれば早急に v3 に移行することをおすすめします。 てことで、v3 の設置の仕方を簡単に説明しようとおもいます。 読み込み 読み込むコードはこちら。 <script type="text/javascript" src="http://m
放射線MAPアプリ: 地図に測定地点と詳細なデータを表示。測定値の公開もできるソーシャルマップ。無料 | AppBank
何かと気になる放射線。公的機関による測定は各地で行われていますが、公開はそれぞれのウェブサイトで行われているのでチェックしにくいのが難点です。 そこで便利なのが放射線MAPアプリ。地図上に現在地周辺の放射線の測定地点とその測定値を表示するので分かりやすく、測定日・測定者でフィルタリングも行えます。 また、測定した値を公開することも可能。さらに Q&A で基礎知識も身に付けられるなど、気になる放射線を学んだり、チェックしたりできる良アプリです。 現在地が取得できる場合は、マップ上に現在地を示すポイントと周辺の放射線測定地点と測定値が表示されます。 左：手動で現在地を設定するには、画面を長押し。 右：画面をドラッグして中央の【＋】を現在地に合わせます。 現在地周辺の測定地点と測定値を表示したところ。 周辺の測定地点と測定値が取得できない場合は、後ほどご紹介するフィルタリング機能を使ってデータ取
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
