1 views

実現する機能

グーグルマップで相手の自宅を探し、クリックすると住所が表示されるという仕組みなのですが、年賀状のシーズンなので、自宅はわかるが住所がわからないという場合に重宝するのではと思い作成してみました。参考にしたサイトの2つのファイルをひとつにまとめただけなので、見た目以外に改良した点はありません。

また、沖縄で無料のブログサービスを提供しているサイトTI-DAの管理画面に、地図の座標(緯度、経度)とズームの倍率を入れる欄があるので、ブログ仲間の役にも立てるのではと期待しています。

以下、構築手順の備忘録です。

事前準備

Google MAPS APIキーの取得が済んでいること

SAMPLE(Geocoding)

SAMPLEのHTML

<!DOCTYPE html "-//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">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>お店の地図座標の確認</title>
<!--GoogleMaps V3 APIの使用に必要なGoogle発行のJavaScriptコードを読み込み。
sensor=falseでGPSを使用しない設定(する場合にはtrue)-->
<script type="text/javascript"
 src="http://maps.google.com/maps/api/js?libraries=adsense&sensor=false&language=ja"></script>
<!--function initializeで地図の初期画面構成を設定-->
<script type="text/javascript">
function initialize() {
 var Marker;
 var map;
//中心座標は沖縄県庁の緯度、経度。地図の形式はROADMAPを選択
 var latlng = new google.maps.LatLng(26.212377176525983,127.68079876899719);
 var opts = {
  zoom: 17,
  center: latlng,
  mapTypeId: google.maps.MapTypeId.ROADMAP
 }
//id属性に"map_canvas"を指定しdiv要素を対象とするMapsクラスのオブジェクトを作成
 map = new google.maps.Map
 (document.getElementById("map_canvas"),opts);

//地図上でクリックするとマーカーを表示させ、マーカーは移動可能とするイベント登録
 google.maps.event.addListener(map, 'click',
 function(event) {
  if (Marker){Marker.setMap(null)};
  Marker = new google.maps.Marker({
   position: event.latLng,
   draggable: true,
   map: map
  });
  infotable(Marker.getPosition().lat(),
  Marker.getPosition().lng(),map.getZoom());
  geocode();
  //マーカー移動後に座標を取得するイベントの登録
  google.maps.event.addListener(Marker,'dragend',
   function(event) {
   infotable(Marker.getPosition().lat(),
   Marker.getPosition().lng(),map.getZoom());
   geocode();
  })
  //ズーム変更後に倍率を取得するイベントの登録
  google.maps.event.addListener(map, 'zoom_changed',
   function(event) {
   infotable(Marker.getPosition().lat(),
   Marker.getPosition().lng(),map.getZoom());
  })
 })
//マーカーの位置を地図座標に変換するジオコーディングの設定
 function geocode(){  var geocoder = new google.maps.Geocoder();
  geocoder.geocode({ 'location': Marker.getPosition()}, 
     function(results, status) {
   if (status == google.maps.GeocoderStatus.OK && results[0]){
     document.getElementById('id_address').innerHTML = 
         results[0].formatted_address.replace(/^日本, /, '');
   }else{
     document.getElementById('id_address').innerHTML = 
       "Geocode 取得に失敗しました";
    alert("Geocode 取得に失敗しました reason: "
           + status);
   }
  });
 }

//HTMLtagを更新
 function infotable(ido,keido,level){
  document.getElementById('id_ido').innerHTML = ido;
  document.getElementById('id_keido').innerHTML = keido;
  document.getElementById('id_level').innerHTML = level;
 };
};
</script>

</head>
<body onload="initialize()">
<p>地図上で目的地をクリックすると座標・住所を取得できます。

<table style="width:500px;border:0;" > <tr><td width="50px">緯度</td><td id="id_ido"></td></tr> <tr><td>経度</td><td id="id_keido"></td></tr> <tr><td>ズーム</td><td id="id_level"></td></tr> <tr><td>住所</td><td id="id_address"></td></tr> </table> <div id="map_canvas" style="width:480px; height:300px"></div> <br> <a href="http://www.google-mapi.com/company.shtml" target="blank"> Google Maps JavaScript API V3の使い方</a>を参考に作成 </body> </html>

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA


このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください