Google Maps API でMapの出力1 --API利用の準備｜アジャスト接待ウェブログ　アジャピー

Google Maps API でMapの出力1 --API利用の準備

Google Maps API利用の準備
Google Maps API利用にはいくつかのルールを押さえておく必要があります。まず「Google Maps API利用の準備」としてGoogle Maps APIの実際のコーディングの前に、４つポイントを押さえておきます。

ページの文字コードはUTF-8形式を利用
Google Maps APIはUTF-8形式でデータを扱うため、Google Maps APIを利用するページでは、文字コードをUTF-8で作成し保存します。

IEでの表示の為にVML名前空間を指定
Google Maps APIでは地図上に複数の座標を繋ぎ合わせ線を引く（polylines）ことができます。IEでこれを表示する場合、htmlタグ内に属性として[xmlns:v="urn:schemas-microsoft-com:vml]と記述することよるVML名前空間の指定が必要です。

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml">

ページはXHTMLで記述
Google Mapを表示するページはXHTMLで記述することが推奨されています。XHTMLはHTML 4をベースにXMLに適合するように再定義された言語です。よってXHTMLの記述方法は下記の様ないくつかの異なる点を除けば、HTMLと同様な書式でOKです。
詳しくは「HTML 4 から XHTML へ」を参照下さい。

ページの先頭部分を下記の様に記述
XHTML Strictでは、Strict DTDと呼ばれる文書型定義を文書の先頭で宣言します。また、metaタグにて文字コードを指定します。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Google Maps API利用の準備</title>
</head>

タグの要素と属性は小文字のみで記述
属性の値は省略せず、必ずダブルクウォートで囲んで記述

<table border="0" cellpadding="1" cellspacing="1">
<frame noresize="noresize" />
終了タグを省略しない

<ul>
<li>項目</li>
</ul>
エンプティタグの末尾は[ />]と記述

<br />

name属性がある場合にはid属性を併記

<form name="FormName" id="FormName" />

Google Maps API Keyの取得
Google Maps APIでMapを表示するには、API Keyをソースコード中に埋め込む必要があります。API KeyはサイトごとにサイトのトップURLを指定して取得します。
取得手順は以下の通り。

Google Maps APIライセンス取得前に予めGoogle アカウントを取得しておく。

「Sign up for the Google Maps API」ページよりライセンスを取得する。
利用条件を確認し、以下の２点のみ入力でサブミット。

□I have read and agree with the terms and condition #チェックボックスにチェック
My web site URL:[http://www.adjustcom.com/] #利用するサイトのトップURLを指定
Generate API Key #ボタンをサブミット

「Thank you for signing up for a Google Maps API key!」ページにて出力された

Your key is:　ABQIAAAAg4JKyTvPrr_jssE1b7GdwhTVN3yJ3SQVWopsLG42Xrho1-3HchQ8xWD4bO_dpJeettrChtRaFKwMbA

の部分がAPI Keyです。上記API Keyはこのブログで表示する為に取得したときのものです。他のサイトでこのAPI Keyは利用できません。