2010-02-23 [長年日記]
_ Google Map APIを使ったプラグインを作ってみる (3) - geocodeを利用し住所のみ指定
tDiary用GoogleMapプラグインにgeocode機能を追加しました。
- 新しいプラグイン呼び出し方法*1を追加
- google_geomap
- ダウンロードはこちら - google_map.rbからお願いします。
基本的な基本
第一引数には住所や、地名を指定します。 利用の際には、プレビュー画面での確認をお勧めします。（・∀・）
{{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
*1 メソッドという表現は、Ruby言語に触れていないtDiaryユーザ的にはなじみの無い表現?
_ きょうのつぶやき : 55回
[ツッコミを入れる]
