OpenLayersでThird Party APIsを使う。Google Maps編[Chapter 13]

OpenLayersを使ってみる。[Chapter 13]

OpenLayersのProjection Classについて[Chapter 12] に引き続き、OpenLayersのThird party APIsについての基本を学んでおきます。
Third party APIsとは、WEB Mapを提供しているGoogle Maps、Yahoo Maps、Bing(Microsoft) Maps、OpenstreetMapのAPIをOpenLayersで使ってみようと言うことです。

OpenLayers 2.10 Beginner's Guideなる書籍の章立てにあわせて、OpenLayersの使い方を学んでいきます。

では、今回は、Google Maps Version3について学んでいきます。

Goole Maps V3を使う。

まずは、Google Mapsの標準的な使い方です。
まずは、以下のcodeを入力します。
保存先は、c:¥ms4w¥apache¥htdocs¥openlayers2_12¥chapter5¥にしておきます。
ファイル名は、chapter5_ex2_google_maps_v3.htmlで保存します。

<!DOCTYPE html>
<html lang='ja'>
	<head>
		<meta charset='utf-8' />
		<script src="http://maps.google.com/maps/api/js?sensor=false&v=3.9"></script>
		<script type='text/javascript' src='http://localhost/openlayers/OpenLayers.js'></script>
		<script type='text/javascript'>
			var map;

			function init() {
				//Create the map object
				map = new OpenLayers.Map('map_element');

				//Create Google Map Layer objects
				var google_hybrid = new OpenLayers.Layer.Google(
					"Google Hybrid", {
					type : google.maps.MapTypeId.HYBRID,
					numZoomLevels : 20
				});
				var google_physical = new OpenLayers.Layer.Google(
					"Google Physical", {
					type : google.maps.MapTypeId.TERRAIN
				});
				var google_satellite = new OpenLayers.Layer.Google(
					"Google Satellite", {
					type : google.maps.MapTypeId.SATELLITE,
					numZoomLevels : 22
				});

				//Google streets is the normal map type, so we don't need to pass in a type
				var google_streets = new OpenLayers.Layer.Google(
					"Google Streets", {
					numZoomLevels : 20
				});

				//Add the google map layers
				map.addLayers([google_hybrid, google_physical, google_satellite, google_streets]);

				//Add a layer switcher control
				map.addControl(new OpenLayers.Control.LayerSwitcher());

				// Zoom the map to the max extent
				if (!map.getCenter()) {
					map.zoomToMaxExtent();
				}
			}

		</script>
	</head>

	<body onload='init();'>
		<div id='map_element' style='width: 500px; height: 500px;'></div>
	</body>
</html>

保存後、FireFoxを立ち上げて、http://localhost/openlayers2_12/chapter5/chapter5_ex2_google_maps_v3.htmlと入力して、FireFoxを開いくと
blog.godo-tys.jp_wp-content_gallery_openlayers_chapter_5_image01.jpg

な感じでGoogle Mapが表示されます。

そして、LayerSwitcherをclickするとGoogle mapの表示typeを
blog.godo-tys.jp_wp-content_gallery_openlayers_chapter_5_image02.jpg

のように変更できます。

まず、Google Maps API v3を使うには、

<script src="http://maps.google.com/maps/api/js?sensor=false&v=3.9"></script>

が必ず必要になります。

Google Map layer objectを作成する。

次に、Google Map layer objectを作成します。

var google_layer_object = new OpenLayers.Layer.Google(
    'Layer Name',
    {Properties}
);

OpenLayers.Layer.Google(…);でobjectを作成します。
'Layer Name'は、{String}で表示する名前
{Properties}は、 Google Layerのpropertiesを設定します。

Google layer properties

Google Layer propertiesはいくつかありますが、特にtype {GmapType}の設定で、道路地図や地形図、衛星画像などを表示します。

例えば、

var google_layer_V3 = new OpenLayers.Layer.Google(
    'Google Maps V3 Layer',
    {type: google.maps.MapTypeId.TYPE}
);

のように設定します。

次の表はgoogle.maps.MapTypeIdのTYPEの一覧です。

Type Description
google.maps.MapTypeId.ROADMAP The default value, used if nothing is passed in. Shows the default street map (same as G_NORMAL_MAP).
google.maps.MapTypeId.HYBRID Displays a map with a semi-transparent street layer overlaid on satellite imagery (same as G_HYBRID_MAP).
google.maps.MapTypeId.SATELLITE Displays satellite imagery (same as G_SATELLITE_MAP).
google.maps.MapTypeId.TERRAIN Displays a map with features such as terrain (same as G_PHYSICAL_MAP).

OpenLayers.Layer.Googleに詳しくpropertiesやfunctionの説明があります。

今回のまとめ

OpenLayersによるThird Party APIs Google Mapsの基本を学びました。
次回は、Yahoo Mapなどの third party mapping APIsについて学んでいきます。

また、本tutorialは、htmlやCSSやJavaScriptの基本的なことはある程度理解している前提で今後も話を進めていきます。また、誤字、脱字、spell間違いや勘違いも多々出てくると考えられます。
それは違うじゃん!!とかいろんな意見をいただければと思います。
そこんところ ヨロシク~~!!

OpenLayers Tutorialの目次に戻る。

Leave a Comment


NOTE - You can use these HTML tags and attributes:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

 

WP-SpamFree by Pole Position Marketing

Social Widgets powered by AB-WebLog.com.