LUNARAVE WEBクリエイターの仕事と休息

アクセスカウンタ

Google Maps APIの利用戦国IXAWeb技術Youtubeチャンネル

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

<<   作成日時 : 2011/12/16 18:03   >>

ブログ気持玉 0 / トラックバック 0 / コメント 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件)

タイトル (本文) ブログ名/日時

トラックバック用URL help


自分のブログにトラックバック記事作成(会員用) help

タイトル
本 文

コメント(1件)

内 容 ニックネーム/日時
Today, I went to the beachfront with my children. I found a sea shell and gave it to
my 4 year old daughter and said "You can hear the ocean if you put this to your ear." She placed the shell to her ear and screamed.
There was a hermit crab inside and it pinched her ear.
She never wants to go back! LoL I know this is completely off topic but I had to tell someone!
Shannon
URL
2017/07/24 13:55

コメントする help

ニックネーム
URL(任意)
本 文
Google Maps v3の利用 -(1)地図の表示- LUNARAVE WEBクリエイターの仕事と休息/BIGLOBEウェブリブログ
文字サイズ:       閉じる