(かなり)遅ればせながら google maps api を実際に使ってみた
(かなり)遅ればせながら 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