新UMAとかのあとに: 展覧会案内にGoogleMapを追加

展覧会案内ページに、会場の地図を表示するようにしたので忘れる前にメモ

まず入力ページのヘッダに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>


<script type="text/javascript" src="http://www.google.com/jsapi?key=key"></script>
<script type="text/javascript">google.load("maps", "2.x");</script>

続けて javascript で動作を書く

view plain print ?

<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>


<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ソース

view plain print ?

<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>


 <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を追加しておく

view plain print ?

<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>


<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のコード（地図の部分抜粋）

view plain print ?

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)


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のエレメントへの参照の仕方がわからなかったので

view plain print ?

function viewmap(obj,lat,lng)
{
var par = obj.parentNode.parentNode;
var elm = par.childNodes;
var cld = elm[1];


function viewmap(obj,lat,lng)
  {
    var par = obj.parentNode.parentNode;
    var elm = par.childNodes;
    var cld = elm[1];

みたいな、わけわからん参照になってしまった...

入力ページからPOSTされたデータを処理するpythonプログラム（抜粋)

view plain print ?

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


  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

新UMAとかのあとに

2008年7月14日月曜日

展覧会案内にGoogleMapを追加

0 件のコメント: