例−34：ズームレベルに応じて画像を変更する
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>例−34：ズームレベルに応じて画像を変更する</title>
<script src="http://maps.google.co.jp/maps?file=api&v=2&key=[MAPS_API_KEY]"
type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
var map;
var mgr;
function load(){
if (GBrowserIsCompatible()) {
var pos = new GLatLng(35.676148,139.74479);
//地図を作成
map = new GMap2(document.getElementById("map"));
map.setCenter(pos, 16);
//ズームコントローラを付ける
map.addControl(new GLargeMapControl());
//マーカーマネージャーを作成する
mgr = new GMarkerManager(map);
//ズームレベル15以上のとき、photoAを表示
var photoA_marker = createMarker(pos, {
image : "http://googlemaps.googlermania.com/uploads/image/photoA.gif"
,iconSize : new GSize(113, 125)
,iconAnchor: new GPoint(0, 125)
});
mgr.addMarker( photoA_marker, 15 );
//ズームレベル12〜14のとき、photoBを表示
var photoB_marker = createMarker(pos, {
image : "http://googlemaps.googlermania.com/uploads/image/photoB.gif"
,iconSize : new GSize(57, 63)
,iconAnchor: new GPoint(0, 63)
});
mgr.addMarker( photoB_marker, 12, 14 );
//ズームレベル3〜11のとき、photoCを表示
var photoC_marker = createMarker(pos, {
image : "http://googlemaps.googlermania.com/uploads/image/photoC.gif"
,iconSize : new GSize(29, 33)
,iconAnchor: new GPoint(0, 33)
});
mgr.addMarker( photoC_marker, 3, 11 );
//マーカーマネージャーを稼動させる
mgr.refresh();
}
}
function createMarker(markerPos, photoInfo){
//オリジナルマーカーの画像を作成
var myIcon = new GIcon(photoInfo);
//画像として表示させるため、クリック・オートパンの禁止
var markerOpt = {
icon: myIcon
,clickable: false
,autoPan: false
};
var marker = new GMarker(markerPos, markerOpt);
return marker;
}
GEvent.addDomListener(window, "load", load);
GEvent.addDomListener(window, "unload", GUnload);
//]]>
</script>
</head>
<body >
<h1>例−34：ズームレベルに応じて画像を変更する</h1>
<div id="map" style="width:600px;height:600px;">
</body>
</html>
