(かなり)遅ればせながら google maps api を実際に使ってみた

2019年1月26日

(かなり)遅ればせながら google maps api を実際に使ってみた

ふぅん、こうやんねや。

●手順

http://www.google.co.jp/apis/maps/signup.htmlからGoogle Maps API Keyを取得する。利用条件に同意し、サイトのURLを入力すればAPI Key生成される。Keyの取得にはGoogleアカウント(無料)が必要。

設置の前に
・正しいXHTML文書への埋め込みが推奨されている
・エンコードはUTF-8
・現状はインラインフレームとして表示させるのが安全

実際に自分の環境で動かした例
http://inc.kimihiko.jp/maps/test.html


ソース

<!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">
<head>
<meta http-equiv="content-type" content="text⁄html; charset=utf-8"⁄>
<title>Google Maps JavaScript API Example<⁄title>
<script src="http:⁄⁄maps.google.com⁄maps?file=api&v=2&key=★あなたのkey★"
type="text⁄javascript"><⁄script>
<script type="text⁄javascript">
⁄⁄<![CDATA[
function load() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map"));
map.setCenter(new GLatLng(37.4419, -122.1419), 13);
}
}
⁄⁄]]>
<⁄script>
<⁄head>
<body onload="load()" onunload="GUnload()">
<div id="map" style="width: 500px; height: 300px"><⁄div>
<⁄body>
<⁄html>

詳細設定はこちらが参考になります。
http://www.cybergarden.net/blog/2005/11/google_maps_api.html

●参考にしたリンク

Google mapsを使ったホームページを作りたい
http://q.hatena.ne.jp/1132378853

Google Maps API解説 | Web::Blogoscope
http://www.cybergarden.net/blog/2005/11/google_maps_api.html