Coveloping
box-shadowでふわりとした影をつくるCSSのジェネレーター、レスポンシブのチェック、アスペクト比の計算機、CSS/JSの軽量化など、たくさんの便利な時短ツールがありますが、それらの便利なツールを一つの場所にまとめたCovelopingを紹介します。 FacebookのOPGチェックやGoogle Mapsの地図生成ツールもあり、新しいプロジェクトを始める時にも役立つものが揃っています。 Coveloping 便利ツールは現在23種類、アスペクト比の計算や一つのカラーに黒と白を加えたバリエーションを生成したり、box-shadowでふわりとした影をつけたり、jQueryのアニメーションのエフェクトなどがあります。 これからもどんどん増えていくそうです。 その中から、いくつか紹介します。
Google Maps JS APIを使って「住所から緯度経度を取得し地図を検索する」機能を実装する方法
このブログでもちょいちょい紹介している写真公開用ブログの方で掲載した写真の場所を示す地図を表示させる機能をGoogle Maps JavaScript API V3を使って実装しました。その辺の実装方法をまとめようと思ていますが、その前にその機能の基礎となるキーワードからの地図検索機能の実装方法をまとめておきます。Google Maps JavaScript APIを使うと凄く簡単に実装することができます。 サンプル以下サンプルになります。キーワード入力フォームに[住所]、[建物名]、[緯度経度（緯度と軽度の間はカンマ区切り）]などを入力して、「地図検索」ボタンを押すと、フォームの下のスペースに地図が表示されるようになっています。 地図検索機能サンプルGoogle Maps APIの概要そもそもGoogle Maps APIとは？まず最初にGoogle Maps APIについて簡単に説明し
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> その結果は次のようになります。 シンプルな地図表示。 次はドロップダウンやリストを使ったマーカーのデモ。マーカーは自動的に中央に表
Google Map api v3 スクロールでの拡大縮小の無効やドラッグの無効等の実施方法 | Stronghold Archive
どうもこんにちは。Toshikuraです。今回のTipsは【Google Map api v3 スクロールでの拡大縮小の無効やドラッグの無効等の実施方法】です。Googleマップをウィンドウ幅に合わて使う際、地味に困るのがスクロールで地図が反応してしまう事です。今回はマウススクロールでの反応を禁止する方法〜その他たまに禁止させる項目をまとめておきます。 実装方法 マウススクロールでの拡大縮小を無効化 実装方法はmapOptionsの指定に禁止したい項目を追加するだけと至ってシンプルです。マウススクロールの禁止は【scrollwheel: false,】にて実装されています。 <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> <script type="
Google Mapsで地図用コンテナを非表示にして地図を初期化すると表示がおかしい at softelメモ
問題 JavaScriptでのタブ切り替えと、Google Maps の地図の表示を組み合わせた画面を作っています（Google Maps APIを使ってます）。 非表示のタブに地図の表示をしようとすると、タブを選択したときの地図の表示がおかしいです。 どうするとちゃんと表示されるでしょうか。 答え 初期化時点で地図のコンテナとなるdiv要素が非表示だと、コンテナの大きさが取得できないのか、何かがうまくいかないらしい。 対策はいくつか考えられる。 タブをクリックしたときに初期化処理をする方式 何かおかしくても初期化だけはしておいて、タブをクリックされたときに再描画を依頼する方式。 display:none; ではなくて、別の方法で隠すと大丈夫だったりするらしい（未確認） タブをクリックしたときに初期化処理をする方式 タブがクリックされて地図のコンテナのdiv要素が表示状態になってから、初期
Google Maps 入門
Google マップはグーグルが提供している地図サービスです。この Google マップをカスタマイズして独自のマーカーを表示させたり、指定した区間のルート検索を行ったりすることができるように色々な API が提供されています。ここでは Google マップで提供されている API の中でもウェブサイトで利用者が操作可能な地図をカスタマイズして表示することができる Google Maps JavaScript API の使い方の解説します。 ※ Google マップを利用者として使う場合の使い方については「Googleマップの使い方」を参照されて下さい。 なお JavaScript の基本的な使い方については「JavaScript入門」を参照されてください。
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
