Google Maps JavaScript API v2Google Maps APIの使い方 － 地図生成、サイズ、カーソル
Google Maps JavaScript APIバージョン2は廃止され、バージョン3に移行しました。
» Google Maps JavaScript API v3の解説はこちら!
ブラウザサイズに合わせて地図をリサイズ
2008/5/5
サンプルを見る
<script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAvABrzCnRluKK0Cj97fTMThTNR7aHVSEFb0WbViWwc6F-_w9PjBSogZu_7UgOTbx25ka46X-fnGmyvw" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
var map;
var obj;
function load() {
if(GBrowserIsCompatible()){
obj=document.getElementById("map");
fResize();
/* 地図インスタンス生成 */
map=new GMap2(obj);
/* 中心地点 */
map.setCenter(new GLatLng(35.665246,139.712319), 14);
/* コントロール追加 */
map.addControl(new GLargeMapControl()); /* コントロール大 */
map.addControl(new GScaleControl()); /* スケールコントロール */
map.addControl(new GMapTypeControl()); /* 地図タイプコントロール */
map.addControl(new GOverviewMapControl()); /* 折りたたみ可能な概観地図 */
}
}
function fResize(){
/* ウィンドウの幅と高さを取得 */
var width, height;
if(window.innerWidth){
width=window.innerWidth;
height=window.innerHeight;
}else if(document.documentElement && document.documentElement.clientWidth){
width=document.documentElement.clientWidth;
height=document.documentElement.clientHeight;
}else if(document.body && document.body.clientWidth){
width=document.body.clientWidth;
height=document.body.clientHeight;
}
/* 地図のサイズをウィンドウの幅と高さにリサイズ */
obj.style.width=width+"px";
obj.style.height=height+"px";
}
window.onload=load;
window.unload=GUnload;
window.onresize=fResize;
//]]>
</script>
<style type="text/css">
body { margin:0; padding:0; }
</style>
<div id="map"><!-- 地図描画領域 --></div>
地図生成時に「サイズ」「地図タイプ」「カーソル」を設定
2008/5/5
GMapOptionsクラスは、地図のサイズ、カーソル、地図タイプなどの地図のオプション設定をする場合に、GMap2コンストラクタの第2引数として指定します。
| プロパティ | タイプ | 説明 | ||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
| size | GSize | 地図の縦横サイズをピクセル単位で指定します。デフォルトは、地図描画領域（div要素など）のサイズが適用されます。 | ||||||||||
| mapTypes | 地図タイプの配列 |
地図で使用する地図タイプの配列を指定します。デフォルトは、「G_DEFAULT_MAP_TYPES」が適用されます。
|
||||||||||
| draggableCursor | String | 地図がドラッグ可能な場合に表示されるカーソル。 | ||||||||||
| draggingCursor | String | 地図のドラッグ中に表示されるカーソル。 |
サンプルを見る
<script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAvABrzCnRluKK0Cj97fTMThTNR7aHVSEFb0WbViWwc6F-_w9PjBSogZu_7UgOTbx25ka46X-fnGmyvw" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
function load() {
if(GBrowserIsCompatible()){
var opts={
/* サイズ */
size:new GSize(400,200),
/* 地図タイプ */
mapTypes:[G_HYBRID_MAP],
/* カーソル */
draggableCursor:"crosshair",
draggingCursor:"move"
};
/* 地図インスタンス生成 */
var map=new GMap2(document.getElementById("map"),opts);
/* 中心地点 */
map.setCenter(new GLatLng(35.665246,139.712319), 14);
/* コントロール追加 */
map.addControl(new GSmallMapControl());
}
}
window.onload=load;
window.unload=GUnload;
//]]>
</script>
<div id="map" style="width:425px;height:300px"><!-- 地図描画領域 --></div>
地図インスタンス生成
2008/5/5
new GMap2(container[, opts])
地図を表示するには、GMap2クラスを使用します。
GMap2コンストラクタは、GMap2クラスのインスタンスを生成します。
第1引数containerには、地図を描画するHTMLコンテナ（div要素など）を指定します。
オプション引数opts.mapTypesには、地図タイプを指定します。 省略した場合は、デフォルトのG_DEFAULT_MAP_TYPESが適用されます。
オプション引数opts.sizeには、地図のサイズを指定します。
省略した場合は、HTMLコンテナ（地図を表示するdiv要素）に定義されているサイズが適用されます。
サンプルを見る
<script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAvABrzCnRluKK0Cj97fTMThTNR7aHVSEFb0WbViWwc6F-_w9PjBSogZu_7UgOTbx25ka46X-fnGmyvw" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
function load() {
if(GBrowserIsCompatible()){
/* ★地図インスタンス生成 */
var map=new GMap2(document.getElementById("map"));
/* 中心地点 */
map.setCenter(new GLatLng(35.665246,139.712319), 14);
/* コントロール追加 */
map.addControl(new GLargeMapControl()); /* コントロール大 */
}
}
window.onload=load;
window.unload=GUnload;
//]]>
</script>
<div id="map" style="width:425px;height:300px"><!-- 地図描画領域 --></div>