「新しいキーを作成」ボタンをクリック。どのリファラーからのアクセスを許可するのか設定します。「https://lightning-bolt.xyz/」以下のページで利用したい場合なら「lightning-bolt.xyz/*」と設定します。改行で区切って複数サイトの指定も可能なようです(未確認)。入力後、APIキーが作成され、リファラ等が確認できるようになります。「このAPIキー」はHTMLに記述が必要で、他人に知られても問題ない情報、いわゆる公開情報扱いとされます。座標を使った地図の表示デモ緯度と経度を用いて中心点を決め、表示させる方法です。サンプルデモはコチラから。サンプル1:座標を使った地図の表示https://lightning-bolt.xyz/googlemap/試しに「大阪ビジネスパーク円形ホール」を中心としたマップを表示させてみます。座標を取得するのには他のサービスを利用する必要があるのですが、後のほうで紹介するコチラのサンプルで座標を取得します。なんだか中学生の時に作った、「はんだゴテ」を使わないと作れない「はんだゴテ」を思い出しました。経度(Lng):135.52984049999998緯度(Lat):34.692543と、なりました。経度は英語で「Longitude」緯度は英語で「Latitude」と書き、経度とは地球儀を見て、イギリスのグリニッジ天文台跡を通る縦の線(子午線)を基準(0度)とし、東西にそれぞれ180度まで示すラインのことで、緯度とは赤道を0度とし、南北へそれぞれ90度まで示すラインのことです。日本標準子午線は東経135度の兵庫県の明石市になるというのは、小学生時分に習ったのではないでしょうか。jsそれはさておき、得た値を以下のように設定。***には先ほど取得したAPIキーを記述してください。initialize);</script>CSSキャンバス用のスタイルと、力業でセンターマークを表示させます。以降のセンターマークがあるサンプルにはこのCSSを使用しています。30px;}</style>マップの表示HTMLマップを表示させるには下記のタグを用いるだけです。このようになれば成功。地図を表示させるdivタグ地図を表示させるdiv要素にはid属性を用います。上記の場合、地図を表示しているのはスクリプトで設定されている、id属性が"map_canvas"のDIVとなります。地図のサイズ表示させる地図のサイズはスクリプトで設定するのではなく、div要素のサイズで設定します。設定方法はCSSにてwidth値とheight値で指定するだけです。(緯度・経度)LatLngクラスは座標位置を表すためのクラスです。経度);第1引数に緯度を、第2引数に経度を入力します。緯度:-90~90経度:-180~180の範囲で設定してください。サンプルでもありますが、緯度が34.692543、経度が135.52984049999998の場合の座標を作成する場合は、以下のようにすると作成できます。135.52984049999998);Mapクラス地図を作成するにはMapクラスを利用します。第2引数にはオプションとなるオブジェクトデータを指定。地図の表示オプション);サンプルでいうところのこの部分です。mapOptions);MapOtionsオブジェクト(一部)以下に地図作成時のオプション(の一部)を書き出します。「zoom」と「center」が必須で、それ以外は自由に組み合わせが可能。地図の中心座標の初期値。