«前の日記(2010-02-22) 最新 次の日記(2010-02-24)» 編集

会長@腹部日記


2010-02-23 [長年日記]

_ Google Map APIを使ったプラグインを作ってみる (3) - geocodeを利用し住所のみ指定

tDiary用GoogleMapプラグインにgeocode機能を追加しました。

  • 新しいプラグイン呼び出し方法*1を追加
    • google_geomap
基本的な基本

第一引数には住所や、地名を指定します。 利用の際には、プレビュー画面での確認をお勧めします。(・∀・)

 {{google_geomap '羽田空港'}}

オプションを追加する場合

最後の引数はHashとなっています。省略可能です。下記の緯度経度指定時のHashでの指定方法と変わりません。

 google_map('緯度', '経度', :zoom => 15, ... )

シンボル 指定する値について
:title Map中のマーカーに設定するタイトル。
:html マーカーをクリックした際に表示される吹き出し中のhtml要素。:titleとペアで指定してください。
:zoom GoogleMapに指定する倍率 1~16までを指定します。数字が大きいと縮尺が小さくなります。デフォルト:10
:width 埋め込まれるGoogleMapの幅 [pixel]、デフォルト:320
:height 埋め込まれるGoogleMapの高さ幅 [pixel]、デフォルト:240
オプションの例

 {{google_geomap 'フューチャーシティファボーレ', :zoom => 14, , :title => 'ファボーレ!', :html => '<a href="http://www.favore.jp/">アル・プラザ富山と100の専門店 フューチャー シティー『ファボーレ』</a>'}}

注意

文字コードの問題

もしかすると、tDiary2.3以降のUTF8環境じゃないと日本語指定がうまくいかないかもしれません。 申し訳ありませんが、EUC-JP環境で試していませんm(_ _)m

同時呼び出しにおける Google Map API側の制限

試していたところ、1つの日記セクション中に 6つ以上のgeocodeリクエストを送ると、6個目がエラーとなってしまいました。 あまり利用しすぎないようにしてくださいm(_ _)m

