WMS (Web Mapping Server) 画像を表示する

説明

カスタムマップを表示する際にWMS (Web Mapping Server) のデータを利用して、衛星画像や各種資料画像を表示させることができます。WMSに関しては以下のページを参照してください。続きは書籍で、どうぞ...

　詳しい解説などは逆引きGoogle Maps APIリファレンス、またはGoogle Maps APIリファレンスを参照してください。

サンプルコード [実行]

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Sample</title>
<script src="http://maps.google.com/maps?file=api&v=2.61&key=ABQIAAAAasAJryKxWJnBFVJa487d9hTHGAxTVT7IRADYa-JdYz7xQ8IQZBSthgDZdggYpQHsmm6WYtHstQFfLA" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
window.onload = function() {
var wmsLayer = [new GTileLayer(new GCopyrightCollection(),0,17)];
wmsLayer[0].getTileUrl = function(tile, zoom) {
var filename = "http://wms.jpl.nasa.gov/wms.cgi?request=GetMap&service=WMS&version=1.1.1&srs=EPSG:4326&format=image/jpeg&styles=&bbox=-180,-180,180,180&width=256&height=256&layers=modis,global_mosaic";
return filename;
};
wmsLayer.getOpacity = function() { return 1;};

var wms = new GMapType(wmsLayer, G_NORMAL_MAP.getProjection(), "WMS画像");
var map = new GMap2(document.getElementById("gmap"));
map.addMapType(wms);
map.setCenter(new GLatLng(36, 137), 0);
map.addControl(new GMapTypeControl());
}
//]]>
</script>
<div id="gmap" style="width: 500px; height: 400px"></div>
</body>
</html>