Rich Gibson & Schuyler Erle著 武舎広幸+福地太郎+武舎るみ訳 GOOGLE MAPS HACKSTM

Hack 62

米国の住所を入力してジオコーディングをして地図として表示するプログラム例です (Perlを使ったCGIプログラム)です。


#!/usr/bin/perl
use XMLRPC::Lite; 

if ($ENV{'REQUEST_METHOD'} eq "POST") {
    read(STDIN, $buffer, $ENV{'CONTENT_LENGTH'});
}
else{
   $buffer = $ENV{'QUERY_STRING'};
}

my $params;
@params = split(/&/, $buffer);
my $addressOrigin = $params[0];
$addressOrigin =~ s/address=//;

##if ($addressOrigin eq "") {
##  $addressOrigin = "1600 Pennsylvania Avenue, Washington DC 20500";
##}

$streetAddress = $addressOrigin;
$streetAddress =~ s/[+]/ /g;
$streetAddress =~ s/%20/ /g;
$streetAddress =~ s/%2[Cc]/,/g;


my $result = XMLRPC::Lite 
    -> proxy( 'http://rpc.geocoder.us/service/xmlrpc' ) 
    -> geocode( $streetAddress ) 
    -> result; 

my $lat = "";
my $lng = "";

if ($result) { 
  for my $address (@$result) { 
	  if ($address->{lat}) {
	    $lat = $address->{lat};
	    $lng = $address->{long};
	  } 
  } 
}

$searchForm = "<div style='margin: 20px 20px 20px 20px;'>" .
              "<form action='http://210.150.125.28/cgi-bin/gmh/hack62-geocoderus.cgi' method='post'>" .
              "<input type='text' size='60' id='address' name='address' value='別の住所を探す' />" .
              "<input type='submit' value='検索' />" .
              "</form></div>";

print("Content-type: text/html\n\n");

if ($lat eq "") {
  print <<"END";
<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Strict//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd'>
<html xmlns='http://www.w3.org/1999/xhtml' xmlns:v='urn:schemas-microsoft-com:vml'>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=utf-8' />
<title>Google Maps Hacks -- Hack #62 米国の住所から地図を表示</title>
</head>
<body>
<h2>Google Maps Hacks -- Hack #62 米国の住所から地図を表示</h2>

<div id="info" style="margin: 20px 20px 20px 20px; text-align: left; width: 90%;">
  <table>
    <tr>
    <td style="width: 3cm;">住所</td><td>${streetAddress}</td>
    </tr>
    <tr>
    <td><br /></td><td style="color: red;">この住所は見つかりませんでした。</td>
    </tr>
  </table>
	
${searchForm}

</body>
</html>
END
  exit;
}


print <<"END";
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Google Maps Hacks -- Hack #62 米国の住所から地図を表示</title>
<style type="text/css">
  v\:* {
    behavior:url(#default#VML);
  }
</style>


<script src="http://maps.google.co.jp/maps?file=api&v=2&key=ABQIAAAASDTNl1DuosaO2Wcz9L7lNRQwjcvptDZDBQWv4gSJeWrNsQkM2BR7y-eoL4FetsPmYiKmHBNmQ0GMfA" 
    type="text/javascript">
</script>
</head>
<body onunload="GUnload()"
      onload="document.getElementById('address').focus();
              document.getElementById('address').select();" >
<h2>Google Maps Hacks -- Hack #62 米国の住所から地図を表示</h2>

<div id="info" style="margin: 20px 20px 20px 20px; text-align: left; width: 90%;">
  <table border="1" style="text-align: left;">
    <tr>
    <td>住所</td><td>${streetAddress}</td>
    </tr>
    <tr>
    <td>緯度</td><td>${lat}°</td>
    </tr>
    <tr>
    <td>経度</td><td>${lng}°</td>
    </tr>
    <tr>
    <td>緯度, 経度</td><td>${lat}, ${lng}</td>
    </tr>
  </table>

${searchForm}

</div>

<div id="map" 
     style="width: 640px; height: 480px; margin: 15px 5px 5px 5px; margin: 10px auto 10px auto;
		 text-align: center;">
</div>


<script type="text/javascript">

var map = new GMap2(document.getElementById("map"));
var latlng = new GLatLng($lat, $lng);
map.setCenter(latlng , 17, G_HYBRID_MAP);
map.addControl(new GLargeMapControl());
map.addControl(new GMapTypeControl());

var marker = new GMarker(latlng);
map.addOverlay(marker);

// GLog.write("buffer=" + "${streetAddress}");  // Google Mapsのデバッグ用メソッド

addressOutput = '<p style="font-size: 9pt; width=400px;">' +  "${streetAddress}" + "</p>";  

GEvent.addListener(marker, "click", function() {
   marker.openInfoWindowHtml( addressOutput );
 });

marker.openInfoWindowHtml( addressOutput );


</script>
</body>
</html>

END