質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.47%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

1回答

2831閲覧

グーグルマップAPIと郵便番号検索

shinoda

総合スコア75

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

0クリップ

投稿2015/11/26 06:16

編集2015/11/26 09:48

お世話になります。

現在入力フォームの郵便番号で住所入力の補助の機能を実装しているのですが、グーグルマップAPIを使用して実装を考えています。

まず入力フォームに郵便番号を入力して住所をコールバックするところまでは実装したのですが、グーグルマップAPIの規約に則って実装するために以下の様な流れにしたいと考えています。

1.郵便番号を入力して「郵便番号で検索」のようなボタンを押下する
2.モーダル(ダイアログ)が開き、グーグルマップが表示され、マッチングした住所にピンが刺されて(複数ある場合は全てにピンが刺さり、選択させる)、「この住所で良いですか?」のボタンが表示され、押下すると、その住所が住所入力欄に自動入力される

上記のような形で実装したいのですが、うまくいかなくて困っています
知識がないもので、コード込みでご教授いただければ幸いです。

現在作成中のコードを以下に示します。

test.html

1 2<!DOCTYPE html> 3<html> 4<head> 5<meta charset="UTF-8" /> 6<title></title> 7<script src="../js/jquery-1.11.3.min.js"></script> 8 9<style type="text/css"> 10* { 11 margin: 0; 12 padding: 0; 13 border: 0; 14} 15 16body { 17 background: #fff; 18 font: 30px sans-serif; 19 font-size:12px; 20} 21 22fieldset{ 23 margin:10px; 24} 25 26label{ 27 display:block; 28 width:100px; 29} 30 31input[type=text]{ 32 line-height:16px; 33 padding:5px; 34 border:1px #999 solid; 35 border-radius:3px; 36 width:80%; 37} 38 39h2{ 40 border-bottom:1px #333 dotted; 41} 42</style> 43<script> 44$(function(){ 45 $('input[name=zip]').blur(function(){ 46 $('input[name=address]').zip2adr($(this).val()); 47 }); 48}); 49 50(function($) { 51 $.fn.zip2adr = function(zip,callback){ 52 var cb = (arguments.length > 1) ? true : false; 53 if(zip === ''){ 54 return false; 55 } 56 var target = $(this); 57 $.ajax({ 58 type : 'get', 59 url : 'https://maps.googleapis.com/maps/api/geocode/json', 60 crossDomain : true, 61 dataType : 'json', 62 data : { 63 address : zip, 64 language : 'ja', 65 sensor : false 66 }, 67 success : function(resp){ 68 if(resp.status == "OK"){ 69 var obj = resp.results[0].address_components; 70 var adrSize = obj.length -1; 71 switch(cb){ 72 case true: // コールバック関数があるとき 73 var respObj = {}; 74 respObj.pref = obj[adrSize - 1].long_name; 75 respObj.below = ''; 76 for(i=adrSize - 2;i > 0; i --){ 77 respObj.below += obj[i].long_name; 78 } 79 respObj.adr = respObj.pref + respObj.below; 80 callback(respObj); 81 break; 82 case false: // コールバック無し 83 var tmp = ''; 84 for(i=adrSize - 1;i > 0; i --){ 85 tmp += obj[i].long_name; 86 } 87 target.val(tmp); 88 break; 89 default: 90 return false; 91 } 92 }else{ 93 return false; 94 } 95 } 96 }); 97 }; 98})(jQuery); 99 100 101</script> 102</head> 103<body> 104<c id="sample1"> 105 <fieldset> 106 <label>郵便番号</label> 107 <input type="text" name="zip"><br> 108 </fieldset> 109 110 <fieldset> 111 <label>住所</label> 112 <input type="text" name="address"> 113 </fieldset> 114</section> 115</body> 116</html> 117

追記致します。
以下のURLのサイトのグーグルマップ部分をモーダルにするようなイメージです。

http://www.benricho.org/map_zip_address/

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

私だったらですが、
まず、追記のサイトをパクります。

これで、モーダルの部分以外はほぼできていることでしょう。

それをベースにモーダルウインドウを実現します。

モーダルウインドウに関しては、
https://syncer.jp/jquery-modal-window
などに例がありますので、
これもこの通りにすればほぼ大丈夫だと思います。

このサイトのデモのところでいうと、

「モーダルウィンドウのコンテンツをHTMLで自由に編集することができます。画像や、動画埋め込みなど、お好きなものを入れて下さい。・・」

云々の部分をgoogleマップとボタンに置き換えれば、
99.9%完成ではないでしょうか?

最後の0.1%はモーダルウインドウが表示されるタイミングとピンが落ちてくるタイミングを
かっこ良くするだけだと思います。

投稿2015/12/15 10:17

nobuzoh

総合スコア196

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.47%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問