Markerクリックでモーダルを実装する、マーカーはRailsから。 - Qiita
2016年3月末の情報です。更新されても知りません。また、Rails5のβ版が出ているようですが、Rails4でやってます。 Railsのデータベースから、GoogleMapにマーカーを落とす。 マーカークリックでモーダルウィンドウを開く。 モーダルの中に、情報を表示する。 カスタマイズが難しかったので、gmaps4railsは使わない。 準備 APIKEY GoogleDevelopersへ登録し、APIKEYを入手する。生成されたスクリプトとAPIKEYをHTML文に貼り付ける。開発環境でアセットを行っていなかったからかはわかりませんが、application.html.erbにスクリプトのURLを貼り付けた場合、更新でしか地図が表示されなくなりました。これ要注意! Bootstrap vendor/assets配下にそれぞれ格納する。読み込みはapp/assets配下のそれぞれのap
Google Maps APIを使って複数のマーカーと吹き出しを設置してみる ｜ Tips Note by TAM
Google Maps APIを使って、地図を表示したりマーカーを立てたりをやってみます。 今回使用するのは、以下のJavaScript API になります。 Google Maps JavaScript API | Google Developers ■目次 Google マップの表示 Google マップにマーカーを立てる マーカーに吹き出しを追加する 住所から緯度と経度を調べる Google マップに複数のマーカーを立てる 1. Google マップの表示 まずは地図を埋め込んでみます。 実際に使用する場合はAPIキーを取得したほうがよいですが、今回は動作の確認ができればよいので省略します。 APIキーを使用する場合は、こちらからAPIを有効にして、APIキーを作成して下さい。 1-1. 地図を埋め込む場所を指定 ■HTML <div id="sample"></div> 1-2.
【WEB制作の基本】Google Map APIの取得から地図の表示、エラーの解消方法まで解説
新人ウェブデザイナーのNNです。新宿って地図を見ていてもイロイロなスポットがあるので面白いですよね。今回はウェブサイト制作に欠かせないGoogleMapの表示方法です。 GoogleMapをウェブページに表示させる方法をGoogle APIの取得から、地図の表示方法、表示エラーの解消法まで解説いたします。 Google Map APIを使って地図を表示させる手順 APIキーの取得など手間がかかることもありますが作業の流れは下記になります。 Google Map APIキーを取得 地図を表示させるJavaScriptをページに設定 Google Maps API キーの取得方法 Googleにログインした状態で、Google Cloud Platformにアクセスします。 ヘッダーメニューの「▼」をクリックします。 「新しいプロジェクト」をクリックします。 プロジェクト名を記入してプロジェク
【Googleマップ】地名や住所から緯度経度を取得してサイトに地図を表示する
こんにちは、Ryohei（@ityryohei）です！ Googleマップで住所から座標を取得して、サイト上に地図を表示する方法のご紹介です。 サイトに地図を表示する手段として、Googleマップを用いることが多くあります。Googleマップでサイトに地図を表示する場合、緯度・経度の情報が必要になりますが、緯度・経度がわからなくても、地名や住所から緯度・経度を取得して地図を表示することもできます。 本記事では、その方法をご紹介しています。 ※2018年7月より、Googleが提供するAPIサービスを利用するには、APIキーの取得と、クレジットカード情報を登録したアカウントが必須となっています。クレジットカード情報は「Google Cloud Platform」のコントールパネルにある「お支払い」から登録するこができますので、予めご準備ください。 本記事の内容 住所や地名から緯度・経度を取得
GoogleMaps JavaScript API v3を使ったGoogle Mapの表示 レスポンシブ対応 - Qiita
Google Maps JavaScript API v3を使って、Google Mapsを表示させます。 Webブラウザで確認済みですが、ios7で表示がされないようです...何故。。 全体の流れ - API キーの取得 - 地図の表示 - ピン刺し - レスポンシブ - display:noneからの表示 API キーの取得 APIのリクエスト数などが分かるので、設定してもよいかもしれません。 取得しなくても地図は表示されますので、簡単に紹介します。 （詳しく知りたい方は、参考にさせて頂いたサイトに掲載されていますので、そちらからお願いします） まず、Googleアカウントが必要になりますので、持っていなければ作成します。 アカウントにログインした状態で、Google Developers Consoleにアクセスします。 Google Developers Console https
Framework7でHTML5モバイルアプリをつくる - Part4: Geolocation APIを使って国コードと通貨コードを逆ジオコーディングする - Qiita
Framework7でHTML5モバイルアプリをつくる - Part4: Geolocation APIを使って国コードと通貨コードを逆ジオコーディングするHTML5GoogleMapsAPIYQLジオコーディングFramework7 Framework7でモバイルWebを開発するとHTML5/JavaScript/CSSを使ってiOSやMaterialデザインのネイティブに近いUIを作ることができます。またW3Cが策定しているHTML5のデバイスAPIを活用すれば、ネイティブのAPIをコールしなくてもHTML5経由でハードウェアの制御を行うこともできます。簡単なところからGeolocation APIで緯度経度情報を取得して遊んでみようと思います。 参考 HTML5 compatibility on mobile and tablet browsers with testing on r
ウェブ地図で大圏航路を表示する Leaflet版
このウェブ地図はメルカトル図法で描かれています。 地図上で２地点間を直線で結んだ線は「等角航路」になりますが，この地図では地球上の２地点間を最短距離で結ぶ「大圏航路」（厳密には，それに近似した折れ線）を表示させることもできます。 地図上のマーカーをドラッグして移動することにより，任意の２地点間の大圏航路（と等角航路）を表示させることができます。 また，マーカーをクリックすれば，その場所の緯度・経度（分単位）が表示されます。 なお，２地点間の距離は，地球を半径6371kmの球に近似させて算出しています。
ポリラインの表示 - ポリライン(GPolyline) - Google Maps JavaScript API入門
ポリラインを作成し地図に表示する方法を確認します。マーカーと同じく地図上に複数のポリラインを表示することができます。 ポリラインはGPolylineクラスで定義されており、コンストラクタ関数は次のように定義されています。 GPolyline(latlngs:GLatLng[], color?:String, weight?:Number, opacity?:Number, opts?:GPolylineOptions) 頂点の配列からポリラインを作成します。color は、HTML 方式の 16 進数で表 した色 (#RRGGBB) を含む文字列として指定されます。weight はピクセル単位の 線の幅です。opacity は、0 - 1 の数値で指定されます。線はアンチエイリアス されて半透明になります。 ポリラインは複数の座標を順につなぐことで作成されます。1番目の引数には座標を表すG
PHP 住所から緯度/経度を取得
Google Geocoding API を使って住所から緯度経度を求めます。（めちゃめちゃ簡単です） Windows 環境ですので文字コードは SJIS です。API呼び出し時に UTF-8 に変換しています。 APIのレザルトは JSON で受け取って配列にデコードしています。 このレザルトには住所などの情報も含まれていますが JSON ですので Windows で使用する場合は SJIS への変換が必要となります。 <?php //================================================ // 住所 → 緯度/経度変換 //================================================ function strAddrToLatLng( $strAddr ) { $strRes = file_get_conte
ストレス無しでGoogleマップを使ったサイトが作れる「gmaps.js」:phpspot開発日誌
gmaps.js ? the easiest way to use Google Maps ストレス無しでGoogleマップを使ったサイトが作れる「gmaps.js」 Googleマップのサイトへの実装が本当に簡単で、かつ多機能なライブラリのご紹介です 簡単なマップを出すのに必要なコードは以下。 表示させるdivと緯度経度を指定するだけです 出来ることリストは以下 マップのクリック、ドラッグ時のイベントハンドラ実装 マーカー付与 ジオロケーション・ジオコーディング マップオーバーレイ マップ上のコンテキストメニュー実装 地図上の区画指定 目的地までのルート描画 静的な画像をマップ表示 などなど超多機能。 Googleマップ使うかもしれない場合は覚えておいて損はありません 関連エントリ Googleマップ関連のjQueryプラグインとチュートリアル集 スマホやタブレットでGoogleマップ風
CLOCKWORK TOY
そもそも、 表示エリアの有効利用 ページ（項目）切り替えのナビゲーション 見た目のデザイン的配慮 などの目的から、TAB切り替えのデザインを行うことがある。 これは、ソフトウェアもWebページも同様だ。 PC向けソフトウェアなんて作れないkAzzであるから、当然話題は後者のWebページ。 TAB切り替えは一般的に 各表示エリアをブロック要素（DIVやPタグ）囲む 初期エリア以外はSTYLEのDISPLAY要素をNONEに指定 タブ切り替えはDISPLAYのNONE/BLOCK（またはinlineなど）による という流れだ。 ここで困ったのが、Google地図さん。 初期状態で表示されているエリアに地図が有る場合は、特に問題は起こらない。 初期状態で非表示のエリアの場合は少々、やっかいな状態となる。 kAzzの感触では、指定ズームでの地図画像の1片分しか表示しないのだ。 正確に言えば、地図を
Google Map を使いこなす[to-R]
Google Map を使いこなす Googleから無料で貸し出ししているGoogleMapをWEBサイトに埋め込む方法です ※GoogleMap ver2に対応しています。 APIの取得 GoogleMapからGoogle Map APIキーを取得してくる必要があります。 GoogleMapで『sign up for an API key』をクリックしてAPIキー発行ページに移動後、注意事項に同意してGoogleMapを使用するサイトのURLを記入、『Generate API Key』を押してAPIキーを発行します。 ※APIキーの取得にはgoogleアカウントが必要です。 Google Mapを使ってみる Google Maps API Keyページで発行されるhtmlソースは自サイトに直接アップするとこんな感じになります。 Google Maps sample1 Shift_JISで
![Google Map を使いこなす[to-R]](https://cdn-ak-scissors.b.st-hatena.com/image/square/a9717624309e36a795026e1b70982163687ccca2/height=288;version=1;width=512/https%3A%2F%2Fblog.webcreativepark.net%2Ficon_200x200.png)
Google Maps APIで逆ジオコーディングが可能に - F.Ko-Jiの「一秒後は未来」
IDEA*IDEAに「Google Maps上でクリックした地点の住所を知る方法 | IDEA*IDEA」という記事があったので調べてみると、数日前から Google Maps API に逆ジオコーディング(緯度・経度から住所を求める)機能が追加されていたみたいです。 » Google Geo Developers Blog: Geocoding… in Reverse! 早速、むかし作った「飲食店検索 – この辺で」の中に組み込みました。(元々別の逆ジオコーディングサービスを使わせてもらっていたのですが、しばらく前に使えなくなっていて機能を外していたんです。) var $ = function(id) { return document.getElementById(id); } var map = new GMap2($("map")), var geocoder = new GCli
第3回 Google Mapsでマッシュアップ
第3回では，複数のWebサービスを使ってWebサイトを構築する「マッシュアップ」を試してみます。ここでは，最も有名なWebサービスであるGoogle Mapsと，最寄り駅を教えてくれるWebサービスを組み合わせたアドレス帳を作ってみます。 Google MapsやYahoo! Mapsは，地図の情報をWebサービスで提供しています。このWebサービスを用いると，自分のWebサイト上に地図を簡単に張り付けられます。また，天気の情報や駅周辺の情報といった地域の情報を提供しているWebサービスもあります。 つまり，地図情報と地域情報のWebサービスを組み合わせると，地図の上に天気を表示したり，駅周辺の情報を表示したりといったオリジナルの地域情報サイトが簡単に作れます。これがマッシュアップです。最近は，地域情報を提供するWebサービスが増えています（表1）。 ここでは3種類のWebサービスを組み合
Google Maps Hacks -- Google Mapsが提供するジオコーディング機能
Rich Gibson & Schuyler Erle著 武舎広幸+福地太郎+武舎るみ訳 GOOGLE MAPS HACKSTM 全体の目次 ｜ O'Reilly ｜ Amazon ｜ 書店 ｜ サイトトップ 追加情報１ Google Mapsが提供するジオコーディング機能 2006年６月13日にGoogle Mapsに米国などの住所に関するジオコーディングの機能が加わりました。 また、2006年12月７日に日本の住所や駅などに関するジオコーディング機能が加わりました。 下のコードのように、GClientGeocoder()というクラスを利用します。 このクラスにgetLatLng()というメソッドがあって、引数には住所と、ジオコーディングが成功したときに呼ばれる「コールバック関数」を指定します（このコールバック関数はもちろん匿名関数でもかまいません）。 var map = new GMa
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
無料で使える「住所マスターデータ」公開、表記統一や緯度経度への変換に活用可能 全国の町丁目レベル18万9540件の住所データを記録
GPS携帯を使った口コミサイト構築 - Google Map上に投稿データを展開する -
Ajax Google Mapsを自サイトに設置する2 [Javascript] All About![Ajax Google Mapsを自サイトに設置する2 [Javascript] All About](https://cdn-ak-scissors.b.st-hatena.com/image/square/8f530daf3cb408d6b6a0ba6f38ed7ccece36cffc/height=288;version=1;width=512/https%3A%2F%2Fimg.aacdn.jp%2Faa%2Fcommon%2Fogp300_300.png)
WEBデザイン&ディレクション LALA-ROCKETS
http://www.hichu.com/~tetsumi/tdiary2/20070508.html