■APIデビューと共に皆とやり方を共有!
- Google Maps APIのサイトに行く
- 自分のサイトのURLを入力しAPIキーをゲット!
- Googleのアカウントを持ってなかったら作ってね。
- APIキーとサンプルHTMLが表示される。
- とりあえずコピー&ペーストしてHTMLを作ってアップしてみる。
- キーはチャント保存してね。
■下記がサンプル
どうでしょう?基本的なブラウザだったら表示できてるはず!
■サンプルソースコード
<script src="http://maps.google.com/maps?file=api&v=2&key=((your key!))" type="text/javascript"></script> <script type="text/javascript"> //<![CDATA[ function load(){ if(GBrowserIsCompatible()){ var map = new GMap2(document.getElementById("map20070719")); map.setCenter(new GLatLng(35.633477,139.765449),14); map.addControl(new GLargeMapControl()); map.addControl(new GMapTypeControl()); } } load(); //]]> </script>
■簡単な解説
- if(GBrowserIsCompatible())でGoogleMapが使えるブラウザの絞ってます
- elseを使えば使えない人用の表示をする事も出来るらしい
- map.setCenter(new GLatLng(35.633477,139.765449),14)で初期表示の座標を設定
- map.addControl(new GLargeMapControl())で左側のマップコントロールを表示
- map.addControl(new GMapTypeControl())で右上の地図のタイプコントロールを表示
■補足
- 便宜、仕様上ソースを多少変更しております
- 上記ソースは全要素が読み込まれた後(</body>と</html>)の間に貼り付けてみて下さい。
- head内に記述する場合はbodyにonload=”load();”と記述し、スクリプト内のload();は消してください。
- 上記ソースに関数GUnloadをonunloadで実行するようにしてください
ピンバック: Just One Planet