Google Maps API バージョン3（V3）設置法と Google Maps API Styled Map Wizard でスタイリッシュなGoogle Map構築メモ！

公開日： 2013/11/28 : 最終更新日：2013/11/29 GoogleMap

Google Maps API バージョン 3（V3）設定

Google Maps JavaScript API V3 はAPI キーがなくても正常に機能しますが、APIコンソールキーを使うとアプリケーションのMapsAPIの使用状況をチェック出来るようになるようです。

APIキー取得から設定の方法

（スタートガイドから一部抜粋しています。）

1）API キーの取得

日本語版 Google Maps API Styled Map Wizard

Google Play Developer Console

API コンソールにアクセス ↑↑↑
左のメニューから [Services] をクリック。
GoogleMapsAPIv3サービスをオン。
左のメニューから [API Access] をクリック。API キーは、[API Access] ページの [Simple API Access] セクションにある。MapsAPIアプリケーションでは [Keyforbrowserapps] を使用。

2）HTML5 として宣言する

html5で記述するとなっていますがhtml4でも機能するようです！？

<!doctype html>

3）Google Maps API を読み込む

<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=【YOUR_API_KEY】&sensor=SET_TO_TRUE_OR_FALSE"></script>

【YOUR_API_KEY】は上記で取得したキーと置き換え

4）HTTPS

HTTPS 接続で Google Maps JavaScript API を読み込むことも可能！

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=【YOUR_API_KEY】&sensor=SET_TO_TRUE_OR_FALSE"></script>

5）API の非同期読み込み

function initialize() {
var mapOptions = {
zoom: 8,
center: new google.maps.LatLng(-34.397, 150.644),
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
}

function loadScript() {
var script = document.createElement("script");
script.type = "text/javascript";
script.src = "http://maps.googleapis.com/maps/api/js?key=【YOUR_API_KEY】&sensor=TRUE_OR_FALSE&callback=initialize";
document.body.appendChild(script);
}

window.onload = loadScript;

6）地図の DOM 要素

地図をウェブページに表示するための領域を用意。ここではmap_canvasと言うIDを設定。

<div id="map_canvas"></div>

7）地図のオプション

var mapOptions = {
center: new google.maps.LatLng(-34.397, 150.644),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
};

地図を初期化するために地図の初期化変数

var mapOptions = {};

8）緯度と経度

位置の座標を {緯度, 経度} の順序で渡す

center = new google.maps.LatLng(-34.397, 150.644)

Geocoding – 住所から緯度経度を検索

9）ズームレベル

地図を表示するための最初の解像度は、zoom プロパティで設定

zoom: 8

10）マップタイプ

初期マップタイプも明示的に設定

mapTypeId: google.maps.MapTypeId.ROADMAP

ROADMAPはGoogleマップの通常のデフォルトである2Dタイル表示
SATELLITEは写真タイルを表示
HYBRIDは写真タイルと主要な対象物（道路、地名）のタイルレイヤを組み合せ表示
TERRAINは物理的な起伏を示すタイルで高度や水系の対象物（山、河川）など

11）地図オブジェクト

var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);

12）地図を読み込む

HTMLをレンダリングすると同時にドキュメントオブジェクトモデル（DOM）を作成。外部の画像とスクリプトをすべて取得してdocumentオブジェクトに組み込む。

APIキーを取得しないで設置する方法

APIキーを取得しなくともGoogleMapv3を設置する事が出来ます。

ヘッダーでジャバスクリプト読み込み

<script type="text/javascript" src="http://www.google.com/jsapi/"></script>

ジャバスクリプト生成（ヘッダーへ）

google.load("maps", "3.x", {"other_params":"sensor=false"});

function initialize() {
var myLatLng = new google.maps.LatLng(【緯度】, 【経度】); //マップの中心座標【緯度】【経度】の順番

//マップの設定オプション
var myOptions = {
zoom: 14, //ズームレベル
center: myLatLng, //中心座標
mapTypeId: google.maps.MapTypeId.ROADMAP, //マップタイプ
mapTypeControlOptions: {
mapTypeIds: [google.maps.MapTypeId.ROADMAP, 'simple']
}
};

map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

//マーカー
new google.maps.Marker({
position: new google.maps.LatLng(【緯度】, 【経度】), //アイコンの中心座標【緯度】【経度】の順番
map: map,
});

var mapstyle =
//ここからJSON情報貼り付け位置
[ { "stylers": [ { "saturation": -30 } ] } ]
//JSON情報ここまで
;

var myOptions = {
name: "地図右上に表示される名称" //今回のスタイル名(地図右上に表示される名称)
};

var mapType = new google.maps.StyledMapType(mapstyle, myOptions);
map.mapTypes.set('simple', mapType);
map.setMapTypeId('simple');
}
google.setOnLoadCallback(initialize);