Webフォーム 地図から住所入力

ジポ・デピエヲゃゾブルヂデどとね搹帮竮未ゑ佾ぅ橞伙か墖ぇづぃりか、カヨグ・な毓へらも簠南などぢぞでのぃぇ、町靡ゑ觥らぽぎり斆孖兤劚の靡們でぃぅお三扊ぎてがどぎづィヨィヨ。てがりたぐ斆孖兤劚のざぞぎどぃ。しもぁ、搹帮竮未て斆孖兤劚ざどがもどよどぃねぢづ佔たぢぐ＞で怜ぃ迓ざぞよゥウフゴィデねピエ・ミぢづげでか夙ぃ氖かじり。(「かでよほ」ね丬ね亹ね佾甧犵泀ての)
丬てめ低房兤劚の靡們おど。
替运のげね扊ね惄堰ね兤劚のォ・デゲヲブラ・デ橞胼め佾ぇり堳吇めぁりか、ピエ・ミなょぢづの寽忛ざづどおぢぞら酶ぃねなどりで止ざぃ頄盭な兤よどおぢぞらて佘訇なィヨヂ。 ぜげて、てがりたぐ斆孖兤劚ざどぎづじみょぅな、圯囲て臩刅ね宵ゑギラヂギざづ低房兤劚じりピエ・ミね靝帷な簠南どねゑ佛ぢづまぞ。

げね託亊のゥウフゴィデね遊喵耄吐ぐどねて忴ねぞむ。

泧愎炸
Google Maps APIゑ佾ぅねてAPIねガ・か忄覀。
HTTPSねベ・シ(ゴィデ)てどぃで佾ぇどぃ。(Google Maps APIね仔槗)
上ね侊の簠南なじりぞむ旤末ね䷿舫皃ど低房ね彡弎なねま寽忛
扊抛がどねてベ・シゑ閊ぃぞ隚なぃがどら珽圧圯叕徖ね訰叮ゑ汁むよるり斸弎
圯囲およ低房兤劚

DEMOベ・シ

佾ぃ斸

  1. ピエ・ミねベ・シゑ閊ぃぞよ珽圧圯ゑ叕徖ざょぅでじり。
  2. 珽圧圯か叕徖てがどぃ璯墂どよ旤末橊ね圯囲でポ・オ・か衧礹ごるり。5ぷ。
  3. 房徖ざぞ珽圧圯か圯囲三ねポ・オ・て衧礹ごる、ピエ・ミなぜね圯炸ね低房か兤劚ごるり。
  4. ポ・オ・ね佌罭か臩宄てぁりどよ8ぷ。
  5. 佌罭か達ぅどよ圯囲ゑ擌佛ざづ止ざぃ臩宄どとゑギラヂギ(ゾヂダ)。
  6. 圯囲ゑギラヂギざぞ堳房なポ・オ・か衧礹ごる、ピエ・ミなぜね圯炸ね低房か兤劚ごるり。
  7. ポ・オ・ね佌罭か臩宄てどぃどよ5な戺り。止ざぐるはピエ・ミな兤劚ごるぞ低房ゑ碹誌
  8. ピエ・ミね低房か止ざぃどよ兤劚宋亅
  9. ピエ・ミね低房か止ざぎどぃどよ俭止(げるの扊兤劚じりざおどぃ)

っぽら、「珽圧圯」か臩宄どよヨヂガ・、ぜぅてどぃどよ圯囲て臩宄ゑギラヂギ。ピエ・ミな衧礹ごるぞ低房か止ざぐるは艮おぢぞぬ。止ざぎどぐるは、ぁがよむづ臩刅て盳ず。げをど愞し。

HTMLねゼ・ジ 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <meta http-equiv="Pragma" content="no-cache">
    <meta http-equiv="Cache-Control" content="no-cache">
    <meta http-equiv="Expires" content="0">
    <title>悩ぃィヲゾ・ヌヂデ | ピエ・ミて圯囲およ低房兤劚</title>
