38 - 外部サービスを利用する 1 - Google Map

38-1 Google Map
Google Map は、Google Map API により、無料のウェッブサイトに表示できる無料のサービスです。有料ウェッブサイトや社内使用するときは、Google Map API for Business の有償ライセンスが必要です。非営利団体が無償で Google Map API for Business のライセンスを受けられる場合もあるようです。詳しくは「Google Maps API のライセンス」（https://developers.google.com/maps/licensing?hl=ja）ページをみてください。
（API キーがなくても Google Map API の機能は使えるようです。）

「Google (v3) Layer Example（google-v3.html）」を参考に Google Map を陸前高田市の地図に重ねてみます。
OpenLayers 「Spherical Mercator（http://docs.openlayers.org/library/spherical_mercator.html）」も参考にしました。

「ol018-nippon_bmi_akiruno_pgis.html」を続けて使います。
（他の地図サービスを試すときはコピーして使ってください。）

a Eclipse のメニューの「ファイル」->「ファイルを開く」をクリックします。

b 「ファイルを開く」ウィンドウで、「OpenLayers-2.13.1」->「examples」->「google-v3.html」をクリックして選択し、「OK」ボタンをクリックします。
同じように「google-v3.js」を開きます。





c 次のように「google-v3.html」の内容の一部をコピーして「ol018-nippon_bmi_takata_pgis.html」に貼り付け、修正します。

---

<title>WMS Example Rikuzen Takata PGIS2</title>
<!-- 追加 -->
<script src="http://maps.google.com/maps/api/js?v=3&sensor=false"></script>
<script src="OpenLayers-2.13.1/lib/OpenLayers.js"></script>

---

<!-- 追加 -->
<style type="text/css">
 .olControlAttribution { 
  bottom: 0px;
  left: 2px;
  right: inherit;
  width: 400px;
 }
 /* conditionally position control differently for Google Maps */
 .olForeignContainer div.olControlMousePosition {
  bottom: 28px;
 }
</style>

---

<script type="text/javascript">
 OpenLayers.ProxyHost = "/cgi-bin/proxy.cgi?url=";
 Ext.BLANK_IMAGE_URL = "ext-3.4.1/resources/images/default/s.gif";
 var app, items = [], controls = [];

// ここから追加
 var epsg2452 = new OpenLayers.Projection("EPSG:2452");
 var epsg900913 = new OpenLayers.Projection("EPSG:900913");
 var bounds =  new OpenLayers.Bounds(55900,-118000,77500,-98100);
 var epsg900913bounds = bounds.transform(epsg2452, epsg900913);
// ここまで

 Ext.onReady(function() {
  app = new Ext.Viewport({
   layout: "border",
   items: items
  });
 });

 items.push({
  xtype: "gx_mappanel",
  ref: "mapPanel",
  region: "center",
  map: {
   controls: controls,
//   projection: new OpenLayers.Projection("EPSG:2452"),
   projection: epsg900913,
   displayProjection: new OpenLayers.Projection("EPSG:4326"),
//   maxResolution: 'auto',
   maxResolution: 156543.0339,
   units: 'meters',
//   maxExtent: new OpenLayers.Bounds(55900,-118000,77500,-98100)
   maxExtent: epsg900913bounds,
   restrictedExtent: epsg900913bounds.clone()
  },

/*
  extent: OpenLayers.Bounds.fromArray([
    -122.911, 42.291,
    -122.787,42.398
  ]),
*/

  extent: epsg900913bounds,
 /*
  layers: [new OpenLayers.Layer.WMS(
   "Medford",
   "/geoserver/wms",
   {layers: "medford"},
   {isBaseLayer: false}
  )]
*/

  layers: [
// ここから追加
   new OpenLayers.Layer.Google(
    "Google Physical",
    {
     type: google.maps.MapTypeId.TERRAIN,
     sphericalMercator: true
    },{
     isBaselayer: false
   }),

   new OpenLayers.Layer.Google(
    "Google Streets", // the default
    {
//   numZoomLevels: 20
     sphericalMercator: true
    },{
     isBaselayer: false
   }),

   new OpenLayers.Layer.Google(
    "Google Hybrid",
    {
     type: google.maps.MapTypeId.HYBRID, //numZoomLevels: 20
     sphericalMercator: true
    },{
     isBaselayer: false
   }),

   new OpenLayers.Layer.Google(
    "Google Satellite",
    {
     type: google.maps.MapTypeId.SATELLITE, //numZoomLevels: 22
     sphericalMercator: true
    },{
     isBaselayer: false
   }),
// ここまで

/*
   new OpenLayers.Layer.WMS( "R.Takata Height WMS",
    "http://192.168.1.200:8080/geoserver/wms",
    {
     layers: 'npn:rikuzentakata5m-epsg2452'
    },{
     isBaselayer: true
   }),
*/

   new OpenLayers.Layer.WMS( "Iwate Kuiki WMS",
    "http://192.168.1.200:8080/geoserver/wms",
    {
    layers: 'npn:iwate_kuiki',
    transparent: true,
    format: 'image/png'
    },{
     isBaselayer: false
   }),

---

iwate_kuiki レイヤのタイル表示がおかしいので、マップの表示範囲を修正します。
---

// var bounds =  new OpenLayers.Bounds(55900,-118000,77500,-98100);
   var bounds =  new OpenLayers.Bounds(50000,-118000,77500,-98100);
--- 

API キーがないと拡大表示に制限があるようです。