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回
[ツッコミを入れる]