
普段はJavaScriptを用いて、GoogleMapの各種機能を持った地図を表示させていますが、他に携帯やその他JavaScriptをOffにしている環境に対して、画像として呼び出す方法があります。

Google Static Maps APIと呼ばれるもので、[こちらの公式ページ](http://code.google.com/intl/ja/apis/maps/documentation/staticmaps/)で詳しい説明がなされています。

よく使われる、特定地域を表示し特定の場所にターゲットを配置する方法は以下の通りです。

```html
<img src="http://maps.google.com/staticmap
?center=&#91;地図の中心座標　緯度&#93;,&#91;地図の中心座標　経度&#93;
&markers=&#91;マーカー　緯度&#93;,&#91;マーカー　経度&#93;,&#91;マーカー　色&#93;
&zoom=&#91;拡大値&#93;
&size=&#91;横幅&#93;x&#91;縦幅&#93;
&key=&#91;GoogleMap API Key&#93;" />
```

試しに名古屋駅の緯度・経度「35.170694,136.881637」を中心、マーカーを配置し、拡大値を16、300x300pxの画像を表示したい場合は、

```html
<img src="http://maps.google.com/staticmap
?center=35.170694,136.881637
&markers=35.170694,136.881637,red
&zoom=16&size=300x300
&key=&#91;GoogleMap API Key&#93;" />
```

のように記述することで、以下のように表示されます。

![](https://maps.google.com/staticmap?center=35.170694,136.881637&markers=35.170694,136.881637,red&zoom=16&size=300x300&key=ABQIAAAAA5qkCGkJOwdXk8tYusa7ZBRg6S1mwwG_hVilJduEoXtSoPPcqBQLk8iG7Gi6iNz0AnnFnSO8mX-Rkg)

GoogleMapを画像として呼び出す方法


一年以上前に公開されていたらしいのですが、今更ながらGoogleMap APIのV3の存在を知ったので試してみました。


## V3での主な変更点

V2からV3へとバージョンアップに伴い、以下のような変更・改善点があります。

<dl><dt>API Keyが不要になった</dt><dd>URL毎に発行していたAPI Keyが不要となりました。開発者側にとっては結構うれしいことです。</dd><dt>スマートフォンへの対応がなされた</dt><dd>携帯端末用に表示速度が改善され、またGPS機能との連動が可能となりました。</dd><dt>JavaScriptの記述方法が変更された</dt><dd>V2に比べてJavaScriptの記述方法に変更があったようです。</dd></dl>

## テストコード

まずHTML側に地図を表示させるdiv要素を配置します。

```html
<div id="gmap"></div>
```

地図を表示させる基本のコードは以下のとおりです。

```javascript
google.maps.event.addDomListener(window, 'load', function() {
	var mapdiv = document.getElementById('gmap');
	var initPosition = {
		zoom: 14,
		center: new google.maps.LatLng(35.17073004594335, 136.9),
		mapTypeId: google.maps.MapTypeId.ROADMAP,
		scaleControl: true,
	};
	var map = new google.maps.Map(mapdiv, initPosition);
});
```

マーカーを表示させるには以下のコードを追加します。

```javascript
var marker = new google.maps.Marker({
	position: new google.maps.LatLng(35.17073004594335, 136.8816876411438),
	map: map,
	title: '名古屋駅'
});
```

情報ウィンドウを表示するのはこちらのコードです。

```javascript
var infoWindow = new google.maps.InfoWindow({
	content: '名古屋駅'
});
infoWindow.open(map, marker);
```

また、V3より複数の情報ウィンドウを表示させることが可能になり、こちらの[デモページ](http://demo.sus-happy.net/javascript/gmap3/)の様な表現も出来るようになりました。

デモページで使っているJavaScriptのコードは以下のとおりです。

```javascript
google.maps.event.addDomListener(window, 'load', function() {
    var mapdiv = document.getElementById('gmap');
    var initPosition = {
        zoom: 14,
        center: new google.maps.LatLng(35.17073004594335, 136.9),
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        scaleControl: true,
    };
    var map = new google.maps.Map(mapdiv, initPosition);

    var marker = new Array();
    var infoWindow = new Array();

    marker.push( new google.maps.Marker({
        position: new google.maps.LatLng(35.17073004594335, 136.8816876411438),
        map: map,
        title: '名古屋駅'
    }) );
    infoWindow.push( new google.maps.InfoWindow({
        content: '名古屋駅'
    }) );

    marker.push( new google.maps.Marker({
        position: new google.maps.LatLng(35.170798014746985, 136.92037045955658),
        map: map,
        title: '新栄町'
    }) );
    infoWindow.push( new google.maps.InfoWindow({
        content: '新栄町'
    }) );

    for(var i=0; i<marker.length; i++) {
        infoWindow[i].open(map, marker[i]);
    }
});
```

GoogleMap

GoogleMapを画像として呼び出す方法

Google Map API V3を試してみた