2-5:吹き出しの中に衛星写真を表示する

「2-3:マーカーを押すと、吹き出しを表示してみる」では、マーカーをクリックしたら吹き出しが表示されました。

今回は、そのプログラムを元に吹き出しの中に衛星写真を表示してみましょう。



 

 

吹き出しの中に衛星写真が表示される
(表示する)

吹き出しの中に衛星写真を表示するサンプルプログラム


吹き出しの中に衛星写真を表示するサンプルプログラム

<!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>Google Maps JavaScript API Example</title>
<script src="http://maps.google.com/maps?file=api&v=2&key=[あなたのAPIキー]" 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.677335,139.744613), 16);

//マーカーを作成(国会議事堂)
var marker = new GMarker(new GLatLng(35.676148,139.74479));
//マーカーをクリックしたら、衛星写真が見える吹き出しを表示する
GEvent.addListener(marker, "click", function() {
  map.showMapBlowup(marker.getPoint(), {zoomLevel:17, mapType:G_SATELLITE_MAP});
});
//マーカーを地図上に配置 map.addOverlay(marker); } } //]]> </script> </head> <body onload="load()" onunload="GUnload()"> <div id="map" style="width: 500px; height: 500px"></div> </body> </html>

 

サンプルプログラムの解説


吹き出しの中に衛星写真を表示するコードは、上のサンプルプログラムの赤枠で囲んだ部分です。
showMapBlowup(point, opts(省略可))

   point周辺のクローズアップされた吹き出しを表示する
  point:  クローズアップ表示するポイント
       (サンプルではmarker.getPoint()で、マーカーのpointを利用している)

  opts: オプションが指定できる。       オプションは以下のようなものです。        pixelOffset: GSize()        selectedTab: integer        maxWidth: integer        onOpenFn: function        onCloseFn: function        mapType: GMapType()        zoomLevel: integer
サイト内検索
Maps APIの本を書きました
Google Maps APIプログラミング入門
全480ページ。Google Maps API ver.2, ver.3, for Flash, Static Maps API v2, Google Maps API Primery, ライセンス…など、Google Maps APIに関連する幅広い内容の本を書きました。
このサイトで公開しているサンプルはもちろん、本のために作ったサンプルも満載です。
詳しくはこちら

Google Maps Designer
Google Maps Designer