Textwellの内蔵ブラウザでGoogleマップを検索 MapSearch

Textwellのバーを消せば、フルスクリーンの地図アプリ。


Textwell 1.1.2
分類: 仕事効率化,ユーティリティ
価格: \250 (Sociomedia)
古いGoogleMaps形式の地図を読み込んで表示します。データが古いわけではなく、描画方法がちょっと違うだけ。でも、こちらのほうが見やすいと思う。文中の場所を地図上で確認したいとき、その場所を選んでアクション実行。するとGoogleマップに現れます。

<meta name=viewport content=initial-scale=1,user-scalable=no>
<title>MapSearch</title>
<script src=https://maps-api-ssl.google.com/maps/api/js?v=3&sensor=true></script>
<body style=margin:0; onload=Init()>
<div id=wine style=height:100%></div>
<div style=position:absolute;bottom:0;right:0;z-index:99>
  <input id=place style=background:yellow; placeholder=現在地 onchange=Search()>
</div>
<script>
var m,g;

function Search(){
  g.geocode({address:place.value},
    function(x,status){
      if(status!=google.maps.GeocoderStatus.OK){
        navigator.geolocation.getCurrentPosition(
          function(x){
            p=new google.maps.LatLng(x.coords.latitude,x.coords.longitude);
            Disp(p);
          }
        )
      }else{
        Disp(x[0].geometry.location);
      }
    }
  )
}

function Disp(x){
  m.setCenter(x);
  marker=new google.maps.Marker({
    map:m,
    position:x,
    draggable:true,
    animation:google.maps.Animation.DROP
  });
  google.maps.event.addListener(marker,"click",
    function(){
      g.geocode({latLng:marker.getPosition()},
        function(x){
          new google.maps.InfoWindow({content:x[0].formatted_address}).open(m,marker);
        }
      )
    }
  )
}

function Init(){
  place.value=T.current;
  option={
    zoom:17,
    mapTypeId:google.maps.MapTypeId.ROADMAP,
    overviewMapControl:true,
    mapTypeControlOptions:{style:google.maps.MapTypeControlStyle.DROPDOWN_MENU}
  };
  m=new google.maps.Map(wine,option);
  g=new google.maps.Geocoder();
  Search();
}
</script>
</body>

登録リンクはこちら→ http://tinyurl.com/oswza9v



地名を書いてアクションを実行。地図を表示します。拡大／縮小もできるし、右上のメニューから航空写真に切り替えることもできます。右下の検索窓で別の場所にも行ける。



左上のオレンジの人「ペグマンさん」。この人をドラッグ＆ドロップするとストリートビューになります。矢印の方向に移動できる。右上のバッテンを長押しし、白くなってからタップするとストリートビューが終了し、元の地図に戻ります。でもちょっとコツが要ります。


Location Stampで現在地を記録するとき、coordinates形式にすると緯度／経度が貼り付く。「34.69338 135.48293」といった数字のデータです。これにカーソルを合わせMapSearchを実行すると、その場所の地図を示します。旅の記録などに実用的かも。

T("locationStamp",{format:"coordinates"})


乗換案内に飛びたいときは、左下のGoogleロゴをタップ。Web版に移動します。