JavaScript
GoogleMapsAPI

Google Maps JavaScript API v3 の使い方

More than 3 years have passed since last update.

最近 JS で Google Maps API をいじることにしたのでいろいろ調べていました.すると,Console の画面が変わっていたりキーの取得方法が変わったりでちょっとややこしかったので,最新版の使い方をまとめました.2014/09/10 時点での情報です.


環境


  • Google Chrome for Mac Version 37.0.2062.94(本記事で載せているものはすべてこのバージョンの Chrome でのみ動作を確認しています.他ブラウザで実行できない場合はご了承ください〜.)


使い方


Developers Console でプロジェクトを作成

※Google のアカウントが必要なのであらかじめ取得しておいてください.

まず,Google Developers Console へアクセスして作成するアプリケーション用のプロジェクトを 1 つ作成します.

Create Project をクリックして…

Screen Shot 2014-09-10 at 3.51.06.png

好きな PROJECT NAME を入力して,I have read and …のところのチェックボックスに✓を入れて Create をクリック.(もう一方のチェックボックスにもチェックをいれると Google さんからたくさん News Update とか Event に関するメールが来ることになります.それが嫌な人はチェックを入れないようにしましょう.)

Screen Shot 2014-09-10 at 3.51.20.png

Project が Create されると作成したプロジェクトの Project Dashboard に飛びます.

現状では Google Maps API は使えないので,Dashboard を使って Google Maps JavaScript API v3 を使えるようにしましょう.まず,Enable an API をクリック.

Screen Shot 2014-09-10 at 3.56.54.png

そうすると,Google が提供している API の一覧がずらーっとでてきます.

その中から Google Maps JavaScript API v3 を探して,STATUS を ON にします.

Screen Shot 2014-09-10 at 3.57.39.png


API キーの取得

プロジェクトを作って STATUS を ON にしたら,API キーを生成して取得します.

画面左側のメニューから Credentials をクリックして,Create new Key をクリック.

Screen Shot 2014-09-10 at 4.03.53.png

生成するキーの種類を聞いてくるので,Browser key をクリック.

Screen Shot 2014-09-10 at 4.06.19.png

利用を許可するドメインを書いて Create を押します.

Screen Shot 2014-09-10 at 4.10.25.png

すると,Key for browser applications が表示されます.API KEY の行に書いてある文字列が API キーなので,コピーしておきましょう.

Screen_Shot_2014-09-10_at_4_12_09.png


ちゃんと API を叩けるか確認

生成した API キーを使ってちゃんと地図が表示されるかどうか確認してみます.

自分の API キーを入れる,sensor を TRUE / FALSE のどちらかにする(お好きな方を選んでください),API キーを生成するときに指定したドメインで動くようにする.以上の 3 つに気をつけてください.

以下の通りのソースをブラウザで表示してみます.


gmapsample.html

<!DOCTYPE html>

<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map_canvas { height: 100% }
</style>
<script type="text/javascript"
src="http://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&sensor=TRUE_OR_FALSE">
</script>
<script type="text/javascript">
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(-34.397, 150.644),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"),
mapOptions);
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="width:100%; height:100%"></div>
</body>
</html>

シドニー付近の地図が表示されれば OK です!

実際に動作している様子はこちらからどうぞ.

Screen Shot 2014-09-10 at 4.30.47.png


追記


利用を許可したドメインでなく,localhost で地図を確認する方法

先ほどの gmapsample.html 内の http://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&sensor=TRUE_OR_FALSEhttp://maps.googleapis.com/maps/api/js?sensor=TRUE_OR_FALSE に変更すると localhost でも地図表示が可能です.


参考

スタートガイド - Google Maps JavaScript API v3 - Google Developers

https://developers.google.com/maps/documentation/javascript/tutorial?hl=ja

javascript - Google Maps v3 api for localhost not working

http://stackoverflow.com/questions/19784661/google-maps-v3-api-for-localhost-not-working