HTML5 BuilderとGoogle Maps JavaScript APIを使って郵便番号から住所を取得するプログラムを作ってみました。

HTML5 Builderを起動して、郵便番号を入力するEditコンポーネント、住所を表示するLabelコンポーネント、表示ボタンのButtonコンポーネント、地図を表示するGoogleMapコンポーネントを配置します。

文字化けを回避するため、PageコンポーネントのEncodingプロパティを「Unicode(UTF-8)」に設定します。

ボタンを押したときSubmitされないようにするため、ButtonコンポーネントのButtonTypeプロパティを「btNormal」に設定します。

ボタンのJavaScriptのOnClickにコードを記述します。

function Button1JSClick($sender, $params)
{
   ?>
     //begin js
   var postcode = $('#Edit1').val(); //郵便番号
   jQuery.getJSON(
     'http://maps.googleapis.com/maps/api/geocode/json?sensor=false&language=ja&address=' + postcode,
       function(data) {
         //緯度と経度を取得する
         var latlng = new google.maps.LatLng(
             data.results[0].geometry.location.lat,
             data.results[0].geometry.location.lng);
         //地図を表示する
         var map = new google.maps.Map(
             document.getElementById("GoogleMap1"),{
                 zoom : 13,
                 center : latlng,
                 mapTypeId : google.maps.MapTypeId.ROADMAP
             });
         //マーカーを表示する
         var marker = new google.maps.Marker({
             position: latlng,
             map: map,
             title: postcode
         });
         //住所を表示する
         var address = '';
         var addresses = data.results[ 0 ].address_components;
         for (i = addresses.length - 1; i > 0; --i) {
             address += addresses[ i ].long_name;
         }
         $('#Label2').text(address);
       });
     //end
   <?php
}

郵便番号を入力して表示ボタンを押すと、住所と地図が表示されます。

参考

• Google Maps JavaScript API v3