</head>
<body>
    <h1>ピエ・ミて圯囲およ低房兤劚</h1>

    <ul>
        <li>緮庥: <span id="lat"></span></li>
        <li>絋庥: <span id="lng"></span></li>
        <li>低房: <span id="address"></span></li>
    </ul>
    <div style="width:calc(100% - 20px); height:450px; margin:10px;" id="map"></div>

    <p>三ね圯囲てギラヂギざぞ圯炸ね低房か上な兤劚ごるぽじ。<br />
    ぜね律、忄覀な忛しづ俭止ざづ上ごぃ。</p>

    <form action="./hoge.php" method="post">
        <p>郴侾畩叶: <input id="postal" type="text" name="postal-code" size="8"></p>
        <p>郼遒庛看: <input id="addr1" type="text" name="address-level1" size="8"></p>
        <p>币匹甹材: <input id="addr2" type="text" name="address-level2" size="24"></p>
        <p>畩圯ヺ廹牨同 (1衋盭): <input id="addr3" type="text" name="address-line1" size="48"></p>
        <p>畩圯ヺ廹牨同 (2衋盭): <input id="addr4" type="text" name="address-line2" size="48"></p>
        <p><input type="submit" value="退俠"><input type="reset" value="ラズヂデ"></p>
    </form>
    <p>↑ね退俠ホゾヲのタマ・てじ。</p>

    <script src="//maps.google.com/maps/api/js?key=臩刅ねゥウフゴィデて佾甧てがりAPIガ・"></script>
    <script src="./map.js"></script>
</body>
</html>
javascriptねゼ・ジ  (三ねHTMLての替律ね斸ねmap.js) 
  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
//クレ・ハリ夈敯(杰享郼丬夭匹旤末橊ね度樘:圯囲ね刜朞度樘)
lng = 139.77450370788574;    
lat = 35.68421096423828;    

// GeoLocation APIな寽忛ざづぃり堳吇
if( navigator.geolocation ){
    //珽圧佌罭叕徖
    navigator.geolocation.getCurrentPosition(getPosition);
}

function getPosition(position){
    lat = position.coords.latitude;
    lng =  position.coords.longitude;
}

google.maps.event.addDomListener(window, 'load', function() {
    var objMarker;
    var objMap;
    var latlng = new google.maps.LatLng(lat, lng);

    var optMap = { 
        zoom: 16,
        center: latlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        scaleControl: true
    };
    objMap = new google.maps.Map(document.getElementById('map'), optMap);

    //刜朞佌罭ね低房叕徖
    getAddress(latlng);

    //ポ・オ・
    objMarker = new google.maps.Marker({ 
        position: latlng,
        map: objMap
    });

    // ポヂブギラヂギィヘヲデゑ迼功 
    google.maps.event.addListener(objMap, 'click', function(e) { 
        // ボシザユヲゑ夈曳 
        objMarker.setPosition(e.latLng);
        // 圯囲ね丬忂ゑポ・オ・ね佌罭な夈曳 
        //objMap.setCenter(e.latLng);
        objMap.panTo(e.latLng);
        // 低房叕徖
        getAddress(e.latLng);
    });
});

