Google Maps API: Windowsの開発マシンと公開サーバでの快適開発に向けて
Google Maps APIを使っていると困ったことが起きます。
前提:
- WindowsでGoogle Maps APIを用いたアプリケーションを開発している
- グローバルIPを持つ公開サーバに、開発したアプリケーションを公開しなければならない
- つまり、開発マシンと公開サーバが異なっている
Google Maps APIを利用するには、まずそれを利用するためのキーを取得する必要があります。そのキーはGoogle Maps APIを利用するURLと関連付けられます。
ここに問題があります。
開発マシンと公開サーバでは、Google Maps APIを利用するアプリケーションのURLが異なるため、Google Mapsに怒られてしまい、使えません。
そこで考えました。
それなら、キーをホスト名に応じてダイナミックに変更してやればうまく動くはず、と予想しました。
以下がそのコードです。
この関数の最後のコードは、Google Maps Transparenciesのコードからヒントを得ました。
// gmaps_util.js function include_gmaps_api() { var host, key; host = location.host; if(host == 'localhost') { // http://localhost/test/ key = 'XXXXXXXXXXXX'; } else { // http://XXXX/YYYY/ key = 'ZZZZZZZZZZZZ'; } document.write('<scr' + 'ipt src="http://maps.google.com/maps?file=api&v=1&key=' + key + '" type="text/javascript"></scr' + 'ipt>'); }
Google Mapsを利用する側のコードは以下のようになります。
これで、いちいち公開サーバにアプリケーションを配置してから、キーを置換といったバカバカしい作業から解放されます。
<!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> <script src="gmaps_util.js"></script> <script> include_gmaps_api(); </script> </head> <body> <div id="map" style="width: 500px; height: 400px"></div> <script type="text/javascript"> //<![CDATA[ var map = new GMap(document.getElementById("map")); map.addControl(new GSmallMapControl()); map.centerAndZoom(new GPoint(-122.1419, 37.4419), 4); //]]> </script> </body> </html>