google maps で座標取得用のライブラリを作ってみた

初期座標などを登録する際にgoogle maps apiのGeocodingを呼び出して座標を取得するようにしています。

よく地図機能を実装するので、この際だからライブラリ化しました。

以下ソース
（なぜかcoffeescriptです。githubにはいつかアップします。）

$.googleMaps = (option, domObj)->
    @._extends option
    @._mapCreate domObj

$.googleMaps.OPTION =
    ad: ''
    ido: ''
    keido: ''
    collback: ()-> false

$.googleMaps.APIOPTION =
    zoom: 15
    mapTypeId: google.maps.MapTypeId.ROADMAP
    scaleControl: true
    mapTypeControl: false
    scrollwheel: false

$.googleMaps.prototype =
    # To override the default options.
    _extends:(option)->
        $.googleMaps.OPTION = $.extend $.googleMaps.OPTION, option

    # To draw a googlemap
    _mapCreate:(domObj)->
        self = @
        $.when(@._mapLatLngObject($.googleMaps.OPTION.ido, $.googleMaps.OPTION.keido)).always (ido, keido)->
            $.googleMaps.APIOPTION.center = new google.maps.LatLng(ido, keido)
            $.googleMaps.OPTION.collback ido, keido
            #create googlemap
            map = new google.maps.Map domObj.get(0), $.googleMaps.APIOPTION
            self._markerCreate $.googleMaps.APIOPTION.center, map

    # Create a marker & Add event marker
    _markerCreate:(latlng, mapObj)->
        markerOption =
            'position': latlng
            'map': mapObj
            'draggable': true

        marker = new google.maps.Marker markerOption

        google.maps.event.addListener marker, 'dragend', ()->
            position = marker.position
            mapObj.setCenter position
            $.googleMaps.OPTION.collback position.lat(), position.lng()

    # Object returned by the latitude and longitude.
    _mapLatLngObject:(ido, keido)->
        $def = $.Deferred()
        if(ido == '' || keido == '')
            geocoder = new google.maps.Geocoder()
            geocoder.geocode({address: $.googleMaps.OPTION.ad}, (results, status)->
                if (status == google.maps.GeocoderStatus.OK)
                    $def.resolve(results[0].geometry.location.lat(), results[0].geometry.location.lng())
                else
                    #To Tokyo
                    $def.reject(35.6894875, 139.69170639999993)
            )
        else
            $def.resolve(ido, keido)
        $def.promise()

$.fn.googleMaps = (option)->
    #instance
    new $.googleMaps option,@

使い方

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
     <head>
         <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
         <meta http-equiv="Content-Language" content="ja" />
         <title>地図</title>
     </head>
     <body>
         <div id="map_canvas"></div>

         <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
         <script type="text/javascript" src="http://www.google.com/jsapi"></script>  
         <script type="text/javascript">google.load("jquery", "1.7");</script> 
         <script type="text/javascript" src="./map.js"></script>
         <script type="text/javascript">

         $('#map_canvas').googleMaps(
             ad: '住所'
             ido: '緯度の座標'
             keido: '経度の座標'
             collback: function (ido, keido){
                 //緯度と経度が返ってきます。
             }
         );

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

仕様としてはgoogleMapsオブジェクトにオプションを渡して座標を返します。

idoとkeidoに入っている座標を優先して地図を表示します。
住所だけ入っている場合はGeocodingを利用して座標を取得します。
Geocodingで座標取得できない場合、都庁にマーカーを置きます。
初期のレンダリング時、callback関数に緯度と経度を返します。
地図上のマーカーを移動するとcallback関数に緯度と経度が返ってきます。

こんな感じかな

今回「$.Deferred()」を使用してみました。通常Ajaxで通信する際はcallback関数を書かないと行けないですが、JQueryのDeferredを使用するとcallback関数を利用しなくても書けちゃいます。
コードが綺麗になりますね^-^

テストしたのである程度動作保証されていますが、バグっていたらフィードバックをお願いします＞＜

修正版をリリースしました。

google maps で座標取得用のライブラリ改修版 - 田舎の技術者が奮闘中

ついでにgithubにアップしました。