展覧会案内ページに、会場の地図を表示するようにしたので忘れる前にメモ
まず入力ページのヘッダにgooglemapを使用するために以下を追加
keyは予め取得しておく
<script type="text/javascript" src="http://www.google.com/jsapi?key=key"></script>
<script type="text/javascript">google.load("maps", "2.x");</script>
続けて javascript で動作を書く
<script type="text/javascript"><!--
var map = null;
var geocoder = null;
var marker = null;
function initialize() {
map = new GMap2(document.getElementById("map_canvas"));
if (GBrowserIsCompatible()) {
var lat = document.getElementById("lat");
var lng = document.getElementById("lng");
var latlng = null;
if (lat.value != "" && lng.value) {
latlng = new GLatLng(lat.value,lng.value);
} else {
latlng = new GLatLng(35.671940094926995,139.76398944854736);
}
map.setCenter(latlng, 17);
map.addControl(new GLargeMapControl());
geocoder = new GClientGeocoder();
marker = new GMarker(latlng,{draggable: true});
map.addOverlay(marker);
GEvent.addListener(marker, "dragend", function(){
markerToform(marker.getLatLng());
});
GEvent.addListener(map, "dblclick", function(overlay,point) {
marker.setPoint(point);
markerToform(point);
});
}
}
function markerToform(latlng)
{
var lat = document.getElementById("lat");
var lng = document.getElementById("lng");
lat.value = latlng.lat();
lng.value = latlng.lng();
document.getElementById("mapenable").checked=true;
}
function showAddress() {
address = document.getElementById("address").value;
geocoder.getLatLng(
address ,
function(point) {
if (!point) {
alert(address + " \u304C\u898B\u3064\u304B\u308A\u307E\u305B\u3093\u3002");
} else {
map.setCenter(point, 13);
marker.setPoint(point);
markerToform(point);
}
}
);
}
// --></script>
入力ページを開いたときにinitialize()を実行する
initialize()は
html内の map_canvas エレメントにgooglemapを挿入する。
初期位置をformのid=lat,id=lngより取得する（lat,lngはpythonで予め埋め込む）
markerオブジェクトとGeocoderオブジェクトを作っておく
markerをドラッグして移動したときと、地図をダブルクリックした時にformのlat,lngを書き換えるようにイベント登録しておく
function markerToform(latlng) で、マーカーの位置をformのlat,lngに反映させる処理をする。地図を使用するcheckboxにもチェックを入れておく
function showAddress() は、会場住所から場所を検索できるようにgeocoderを使用した処理をする。（サンプルをコピペ）
htmlソース
<input type="button" name="showaddr" id="showaddr" onclick="showAddress()" value="地図"/>
<label class="description" for="mapenable">地図</label>
<input type="checkbox" id="mapenable" name="mapenable" value="enable" {% if entity.point %}checked{% endif %}/>地図を使用する
<input type="hidden" id="lat" name="lat" value="{{ entity.point.lat|default:"" }}" />
<input type="hidden" id="lng" name="lng" value="{{ entity.point.lon|default:"" }}" />
<div id="map_canvas" style="width: 500px; height: 300px">
</div>
案内状表示ページのhtmlにも同様にgooglemapのjavascriptを追加しておく
<script type="text/javascript" src="http://www.google.com/jsapi?key=key"></script>
<script type="text/javascript">google.load("prototype", "1.6.0.2");</script>
<script type="text/javascript">google.load("maps", "2.x");</script>
<script type="text/javascript"><!--
var WEEK ='week2';
function viewmap(obj,lat,lng)
{
var par = obj.parentNode.parentNode;
var elm = par.childNodes;
var cld = elm[1];
cld.style.display="block";
elm[0].childNodes[0].style.display="block";
obj.style.display = "none";
var map = new google.maps.Map2(cld);
map.addControl(new GLargeMapControl());
map.setCenter(new google.maps.LatLng(lat, lng), 17);
map.addOverlay(new GMarker(new GLatLng(lat, lng)));
}
function closemap(obj)
{
var par = obj.parentNode.parentNode;
var elm = par.childNodes;
elm[0].childNodes[1].style.display="block";
obj.style.display = "none";
var cld = elm[1];
cld.style.display="none";
cld.innerHTML="";
}
// --></script>
案内状では、地図ボタンを押したときに地図を表示、閉じるボタンを押したときに地図表示を閉じるようにしたい
function viewmap(obj,lat,lng) と function closemap(obj)
案内状表示ページを生成するpythonのコード（地図の部分抜粋）
if entity.point:
cards+=u"""
<div class="maps"><div class="maphed"><div class="btnclose" onclick="closemap(this)"></div><div class="btnopen" onclick="viewmap(this,%f,%f)"></div>地図</div><div id="map" name="map"></div>
</div>""" % (entity.point.lat,entity.point.lon)
btnopenをクリックしたときにviewmap(this,point.lat,point.lon)が呼ばれる
viewmap スクリプトで
this オブジェクト以下の id=mapにgooglemapを表示する様にしたかったけど、id=mapのエレメントへの参照の仕方がわからなかったので
function viewmap(obj,lat,lng)
{
var par = obj.parentNode.parentNode;
var elm = par.childNodes;
var cld = elm[1];
みたいな、わけわからん参照になってしまった...
入力ページからPOSTされたデータを処理するpythonプログラム（抜粋)
mapen = self.request.get('mapenable')
if mapen == "enable":
try:
lat = self.request.get('lat')
lng = self.request.get('lng')
postcard.point = db.GeoPt(lat,lng)
except:
postcard.point = None
else:
postcard.point = None
ソースの表示にBlogger Syntax Highlighterを使用してみた。
http://www.kuribo.info/2008/06/blogger-syntax-highlighter.html
が1.0TByteだけど25800円とかなんで、こっちのほうが良いかなと思う
が1万円位なので、こっちを買って遊ぶのも良いかな～
を買いました。
が９０００円くらいで売ってます。通常だと２万円以上すると思いますが、アップグレードなら割安で購入できます。
12万円位する
だと62000円くらい。どうやらアップグレードは無料のExpressEditionからも出来そうなので（本当？）アップグレード版を買うのが一番よさそう。でも６万円は高いよ、そのうち2010が出るし...
買ってみた
（1GBの使ってた）は便利だったって気付いた。u3クルーザはメディア内がCDROM領域とリムーバブルディスク領域に分かれてて、パソコンに挿すとランチャが起動して暗証番号入力ウィンドウが開く。抜けば暗号かかった状態になる
（高解像度が魅力的、キーボードも打ちやすそう、選ぶならハイパフォーマンスモデルでないと、でもちょっと高い）、SSD搭載機（SSD搭載機の方が起動が早かったり、電池が持つとか軽いとかメリットがあるけど、やっぱり記録容量が少ないし、HDD搭載機なら将来的には2.5インチのSSDが大容量で安くなれば載せ変えられそうだと思う）
も値段下がってる
でいいかって思いました。そしたら別にキャンペーン期間中にあわてて買わなくてもいいかなー
![Interface (インターフェース) 2008年 09月号 [雑誌]](https://lh3.googleusercontent.com/blogger_img_proxy/AEn0k_vVLHudFhRQLw2fJbevhcvNS-VxH9hOJTn_THqP1BiL9mq9kdLbP14mUgr-qJMA_lci6f_4ubEWhUzH14LFnWgBgKgv0t88h9j-4_fBGs-i4DsZ3WymQAnfdeocnc-961Y=s0-d)
