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に入れちゃいませんか?
では今からアカウント取得します!!