Google Maps API 利用の初歩

最も簡単な例

チュートリアルページ https://developers.google.com/maps/documentation/javascript/tutorial?hl=ja なども参照。

Google Maps APIはJavaScriptライブラリとして提供されるので、html文書にそれを取り込む。
- 取り込むには、keyを取得しておく必要がある。(下の例ではtoyokiのIDで取得したキーである。自分用のを取得してほしい。テストとしてはkey=xxxの部分がなくても表示できるが、将来その機能をなくすとアナウンスされていたような？）
下のコード例では、将来JavaScriptのフレームワークjQueryを使うことを想定して、それも読み込んでいる。

<!DOCTYPE HTML PUBLIC "-//w3c//dtd html 4.01 traditional//en">
<head>
    
    
    
    
    

    
</head>
<body>
    初めてのGoogle Maps API利用
    

    
</body>

マーカーを表示する

以下の例では、緯度経度等の情報をbusPositionという配列として埋め込んでいる。

これを用いてマーカーを表示するオブジェクトを生成する。

<!DOCTYPE HTML PUBLIC "-//w3c//dtd html 4.01 traditional//en">
<head>
    
    
    
    
    

    
</head>
<body>
    初めてのGoogle Maps API利用
    

    
</body>

上記のように、プログラムに緯度経度データを埋め込むのでは応用性が低い。動的に（たとえば、プルダウンメニューで選択した時に）データをサーバから取り込み表示するようにしたい。そのためには、

メニューの作り方 (htmlのform)
リクエスト（メニューでの選択項目）を受けてデータを送信するサーバ側のプログラム
サーバからのデータ受信完了とともに動作するように地図描画関数を書き換える仕組みの実装が必要である。

実用的なプログラム例

松浦くん用に紹介した以下のページの「csv形式データを読み込みGoogle Maps APを用いて描画する方法」あたりを参照してほしい。

http://toyoki-lab.ee.yamanashi.ac.jp/~toyoki/labTips/busLocationSrv.html

TOYOKI Hiroyasu
Updated: 2017-07-13

Home / labTipsHome