ホームページ : Googleマップを利用しよう①
Googleマップ、本当に便利ですよね。
無料で、こんなサービスを提供するなんて、
Google、偉い！！
Googleマップをホームページで利用するには、
Google Maps APIで、API Keyを取得する必要があります。
(Googleのアカウントをお持ちでない方は、先に、こちらで登録しましょう)
入力は、簡単です。
画面の下にある、チェックボックスにチェックをして、
ホームページのＵＲＬを入力するだけです。
Generate API Keyボタンを押すと、API Keyと、API Keyが含まれたサンプルコードが表示されます。このサンプルコードを、テキストにコピー&ペーストして下さい。
API Keyは、以下の部分になります。
初期設定では、
ページタイトルは「Google Maps JavaScript API Example」に、
中心は、「緯度37.4419、経度-122.1419」、
ズーム率は、「13(0～19の間で設定)」、
サイズは、「横500px、縦300px」になっています。
タイトルは、
変更後、テキストを保存し、サーバへアップロードすれば、ＯＫです。
うーーーん、簡単♪
例えば、
タイトルを「突撃！ことば塾。サンプル１」、サイズを横600px、縦400px、
ズーム率を17、京都市役所を中央にする場合、以下のようになります。
(右クリックをするとメニューが表示されますので、[ソースの表示]を
選択してください。ソースが表示されます。)
続く
無料で、こんなサービスを提供するなんて、
Google、偉い！！
Googleマップをホームページで利用するには、
Google Maps APIで、API Keyを取得する必要があります。
(Googleのアカウントをお持ちでない方は、先に、こちらで登録しましょう)
入力は、簡単です。
画面の下にある、チェックボックスにチェックをして、
ホームページのＵＲＬを入力するだけです。
Generate API Keyボタンを押すと、API Keyと、API Keyが含まれたサンプルコードが表示されます。このサンプルコードを、テキストにコピー&ペーストして下さい。API Keyは、以下の部分になります。
<script src="http://maps.google.com/maps?file=api&v=2&key=API Key" type="text/javascript"></script>
初期設定では、
ページタイトルは「Google Maps JavaScript API Example」に、
中心は、「緯度37.4419、経度-122.1419」、
ズーム率は、「13(0～19の間で設定)」、
サイズは、「横500px、縦300px」になっています。
タイトルは、
<title>Google Maps JavaScript API Example</title>
中心、およびズーム率は、
map.setCenter(new GLatLng(37.4419, -122.1419), 13);
サイズは、
<div id="map" style="width: 500px; height: 300px"></div>
で指定してありますので、表示したい内容に合わせて値を変えてください。変更後、テキストを保存し、サーバへアップロードすれば、ＯＫです。
うーーーん、簡単♪
例えば、
タイトルを「突撃！ことば塾。サンプル１」、サイズを横600px、縦400px、
ズーム率を17、京都市役所を中央にする場合、以下のようになります。
(右クリックをするとメニューが表示されますので、[ソースの表示]を
選択してください。ソースが表示されます。)
続く