方向音痴もこれで勝つる！的確に集合場所とルートを表示する Google Maps Engine Lite がやばい 公開日：2013年4月 3日 カテゴリ：Googleネタ みぞれしと同様に超雨男で方向音痴のすしぱくです。(‘A’)ﾉ おかげさまで週末のお花見は雨！『すしぱくさん、日曜日は外に出るんですか？..えぇー出るんですか？家で警備しててくださいよ』とか言って石を投げつけられるレベルです。 今回そんなお花見の集合場所と撮影ルートに使った Google Maps Engine Lite をご紹介します。MAPアプリが無いと録に目的地につけない迷子にとっては神ツールですよ。 早速使ってみよう！ まだ、ベータ版らしいので英語ヘルプになっていますが、日本語使えます！(‘A’) ※ 非商用目的で利用可 Google Maps Engine Lite トップページはこんな感じです。新規ファイルか
今月発売予定の「メタルギアライジング」をそわそわ楽しみにしているアクションゲー好き seki です。 今回もWebサービスのご紹介です！ 最近よくよく見かける、「Google map」のデザインをお洒落にカスタマイズして載せているサイト。皆さんも一度は目にしたことがあるかと思いますが、こちら、どうやって作っているか気になりますよね。 今回は、js無知な私でも簡単に作れる Google Maps API 「Styled Map Wizard」の使い方を、ざっくりと例を挙げてご紹介します。 【参考サイト】 今回はこちらの記事より、参考・引用して解説します。こちら、とても丁寧に解説されているので、jsが分らなくても出来るかと。 今回作成したもの 画像ですみませんがこちら。 アイコンは seki になっていますが場所はバシャログ。本陣です。 色をモノクロにして、交差点やコンビニ、銀行などのアイコン
電車の乗り換えはかったるい。なるべく少ないほうがいい。 といっても、たとえば都内の移動で10回も乗り換えなきゃならないってこともない。 実際のところ、どれくらい乗り換えればいいものなのか？調べてみました。
Webサイトで地図を表示するのに便利なGoogle マップ。Googleが提供しているGoogle Maps APIを使って、地図を設置する方法から、マーカーを置いたり、道のりを表示したり、地図の色を変えたりするためのコードをまとめました。※Google Maps APIの中でも、ここではGoogle Maps JavaScript API v3を使ったサンプルを掲載します。 以下は目次です。クリックするとその項目へ移動します。 Google マップを設置する。 いちばん簡単なGoogle マップ ジオコーディングなGoogle マップ Google マップの読み込み方 場所を示す。 マーカーを置く アイコンを置く 吹き出しを出す 道のりを表示する。 ポリラインで描画する Directions Serviceを利用する 見た目をカスタマイズする。 コントロールのカスタマイズ デザインのカス
サイト制作において、アクセスマップなどの地図の表示はどうしてますか？「Google Maps API」を利用したり、ちょっとデザインにこだわりたい時にはイラストに描き起こしたりしてるんじゃないでしょうか。 今回は、Google マップをちょいとカスタマイズすれば、まるでイラストマップみたいに見せることができるんだぜ！というお話です。 記事中に出てくる画像は2012.3現在のもののため、現在のGoogle Maps APIでの表示とは異なりますので注意です…X(。 リンク切れしていたところを、なるべく近い内容の存在するページにリンクし直しました（2015.7.20追記）。 まずはしっかり抑えておきたい「Google Maps APIの基本」から。 基本をすっ飛ばして早速カスタマイズしたい方はこちら↓。 Google Maps APIの基本 Google マップはGoogle API キーを発
こんなタイミングであれですがWordPressにGoogle Mapsを貼り付けるためのプラグインを作りました。 WordPress › Simple Map « WordPress Plugins 会社概要のページなどに企業のお客さんが設置するのを想定していますので低機能ですが、とても簡単に使える上に、レスポンシブデザインのサイトとフレンドリーです。 このプラグインの特徴 [map addr="東京都千代田区永田町1-7"] または [map]東京都千代田区永田町1-7[/map] のように住所を指定するだけの簡単なショートコードで地図を設置することができます。 １つのページに複数のGoogle Mapを設置できます。 一定の横幅以下の環境（たとえばスマフォなど、デフォルトは480px以下）では、自動的にGoogle Static Mapsが表示されます。 フィルターフックが用意されてる
gmaps.js ? the easiest way to use Google Maps ストレス無しでGoogleマップを使ったサイトが作れる「gmaps.js」 Googleマップのサイトへの実装が本当に簡単で、かつ多機能なライブラリのご紹介です 簡単なマップを出すのに必要なコードは以下。 表示させるdivと緯度経度を指定するだけです 出来ることリストは以下 マップのクリック、ドラッグ時のイベントハンドラ実装 マーカー付与 ジオロケーション・ジオコーディング マップオーバーレイ マップ上のコンテキストメニュー実装 地図上の区画指定 目的地までのルート描画 静的な画像をマップ表示 などなど超多機能。 Googleマップ使うかもしれない場合は覚えておいて損はありません 関連エントリ Googleマップ関連のjQueryプラグインとチュートリアル集 スマホやタブレットでGoogleマップ風
ちょっと便利そうなライブラリがあった ので備忘録。Googleマップでキーワード や郵便番号を入力するだけで、該当する 場所を表示します。ちょっと場所を確認 したい、みたいなシーンは地味にありま すし、これは手軽に実装出来るので覚え ておきたい。 Googleマップネタです。jQueryでオート検索する地図コンテンツを作りましょう、というもの。フォーム入力の補助にもなりそうなならなそうな。 jQuery Automatic Geocoder 動作サンプルです。適当に入力してみてください。郵便番号でも検索できます。 表示が、ブログのCSSに影響されてしまっていますが気にしないで下さい。シンプルで使いやすい印象でした。 コード <script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.
Mapnificentは、Googleマップで移動にかかる時間を視覚的に教えてくれるというサービスです。 残念ですが日本の都市は対応していないようなので、昔サンフランシスコで働いていた時のオフィスの場所で試します。 まず […] Mapnificentは、Googleマップで移動にかかる時間を視覚的に教えてくれるというサービスです。 残念ですが日本の都市は対応していないようなので、昔サンフランシスコで働いていた時のオフィスの場所で試します。 まず、住所を入れるか、出発地点のベージュのマーカーを手で好きなところに置きます。 すると、そこから15分でたどり着ける範囲が明るく表示されました。左下の方向に飛び地のように明るくなってるのは、鉄道(BART)の駅ですね。左側とか左上方面は、バスが頻繁に走っている方向です。(1,2,3とか、30番とか) 右下のスライダーで、時間を変更することができます。
なかなかいいサンプルだったのでシェア。 jQuery MobileでGoogleMap APIを使った サンプルがオープンソースで公開されて いました。ストリートビューなども表示する ことが可能です。興味の有る方はチェック してみては。 スマフォにGoogleMapを表示させるのに、Google Maps JavaScript API V3が必要みたいですが、これをスマフォ対応を簡略化するjQueryプラグイン、jQuery Mobileで使おう、というもの。 jquery-ui-map GoogleMap APIをjQuery Mobileで使ったサンプルです。jquery-ui-mapというプラグインも使用しています。このサンプルはMITライセンスでソースが公開されていますよ。 以下、デモのキャプチャです。 iPhone iPhoneでの実装状態です。 ランドスケープ時も自動で横幅をあ
GoogleMapを使ったWebサービス に興味が沸いて調べてみました。 マップ系なので殆ど国産サービスです。 単純に興味が沸いて調べただけなので もしかしたら情報は中途半端かもです。 GoogleMapAPIを使ったWebサービス に興味がある方に参考になれば幸いです。 一応カテゴリで分けました。自分でもちょっと微妙な分け方ですが、無いより分かりやすいかなと思いまして・・・ タイトルのαは海外のGoogleMap系サイトの紹介記事です。 情報共有タイプ ソーシャル要素を加味したマップ系Webサービス mapeer マップを使ったCGM系サービス。ユーザー同士で情報をマップで共有出来ます。 mapeer ホトリ 全国の仏像情報を共有するサービス。デザインが凄くかわいいいですねー。 ホトリ- Zorg 地図上に画像を表示させて共有するWebサービス。何気にいいです、これ。面白いかも。気に入っ
組織のマインドマップツールをマインドマイスターにすべき理由 伸びてる産業、会社、事業を紹介しまくるStrainerのニュースレターに登録!! WEBポートフォリオをGoogleマップで作った事例５つそれぞれ画像をクリックするとポートフォリオが開きます。 Academie Arnhem Portfolio Map ↑GoogleマップのUIに様々な作品をメニュー付きで表示。 Design With An Accent ↑キーボードショートカットが印象的なポートフォリオ。 Markus Dressen ↑ブックデザイナーによる、Googleマップとのマッシュアップ ポートフォリオ。 Blaubo Design ↑かなり有名なものですが、これが一番現実的かつ分かりやすいかも。 Kalle Hagman ↑シンプルに一枚の画像を表示しているだけですが、それでも拡大縮小が楽に行えるのは便利。 直感的
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
