Google Maps v3の利用 -(1)地図の表示-

何年か前に"Google Maps"のAPIを利用したWebアプリケーションの案件があり、そこで活用できるサンプルを紹介したが、運用者がポリゴンを利用したエリア指定をしたいという要望があったのでその対応をすることにする。

前回までは"Google Maps"のバージョン2を利用していたが、今回から最新版のバージョン3を利用することにし、それに伴い記述方法が異なるので再度地図を表示するところから始める。

さて、バージョン2とバージョン3で異なる点は地図のデザインや機能もさることながら、導入するにあたりAPIキーが不要となった。
これは地図を用いたWebアプリケーションであれば開発環境と本環境であるサーバとでAPIキーを切り替える必要がなく、ドメインが変更になったり階層が異なる場所に移動しても不変で活用できるので便利になった。

地図を表示するまでであれば、下記URLよりサンプルコードを入手することができる。
->;Google Map JavaScript API V3 チュートリアル

このコードを流用してマップの中心を"大阪駅"にしたものが下記だ。


<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
function initialize() {
var latlng = new google.maps.LatLng(34.702306, 135.495824);
var myOptions = {
zoom: 8,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="width:100%; height:100%"></div>
</body>
</html>



これをブラウザで見ると次のようになる。

 地図を表示


また、下記の記事のように地図を表示するのと別に地図を操作するツール類や初期表示の指定などが必要だったが、これらは不要になった。

->Google Mapの利用 -(1)キーとサンプルの取得-
->Google Mapの利用 -(2)マップツールの設定-
->Google Mapの利用 -(3)初期表示の位置設定-

ブログ気持玉

クリックして気持ちを伝えよう!

ログインしてクリックすれば、自分のブログへのリンクが付きます。

→ログインへ

なるほど(納得、参考になった、ヘー)
驚いた
面白い
ナイス
ガッツ(がんばれ!)
かわいい

気持玉数 : 0

この記事へのコメント

この記事へのトラックバック