ソースコード

  • Javascriptを整形する部分が汚いので綺麗になるアイディア募集します。。

 # -*- coding: utf-8 -*-
 #
 # google_map.rb - embeded Google Map for tDiary, use Google Maps JavaScript API V3.
 #                 http://code.google.com/intl/ja/apis/maps/documentation/v3/services.html
 #
 # Copyright (C) 2010, tamoot <tamoot+tdiary@gmail.com>
 # You can redistribute it and/or modify it under GPL2.
 #
 
 
 def google_map(lat, lon, params = {})
    params.merge!(:lat => lat, :lon => lon)
    google_map_common(params)
 end
 
 def google_geomap(address, params = {})
    params.merge!(:address => address)
    google_map_common(params)
 end
 
 def google_map_common(params)
    init_gmap_data
    return 'not support this environment.' if @conf.mobile_agent?
    
    params[:zoom]    ||=  10
    params[:html]    ||= nil
    params[:title]   ||= nil
    params[:width]   ||= 320
    params[:height]  ||= 240
    params[:address] ||= nil
    
    dom_id = "#{@date.strftime("%Y%m")}_#{@gmap_count}"
    params.merge!(:id => dom_id)
    params.merge!(:width => 320, :height => 240) if @conf.iphone?
    @gmap_data << params
    @gmap_count += 1
    %Q|<div class="gmap" id="#{dom_id}" style="width : #{params[:width]}px; height : #{params[:height]}px;"></div>|
 end
 
 add_header_proc do
    %Q|<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=#{!@conf.iphone?.nil?}"></script>\n|
 end
 
 
 
 add_body_leave_proc do |date|
    init_gmap_data
    gmap_scripts = ''
    if @gmap_data.any?
       gmap_scripts = %Q|<script type="text/javascript">\n<!--\n|
       while @gmap_data.any?
          data = @gmap_data.shift
          if data[:address]
             gmap_scripts << google_geomap_script(data)
          else
             gmap_scripts << google_map_script(data)
          end
       end
       gmap_scripts << %Q|//-->\n</script>\n|
    end
    gmap_scripts
 end
 
 def init_gmap_data
    @gmap_data  ||= []
    @gmap_count ||= 0
 end
 
 def google_map_script(hash)
    str = ''
    str << %Q|google.maps.event.addDomListener(window, 'load', function() {\n|
    str << %Q|  var mapdiv = document.getElementById("#{hash[:id]}");\n|
    str << %Q|  var myOptions = {\n|
    str << %Q|        zoom: #{hash[:zoom]},\n|
    str << %Q|        center: new google.maps.LatLng(#{hash[:lat]}, #{hash[:lon]}),\n|
    str << %Q|        mapTypeId: google.maps.MapTypeId.ROADMAP,\n|
    str << %Q|        scaleControl: true\n|
    str << %Q|      };\n|
    str << %Q|  var gMap = new google.maps.Map(mapdiv, myOptions);\n|
    # set Marker
    if hash[:title]
    str << %Q|  var marker = new google.maps.Marker({\n|
    str << %Q|      position: new google.maps.LatLng(#{hash[:lat]}, #{hash[:lon]}),\n|
    str << %Q|      map: gMap,\n| 
    str << %Q|      title: '#{hash[:title]}'\n|
    str << %Q|  });\n|
    # set InfoWindow
    if hash[:html]
    str << %Q|  var infowindow = new google.maps.InfoWindow({\n|
    str << %Q|      content: '<span style="color: #000000;">#{hash[:html]}</span>',\n|
    str << %Q|      size: new google.maps.Size(350, 200)\n|
    str << %Q|  });\n|
    str << %Q|  google.maps.event.addListener(marker, 'click', function() {\n|
    str << %Q|    infowindow.open(gMap, marker);\n|
    str << %Q|  });\n|
    end # :html
    end # :title
    str << %Q|});\n|
     
    str
 end
 
 def google_geomap_script(hash)
    str = ''
    str << %Q|google.maps.event.addDomListener(window, 'load', function() {\n|
    str << %Q|  var geocoder = new google.maps.Geocoder();\n|
    str << %Q|  if(geocoder) {\n|
    str << %Q|    geocoder.geocode( { 'address': '#{hash[:address]}'}, function(results, status) {\n|
    str << %Q|      if (status == google.maps.GeocoderStatus.OK) {\n|
    str << %Q|        var geoLat = results[0].geometry.location;\n|
    str << %Q|        var mapdiv = document.getElementById("#{hash[:id]}");\n|
    str << %Q|        var myOptions = {\n|
    str << %Q|          zoom: #{hash[:zoom]},\n|
    str << %Q|          center: geoLat,\n|
    str << %Q|          mapTypeId: google.maps.MapTypeId.ROADMAP,\n|
    str << %Q|          scaleControl: true\n|
    str << %Q|        };\n|
    str << %Q|        var gMap = new google.maps.Map(mapdiv, myOptions);\n|
    # set Marker
    if hash[:title]
    str << %Q|        var marker = new google.maps.Marker({\n|
    str << %Q|            position: geoLat,\n|
    str << %Q|            map: gMap,\n| 
    str << %Q|            title: '#{hash[:title]}'\n|
    str << %Q|        });\n|
    # set InfoWindow
    if hash[:html]
    str << %Q|        var infowindow = new google.maps.InfoWindow({\n|
    str << %Q|            content: '<span style="color: #000000;">#{hash[:html]}</span>',\n|
    str << %Q|            size: new google.maps.Size(350, 200)\n|
    str << %Q|        });\n|
    str << %Q|        google.maps.event.addListener(marker, 'click', function() {\n|
    str << %Q|          infowindow.open(gMap, marker);\n|
    str << %Q|        });\n|
    end # :html
    end # :title
    str << %Q|      }else{\n|
    str << %Q|        alert("Geocode was not successful for the following reason: " + status)\n|
    str << %Q|      }\n|
    str << %Q|    });\n|
    str << %Q|  }\n|
    str << %Q|});\n|
     
    str
 end
 
 # Local Variables:
 # mode: ruby
 # indent-tabs-mode: t
 # tab-width: 3
 # ruby-indent-level: 3
 # End:
 # vim: ts=3
 

Tags: tDiary Ruby

*1 メソッドという表現は、Ruby言語に触れていないtDiaryユーザ的にはなじみの無い表現?

_ きょうのつぶやき : 55回