javascript + iOS - 現在位置をGoogle Mapに表示

WEB+DB PRESS vol. 57

WEB+DB Vol.57の［速習］位置情報サービスを見てたら、

• 404 Blog Not Found:javascript + perl - 住所でGoogle MapにアクセスするHack

で現在位置を自動入力できることに気がついたので速習。

FirefoxとiPhoneおよびiPadで動作確認しています。Safari 5でも動くのですが、位置取得ができないというエラーになります。

これと同じことはiPhone/iPad標準装備のMapアプリでも当然できますし、Twitterクライアントの多くがこれと同様の機能を備えているわけですが、自作もこの程度には楽ということで。

Enjoy!

Dan the Geocoder

html

<input type="submit" value="Where am I?" onclick="gmap.whereami()">
<div id="gmap" style="width:640;height:480"></div>
<script type="text/javascript" src="http://www.google.com/jsapi?key=apikey"></script>

JavaScript

google.load('maps', '2');
gmap = {};

google.setOnLoadCallback(function(){
    gmap.map = new google.maps.Map2(document.getElementById('gmap'));
    gmap.map.addControl(new GLargeMapControl3D());
    gmap.map.addControl(new GMapTypeControl());
    gmap.geocoder = new google.maps.ClientGeocoder();
});
window.onunload=function(ev){  GUnload() }

gmap.whereami = function(doc,nav){
  if (!navigator.geolocation) return;
  var showloc = function(pos){
    var point = new GLatLng(pos.coords.latitude, pos.coords.longitude);
    gmap.map.setCenter(point, 15);
    var marker = new google.maps.Marker(point);
    gmap.map.clearOverlays();
    gmap.map.addOverlay(marker);
    var info = (function(d){
        var div = d.createElement('div');
        div.appendChild(d.createTextNode('緯度:'+point.y));
        div.appendChild(d.createElement('br'));
        div.appendChild(d.createTextNode('経度:'+point.x));
        div.appendChild(d.createElement('br'));
        var a = d.createElement('a');
        a.href = 'mailto:?subject=Here%20I%20am&'
          + 'body=http%3A%2F%2Fmaps.google.co.jp%2Fmaps%3Fq%3D'
          + point.y + ',' + point.x;
        a.appendChild(d.createTextNode('Mail where I am'));
        div.appendChild(a);
        return div;
    })(document);
    google.maps.Event.addListener(marker, "click", function() {
      marker.openInfoWindow(info);
    });
  };
  var onerror = function(e){ alert('Sorry. I cound not find where you are.') };
  navigator.geolocation.getCurrentPosition(showloc, onerror);
};