[B! map] takahumi_nakanoのブックマーク

takahumi_nakano id:takahumi_nakano

mapに関するtakahumi_nakanoのブックマーク (5)

「Google マップ」の埋め込み地図をカスタマイズする方法まとめフラップイズム
※2014年3月12日更新「Google マップ」は2月にバージョンアップされています。操作性が大きく変わっていますので、説明を加えました。なお、「Google Maps JavaScript API v3」を使用している部分には変更ありません。このまま使用できます。 ※2014年3月26日更新 bodyのjavascriptの関数を読み込む記述が消えてしまっていましたので、修正しました。申し訳ございません・・・。 ※2016年8月31日更新 2016年6月22日に「Google マップ」のAPIが変更され、APIキーが必須になりました。なお、APIを使用せずに埋め込む場合はAPIキーは引き続き必要ありません。どうも、くーへいです。最近ではない方が珍しいと思うくらい、「Google マップ」を埋め込んだホームページは多いですよね。制作会社にいる皆さんは、「サクッ」っと埋め
takahumi_nakano 2016/10/25
Google

map

Web制作
リンク
JavaScript - Google Maps API V3 住所から緯度・経度を取得 - Googleマップの埋め込み方法｜及川WEB室
テキストエリアに入力した住所から緯度・経度を取得、地図上にマーカーと情報ウィンドウを表示。また、地図をクリックするとクリックした場所にマーカーと情報ウィンドウが表示され、情報ウィンドウの中に緯度と経度が表示されます。下の「◆lat(緯度)：Lat　◆lng(経度)：Lng」の赤い文字の箇所にも表示されます。参考サイト：ジオコーディング｜Google Maps JavaScript API v3｜Ajax｜PHP & JavaScript Room Google Maps JavaScript API V3 - Google Maps API — Google Developers 住所から緯度・経度を取得する、Googleマップの表示の仕方 Google Maps JavaScript API バージョン 3（V3）での、Googleマップの埋め込み方法をご紹介。テキストエリ
takahumi_nakano 2015/11/12
Web制作

jQuery

map
リンク
display:noneの要素にGoogle Mapsを貼り付ける
display:noneの要素にGoogle Mapsを貼り付ける「jQuery逆引きマニュアル」の読者の方から、「タブパネルにGoogle Maps APIを掲載すると、ポイントが真ん中に表示されず、左上にずれて表示されます」と質問を受けました。書籍ではタブパネルの作成方法のみを解説しており、Google Maps部分は読者の方の応用ですが、次のような方法で解決可能です。基本的にGoogle Maps APIをdisplay:noneの要素に貼り付けるそのような状態(ポイントが真ん中に表示されず左上にずれる)になります（１度キャッシュされるとちゃんと表示されると思います）。サンプルそいうった場合はdisplay:blockにするタイミングで次のような命令を行うとちゃんと表示されるようになります。 google.maps.event.trigger(map, 'resize');
takahumi_nakano 2015/11/12
Web制作

jQuery

map
リンク
ImageMapster - Make Image Maps Useful
ImageMapster makes HTML image maps useful. ImageMapster is a jQuery plugin that lets you activate HTML image maps without using Flash. It works just about everywhere that Javascript does, including modern browsers, Internet Explorer 6, and mobile devices like iPads, iPhones and Androids. Note: ImageMapster used to be distributed as a ZIP archive. You can still download the full package including e
takahumi_nakano 2015/08/25
Web制作

jQuery

map
リンク
[61] イメージマップ（リンク領域）を作ろう　map要素・area要素
イメージマップを作ってみよう W3C の仕様書のサンプル画像をそのまま使って説明します。 4つの図形にロールオーバーするとカーソルが変化し、リンク領域であることがわかります。（リンク先はどれも、このページを指定しています）これは画像を<img>要素で表示しています。 HTMLはこちら。img要素でのイメージマップです。 <p> <img src="shapes.gif" width="525" height="150" usemap="#shapes" alt=""> <map name="shapes"> <area shape=rect coords="50,50,100,100">  <area shape=rect coords="25,25,125,125" href="#" alt="Red"> <area shape=circle
takahumi_nakano 2015/08/25
Web制作

jQuery

map
リンク
1