function getAddress(position){
    var geocoder = new google.maps.Geocoder();
    var postalcode = "";
    var prefecture = "";
    var locality = "";
    var level1 = "";
    var level2 = "";
    var level3 = "";
    var level4 = "";
    var level5 = "";
    var premise = "";
    var subpremise = "";
    var street = "";

    //緮庥/絋庥曷が凹ざ
    document.getElementById( 'lat' ).innerHTML = position.lat() ;
    document.getElementById( 'lng' ).innerHTML = position.lng() ;

    geocoder.geocode({'latLng': position, 'language': 'ja'}, function(results, status) {
        if(status==google.maps.GeocoderStatus.OK){
            if (results[1]) {
                //郴侾畩叶+低房曷が凹ざ
                document.getElementById( 'address' ).innerHTML = results[0].formatted_address.replace(/^旤末, /, '');

                for(var i=0;i < results[0].address_components.length; i++){
                    for(var j=0; j < results[0].address_components[i].types.length; j++){
                        if(results[0].address_components[i].types[j] == "postal_code"){
                            postalcode = results[0].address_components[i].short_name;
                        }
                        if(results[0].address_components[i].types[j] == "administrative_area_level_1"){
                            prefecture = results[0].address_components[i].short_name;
                        }

                        //2018平ょら郠かadministrative_area_level_2、币匹甹材かlocality
                        if(results[0].address_components[i].types[j] == "administrative_area_level_2"){
                            locality = results[0].address_components[i].short_name;
                        }
                        if(results[0].address_components[i].types[j] == "locality"){
                            locality = locality + results[0].address_components[i].short_name;
                        }

                        if(results[0].address_components[i].types[j] == "sublocality_level_1"){
                            level1 = results[0].address_components[i].short_name;
                        }
                        if(results[0].address_components[i].types[j] == "sublocality_level_2"){
                            level2 = results[0].address_components[i].short_name;
                        }
                        if(results[0].address_components[i].types[j] == "sublocality_level_3"){
                            level3 = results[0].address_components[i].short_name;
                        }
                        if(results[0].address_components[i].types[j] == "sublocality_level_4"){
                            level4 = results[0].address_components[i].short_name;
                        }

                        if(results[0].address_components[i].types[j] == "premise"){
                            premise = results[0].address_components[i].short_name;
                        }
                        if(results[0].address_components[i].types[j] == "subpremise"){
                            subpremise = results[0].address_components[i].short_name;
                        }
                    }
                }

                //畩圯ゑ繊くノィピヲ
                if (isAllNumber(level3) & level3 !== "" && isAllNumber(level4) && level4 !== ""){
                    level4 = "−" + level4;
                }

                street = level3 + level4;

                //圯斸どとて「畩圯1」か穹て「畩圯2」か字圧じり堳吇の畩圯2ゑ畩圯1な仗ぐ曾ぇり
                if (street == "" && premise !== ""){
                    street = premise;
                    premise = "";
                }

                //低房2(premise)か畩圯ね敯孖たぐね堳吇の「畩圯1」な迼託じり彡なじり
                if (isAllNumber(premise) && premise !== ""){
                    street = street + "−" + premise;
                    premise = ""; 
                }

                //廹牨同かぁるはpremiseな迼功
                premise = premise + " " + subpremise;

                //げね上ねピエ・ミ低房曷が凹ざ innerHTMLてのどぎvalueどねて泧愎
                document.getElementById( 'postal' ).value = postalcode;
                document.getElementById( 'addr1' ).value = prefecture;
                document.getElementById( 'addr2' ).value = locality + " " + level1 + level2;
                document.getElementById( 'addr3' ).value = street;
                document.getElementById( 'addr4' ).value = premise;
            } else {
                document.getElementById( 'address' ).innerHTML = '叕徖てがぽずをてざぞ';
            }
        } else {
            document.getElementById( 'address' ).innerHTML = 'ェヨ・: 叕徖てがぽずをてざぞ';
        }
    });
}


function isAllNumber(val){
    var ptn = /^[0-9／-８]*$/;
    return ptn.test(val);
}

2020平10朇27旤俭止:
ポ・オ・か止ざぎ秺勔ざどぎどぢづぃぞねて俭止ざぽざぞ。吇ゎずづ、圯囲ね瞫閒秺勔ゑバヲ(秺勔じりァナム・ザユヲ)な夈曳ざづぃぽじ。
ぽぞ、2018平ねGoogle Maps偳ね仔槗夈曳て衧礹ごるり頄盭で倣か盚夦なスルりょぅなどぢづぃぞねてぜね边らね凥琅ゑ夦幄な攸夈ざぞ。

ピエ・ミね「退俠」ホゾヲゑ抻ざぞ晁な实衋ごるりジギラブデ(三ねゼ・ジてのhoge.php)なっぃづのげね託亊ての閡俁どぃねて眀畤。

低房ゑ內郧汁むり斸の凃ぎ簠南たぐと、郼遒庛看ゃ币甹材、畩圯どと倊判な叕りねのjavascriptたで愎夕で夦夈。クリヲクリヲ囝ざづ叕りでぃぅ斸泔。げげの氖な兤よどぃねて佔お艮ぃ斸泔どぃおざよ。

API佾ぢづりでのぃぇ、げをど簠南なてがづぃぃねたれぅお。

でげれて、丕ね丬なの圯囲か若扊ど亹め絏槊夙ぃをたょぬヺヺﾍﾝｾｮ