GoogleMapsAPI V3でマップとストリートビューをカスタマイズしてウェブサイトに表示させる最適なやり方
マップ や ストリートビュー を利用した事がないという人を捜す事の方が困難になってしまった感があります。わからなくとも使っているんじゃないでしょうか?
この技術を自由自在に カスタマイズ できるようになれば webサービス 作成の幅が広がりますので GoogleMapsAPI V3 を全くわからなくとも、この記事でみなさんが簡単な カスタマイズ をしつつ ウェブサイト に表示出来るようにしたいと思います。
Google Maps API V3とは?
パソコンと携帯端末の両方で使える地図アプリケーションのためのソリューション
注: Google Maps JavaScript API バージョン 3（V3）は、正式な JavaScript API となりました。JavaScript API バージョン 2 は、Google の廃止ポリシーにより正式に廃止されました。アップデート、拡張された新しいバージョンに、コードを移行することをおすすめします。
Google Maps JavaScript API を使用すると、Google マップをウェブページに埋め込むことができます。この API のバージョン 3 は、従来のパソコン用ブラウザ アプリケーションとしてだけでなく、携帯端末でも快適に動作するように設計されています。
この API では http://maps.google.co.jp サイトで使用できるような地図を操作し、さまざまなサービスを介してコンテンツを地図に追加するための多数のユーティリティを提供しています。これを利用して、ウェブサイトにパワフルな地図アプリケーションを作成できます。
JavaScript Maps API V3 は、誰でも自由にアクセスできるウェブサイトであれば、無料で利用できるサービスです。詳細については、利用規約をご覧ください。
パソコンと携帯端末の両方で使える地図アプリケーションのためのソリューション - Google Maps JavaScript API v3 — Google Developers
要はむちゃくちゃ便利な機能だから、がんがん使えって事ですね。
Google Maps API V3を読み込もう
で、どうやってその便利な機能は使えるの?って事が一番重要なんですが
これをHTMLファイルに記述するだけでいいんです。
<!-- Google Maps API V3の読み込み --> |
これだけです。
この絶対パスを読み込むだけで全てが動くようになっており、難しい事はgoogleさんに任せておいてこっちがやる事は設定だけです。ただ一つだけ、この記述内でやる事がありパラメーターのsensorを記述して GPS機能 を使うかどうかの指定をします。
| ?sensor=trueが | GPS機能 オン |
|---|---|
| ?sensor=falseが | GPS機能 オフ |
現状、PCは GPS機能 そのものがないのでオフでいいとは思いますが、GPS機能 をオンにしていても良いんじゃないでしょうか?将来的に。ただ、これをオンにすると、どの程度負担がかかっているかは調べていません。
なお、sensorを送らないとgoogleさんにおこられますので必ず記述しましょう。
マップとストリートビューを表示してみよう
では、次にマップとストリートビューを表示させてみましょう。
細かい設定がかなりあるのですが、先ずは表示させたい!って方が多いかと思いますので最小限の記述で表示させましょう。
<!DOCTYPE html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" /> <title>Google Maps JavaScript API V3:サンプルページ</title> <!-- Google Maps APIの読み込み --> <script type="text/javascript"> |
// 変数群var map,svp;//--------------------------------------------//初期設定(ページを読み込んだ時に実行する関数)//--------------------------------------------function initialize() { // 緯度・経度変数 var latlng = new google.maps.LatLng(35.674144,139.77675999999997); // 地図のオプション設定変数 var myOptions = { // カメラの向き heading: -20, // 初期のズーム レベル zoom: 16, // 地図の中心点 center:latlng, // 地図タイプ mapTypeId: google.maps.MapTypeId.ROADMAP }; //地図オブジェクト生成 map = new google.maps.Map(document.getElementById('map'), myOptions); // ストリートビューオブジェクト生成 svp = new google.maps.StreetViewPanorama( document.getElementById('svp'),{ position : map.getCenter() }); // ストリートビューオブジェクト詳細設定 svp.setPov({heading: -20, pitch: 0, zoom: 0}); // マップとストリートビューを一致させる為の記述 map.setStreetView(svp);} // function initialize()// ページを読み込んだ時にinitialize()を実行google.maps.event.addDomListener(window, 'load', initialize); |
</script><style type="text/css"> |
@charset "utf-8";/*****************全体コンテンツ設定*****************/#wrapper { width: 780px; margin: 0 auto 50px;}/*******************************ストリートビュー設定＆マップ設定*******************************/#svp_area { width:780px; height:400px; margin: 0 auto; padding: 5px 0px 10px 0px; border-radius: 2px;}#svp { width:780px; height:400px; margin: 0 auto;}#map { width:460px; height:300px; margin: 0 auto;}#text_area { margin: 0 10px 0 0; float: left; width: 310px;} |
</style> </head> <body> <!-- wrapper --> <div id="wrapper"> <h1>Google Maps JavaScript API V3:サンプルページ</h1> <!-- ストリートビュー表示 --> <div id="svp_area"> <div id="svp"></div> </div> <!-- ストリートビュー表示 --> <!-- text_area --> <div id="text_area"> <h3>八丁堀駅</h3> <p>八丁堀駅（はっちょうぼりえき）は、東京都中央区八丁堀にある、東京地下鉄（東京メトロ）・東日本旅客鉄道（JR東日本）の駅である。</p> </div> <!-- text_area --> <!-- マップ表示 --> <div id="map"></div> </div> <!-- wrapper --> </body></html> |
なお、全コピペでも動く記述なので是非活用して下さい。
では、次は カスタマイズ していきましょう。
カスタマイズしよう
今回は僕にゆかりのある東京の駅をピックアップし、並べてスライド出来るようにして、その駅をクリックするとストリートビューとマップと説明テキストが変わり、ストリートビューは自動でくるくる廻る仕様にしました。最後にコードボックスとして無料配布致します。
先ずはカスタマイズ後のHTMLファイルを見て下さい。
<!DOCTYPE html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" /> <title>360°好きな駅ツアー</title> <!-- CSS --> <link rel="stylesheet" type="text/css" href="css/common/common.css" media="all"> <!-- Google Maps APIの読み込み --> <!-- jquery-1.7.1 --> <script type="text/javascript" src="js/jquery/jquery-1.7.1.js"></script> <!-- マップとストリートビューを表示させるjavascriptファイル --> <script type="text/javascript" src="js/common/common.js"></script> </head> <body> <!-- wrapper --> <div id="wrapper"> <h1>Google Maps JavaScript API V3:サンプルページ</h1> <!-- ストリートビュー表示 --> <div id="svp_area"> <div id="svp"></div> </div> <!-- ストリートビュー表示 --> <!-- text_area --> <div id="text_area"> <h3>八丁堀駅</h3> <p>八丁堀駅（はっちょうぼりえき）は、東京都中央区八丁堀にある、東京地下鉄（東京メトロ）・東日本旅客鉄道（JR東日本）の駅である。</p> </div> <!-- text_area --> <!-- マップ表示 --> <div id="map"></div> </div> <!-- wrapper --> </body></html> |
JavaScriptやCSSを外部読み込みにしてスッキリしましたね。
では記述したJavaScriptはこちら。
// 変数群var map,svp;//--------//初期設定//--------function initialize() { // 緯度・経度変数 var latlng = new google.maps.LatLng(35.674144,139.77675999999997); // 地図のオプション設定変数 var myOptions = { // カメラの向き heading: -20, // 初期のズーム レベル zoom: 16, // 地図の中心点 center:latlng, // 地図タイプ mapTypeId: google.maps.MapTypeId.ROADMAP }; //地図オブジェクト生成 map = new google.maps.Map(document.getElementById('map'), myOptions); // ストリートビューオブジェクト生成 svp = new google.maps.StreetViewPanorama( document.getElementById('svp'),{ position : map.getCenter() }); // ストリートビューオブジェクト詳細設定 svp.setPov({heading: -20, pitch: 0, zoom: 0}); // マップとストリートビューの一致させる為の記述 map.setStreetView(svp); // 緯度・経度確認 google.maps.event.addListener(svp, 'tilesloaded', review); google.maps.event.addListener(svp, 'position_changed', review);} // initialize() {/*********** 固定設定終了 ***********/ // 回転関数 function rotate() { // カメラの位置取得 var pov = svp.getPov(); var _heading = pov['heading']; var _pitch = pov['pitch']; var _zoom = pov['zoom']; // 位置をずらす _heading = _heading + 0.1; // 位置情報をセット(一番大事) svp.setPov( { heading:_heading, pitch:_pitch, zoom:_zoom }); } // レビュー関数 function review() { if(document.getElementById("res")) { document.getElementById("res").innerHTML = svp.getPosition(); } } //------------------------------ //ロード時に初期化(スタートです) //------------------------------ google.maps.event.addDomListener(window, 'load', initialize); //-------------------- //マウスやアクション系 //-------------------- $(function() { // 変数宣言 var flag = 0; var latlng_array; var svp_area = document.getElementById('svp_area'); // 回転くるくる timerID = setInterval('rotate()',20); //------------------------------ //svp_areaにマウスオーバーしたら //------------------------------ $('#svp_area').mouseover(function() { // くるくる解除 clearInterval(timerID); }); //---------------------------- //svp_areaにマウスアウトしたら //---------------------------- $('#svp_area').mouseout(function() { // くるくる再スタート timerID = setInterval('rotate()',20); }); //----------------- // 左の矢印クリック //----------------- $('.y_l_btn').click(function() { var left_px = ($('.slide_show_contents ul').css('left')); left_px = left_px.replace('px',''); left_px = parseInt(left_px); var image = $('.slide_show_contents ul li img'); var image_width = image[0].width; if(flag == 0) { var first_li = $('.slide_show_contents ul li').eq(7); $('.slide_show_contents ul').prepend(first_li); $('.slide_show_contents ul').css({'left': -(image_width + 10) + 'px'}); $('.slide_show_contents ul').animate({left: 0 + 'px'} ,500,'swing',function() { flag = 0; }); flag = 1; } else { } }); // $('.y_l_btn').click(function() { //----------------- // 右の矢印クリック //----------------- $('.y_r_btn').click(function() { var left_px = ($('.slide_show_contents ul').css('left')); left_px = left_px.replace('px',''); left_px = parseInt(left_px); if(isNaN(left_px)) { left_px = 0;} var image = $('.slide_show_contents ul li img'); var image_width = image[0].width; if(flag == 0) { $('.slide_show_contents ul').animate({left: left_px + -(image_width + 10) + 'px'} ,500,'swing',function() { var first_li = $('.slide_show_contents ul li').eq(0); $('.slide_show_contents ul').append(first_li); $('.slide_show_contents ul').css({'left': left_px + 'px'}); flag = 0; }); flag = 1; } else { } }); // $('.y_l_btn').click(function() { //-------------- //データセット系 //-------------- var id = 0; var latlng_i_array = $([ 35.674144, 35.691918, 35.659298, 35.698162, 35.731098, 35.671594, 35.703601, 35.588408]); var latlng_k_array = $ ([ 139.77675999999997, 139.701012, 139.70043899999996, 139.772443, 139.710069, 139.703004, 139.57984999999996, 139.727355]);//35.674144, 139.77675999999997 八丁堀駅//35.691918, 139.701012 新宿駅//35.659298, 139.70043899999996 渋谷駅//35.698162,139.772443 秋葉原駅//35.731098,139.710069 池袋駅//35.671594,139.703004 原宿駅//35.703601, 139.57984999999996 吉祥寺駅//35.588408,139.727355 大森駅 var text_area_array = $(['<h3>八丁堀駅</h3><p>八丁堀駅（はっちょうぼりえき）は、東京都中央区八丁堀にある、東京地下鉄（東京メトロ）・東日本旅客鉄道（JR東日本）の駅である。</p>','<h3>新宿駅</h3><p>新宿駅（しんじゅくえき）は、東京都新宿区・渋谷区にある、東日本旅客鉄道（JR東日本）・京王電鉄・小田急電鉄・東京地下鉄（東京メトロ）・東京都交通局（都営地下鉄）の駅である。</p>','<h3>渋谷駅</h3><p>渋谷駅（しぶやえき）は、東京都渋谷区にある、東日本旅客鉄道（JR東日本）・東京急行電鉄（東急）・東京地下鉄（東京メトロ）・京王電鉄の駅である。</p>','<h3>秋葉原駅</h3><p>秋葉原駅（あきはばらえき）は、東京都千代田区にある、東日本旅客鉄道（JR東日本）・東京地下鉄（東京メトロ）・首都圏新都市鉄道の駅である。</p>','<h3>池袋駅</h3><p>池袋駅（いけぶくろえき）は、東京都豊島区にある、東日本旅客鉄道（JR東日本）・東武鉄道（東武）・西武鉄道（西武）・東京地下鉄（東京メトロ）の駅である。</p>','<h3>原宿駅</h3><p>原宿駅（はらじゅくえき）は、東京都渋谷区神宮前一丁目にある、東日本旅客鉄道（JR東日本）山手線の鉄道駅である。</p>','<h3>吉祥寺駅</h3>','<h3>大森駅</h3><p>大森駅 (東京都) - 東京都大田区にある東日本旅客鉄道（JR東日本）京浜東北線（東海道本線）の駅。</p>']); $('.slide_show_contents ul li').each(function() { $(this).data('id',id); id += 1; }); //------------ //画面きりかえ //------------ $('.slide_show_contents ul li').click(function() { var id = $(this).data('id'); svp.setPosition(new google.maps.LatLng(latlng_i_array[id], latlng_k_array[id])); map.panTo(new google.maps.LatLng(latlng_i_array[id], latlng_k_array[id])); $('#text_area').html(text_area_array[id]); }); }); // $(function() { |
/*********** 固定設定終了 ***********/
というところまでが基本設定でその下がカスタマイズする記述です。
そして、一番大事なのは
//------------------------------//ロード時に初期化(スタートです)//------------------------------google.maps.event.addDomListener(window, 'load', initialize); |
この記述の上にカスタマイズする関数を書かないとエラーになります。
何故エラーになるかといいますと全てを読み込む前の記述しか読んでなくそんな関数ねーよっておこられてしまいます。なお、関数以外のカスタマイズの記述(要はGoogle MapsのAPIを操作する記述)はfunction initialize() { ここの中に記述しないとエラーになります }
という事でちゃんとカスタマイズ出来るようにGoogle Maps API V3の仕様を勉強しましょう。今回、全部書くと記事が長くなってしまうので省略させて頂きます。その代わりに新鮮で良い記事をピックアップしましたので、そちらからAPIの事やカスタマイズを覚えて下さい。
Google Maps API V3関連リンクリスト
Google Developers
スタート ガイド - Google Maps JavaScript API v3 — Google Developers
PHP & JavaScript Roomさん
Google Maps JavaScript API v3｜Google Maps JavaScript API v3｜Ajax｜PHP & JavaScript Room
ストリートビュー｜Google Maps JavaScript API v3｜Ajax｜PHP & JavaScript Room
おやじプログラマー日記さん
おやじプログラマー日記: 「GoogleMap API V3」 の使い方その１
おやじプログラマー日記: 「GoogleMap API V3」 の使い方その２
おやじプログラマー日記: 「GoogleMap API V3」 の使い方その３（マーカーの表示）
おやじプログラマー日記: 「GoogleMap API V3」 の使い方その４（イベント）
おやじプログラマー日記: 「GoogleMap API V3」 の使い方その５（続イベント）
おやじプログラマー日記: 「GoogleMap API V3」 の使い方その６（続々イベント）
おやじプログラマー日記: 「GoogleMap API V3」 の使い方その７（ポリライン・ポリゴン）
おやじプログラマー日記: 「GoogleMap API V3」 の使い方その８（ジオコーディング）
おやじプログラマー日記: 「GoogleMap API V3」 の使い方その９（ルート検索）
おやじプログラマー日記: 「GoogleMap API V3」 の使い方その10（ルート検索2）
おやじプログラマー日記: 「GoogleMap API V3」 の使い方その11（さらにInfowindow）
コードボックス
今回、作成したサンプルページをCODE BOXにしましたので
ご自由にダウンロードして下さい。
まとめ
今回は小さな案件を受けて内容がストリートビューとマップを同時に表示して動きを同期して欲しいという要望で、APIの事は知っていたのですが触れた事はなくアウトプットという意味で記事を書かせて頂きました。
本当に便利なAPIですのでアクセスが少ないサイトなら使ってもいいんじゃないかなって思っています。webサービスに使うには利用料金が加算される恐れがありますので違うサービスを使用するか独自に作成するしかないのかもしれません。
一日の使用条件は25,000アクセスまでです。この件数を超えると課金対象になるらしいのですが、現状そこまで厳しくはないようです。詳細はこちらを参照して下さい。よくある質問 - Google Maps API — Google Developers
カスタマイズでどこまでも出来てしまう素晴らしいAPIですので
みなさんも一度は試す事をお勧め致します。
