2010-02-17 [長年日記]
_ Google Map APIを使ったプラグインを作ってみる (2) - 設定画面無し版
先日のtDiary用プラグインを改良しました。
- ファイル名、メソッド名変更
- gmap => google_map
- contribの他のgoogle系プラグインに合わせてみました
- メソッド引数変更
- 最後の引数は Hash でもらうようにしました
基本的な基本
第一引数は緯度、第二引数は経度です。 小数表現も利用可能ですが、GoogleMap でどこまで解釈できるか知りません （・∀・）
{{google_map '38.695952', '137.213677'}}
オプション付きの使い方
最後の引数はHashとなっています。省略可能です。
| シンボル | 指定する値について |
|---|---|
| :title | Map中のマーカーに設定するタイトル。 |
| :html | マーカーをクリックした際に表示される吹き出し中のhtml要素 |
| :zoom | GoogleMapに指定する倍率 1～16までを指定します。数字が大きいと縮尺が小さくなります。デフォルト:10 |
| :width | 埋め込まれるGoogleMapの幅 [pixel]、デフォルト:320 |
| :height | 埋め込まれるGoogleMapの高さ幅 [pixel]、デフォルト:240 |
オプション付きの使用例1
{{google_map '36.695952', '137.213677', :title => '富山市役所', :zoom => 13, :width => 500, :height => 300}}
オプション付きの使用例2
{{google_map '36.695952', '137.213677', :title => '富山市役所', :html => '<a href="http://www3.city.toyama.toyama.jp/machikado/genre/g13_s.asp?0009">展望台</a>いってきました', :zoom => 10, :width => 400, :height => 300}}
注意
- 携帯環境では表示しません。
- iPhone/iPod touchの場合は、サイズを320x240に強制します。*1
こちらから取得ください
コードの中身
# -*- coding: utf-8 -*-
#
# google_map.rb - embeded Google Map for tDiary
#
# Copyright (C) 2010, tamoot <tamoot+tdiary@gmail.com>
# You can redistribute it and/or modify it under GPL2.
#
def google_map(lat, lon, 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
dom_id = "#{@date.strftime("%Y%m")}_#{@gmap_count}"
params.merge!({:lat => lat, :lon => lon, :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?
gmap_scripts << google_map_script(@gmap_data.shift)
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
# Local Variables:
# mode: ruby
# indent-tabs-mode: t
# tab-width: 3
# ruby-indent-level: 3
# End:
# vim: ts=3
*1 iPad はどーやって対応するのかな
せっかくなのでCodeReposのアカウントを取って、contribに入れちゃいませんか?
では今からアカウント取得します!!