GoogleMapsAPI V3

yusukezzz — Thu, 26 Nov 2009 13:41:22 +0000

今更ながらver3が存在することを知りました；
ver2.xと比べて大分シンプルになったようです
最大の違いはiPhoneやandroid向けにも最適化されている点です

Map V3 Tutorial – Google Maps JavaScript API V3 – Google Code
Google Maps API V3 Reference – Google Maps JavaScript API V3 – Google Code

毎度のごとく仕様はかなり変わっているので、
とりあえずチュートリアルとリファレンスを読んで勉強し直そうと思います

windowサイズ変更時の処理

yusukezzz — Wed, 16 Sep 2009 07:02:17 +0000

最近googleMapsAPIで地図を使った研究をしているのですが、
windowサイズを変えたり、ページ下段にFirebugを表示した際に要素のサイズを変える処理が欲しくなりました
javascriptではonload（ページ読み込み時のイベント）や、
onresize（ページ領域変更時のイベント）が用意されています
これらを使ったサンプルがこちら（Firefox3.5でしか試してません）
id=map_elementをページの半分にだけ表示します

window.onload = function(){
  //コメント部はgoogleMapsAPIを使用している場合
  //mapの初期化処理は省略
  //map = new GMap2($("map_element"));
  setHalfSize();
}
window.onresize = function(){
  //var center = map.getCenter();
  //var point = new GLatLng(center.lat(), center.lng());
  setHalfSize();
  //checkResizeを呼んでサイズ変更をAPIに通知しておくと、その後の移動を宜しくやってくれる
  //map.checkResize();
  //map.panTo(point);
}
function setHalfSize(){
  $('map_element').style.width = innerWidth / 2;
  $('map_element').style.height = innerHeight;
}

ようはページ読み込み時とページ内領域サイズ変更時にサイズがfitするような処理を仕込めばいいことになります
~~googleMapsの場合は中心位置もサイズに合わせて維持させてやると使いやすくなると思います~~
blog@slightlyblue: GoogleMapsブラウザリサイズ時のイベント処理でcheckResizeする！
を参考にmapの中央位置をリサイズ後も維持出来るようにしました

ゆーすけぶろぐ » googlemaps

GoogleMapsAPI V3

windowサイズ変更時の処理