Webサイトに地図を載せようと思って、前からやってみたかったGoogleMapを使ってみることにしました。
まず気になったのは「商用利用可能なのか?」という点でしたが可能らしい、というか超推奨。
日本語では、
「マップ API は、非営利であればどんなウェブサイトでも無償で利用できるベータ サービスです。」(http://code.google.com/intl/ja_ALL/apis/maps/ から引用)
と、ダメっぽい表現になっていますが、実際には
「一般人が無償でアクセスできるWebサイトであればOK(メインコンテンツが無償でなければならない)」
ということなんだとか。
で、実際に利用してみました。
まずは、本家サイトから登録。
code.google.com/intl/ja_ALL/apis/maps/
そうすると、キーとサンプルコードがもらえます。
サンプルコードを流用すれば地図は表示できます。
大きさは地図が表示されるDIVタグの大きさを変えればOK(CSS)。
表示の初期位置はちょっと面倒で、ジオコーディングで緯度と経度を取得する必要があります。
自分はGoogleが用意してるWebツールを使ったのですが、ぶっちゃけわかりづらいです。
この点については、『Geekなページ』に便利なツールがあったので、使わせてもらうのが良いと思います。
マーカーやコントローラの設定など、わかりやすく解説されていてとても助かりました。
www.geekpage.jp/web/google-maps-api/
というわけで、細かい設定方法などは上記のサイト様に任せて(汗)、自分はハマった点を書いておこうと思います。
とりあえずFireFoxでは問題なく動いたんですが、IE7ではダメでした。
まず、バージョンの指定を「v=2」から「v=2.x」に変更し、最新バージョンを利用するように変更しました。
それでもなんだか表示崩れがありました。
色々ためして、以下の状態だと表示が崩れることがわかりました。
[HTML]
<a name="map"></a>
<div id="map"></div>
…えーと、IEはJavaScriptのgetElementById()でname属性も見るの…?
半ば脱力しながら実装が終了しました。
まず気になったのは「商用利用可能なのか?」という点でしたが可能らしい、というか超推奨。
日本語では、
「マップ API は、非営利であればどんなウェブサイトでも無償で利用できるベータ サービスです。」(http://code.google.com/intl/ja_ALL/apis/maps/ から引用)
と、ダメっぽい表現になっていますが、実際には
「一般人が無償でアクセスできるWebサイトであればOK(メインコンテンツが無償でなければならない)」
ということなんだとか。
で、実際に利用してみました。
まずは、本家サイトから登録。
code.google.com/intl/ja_ALL/apis/maps/
そうすると、キーとサンプルコードがもらえます。
サンプルコードを流用すれば地図は表示できます。
大きさは地図が表示されるDIVタグの大きさを変えればOK(CSS)。
表示の初期位置はちょっと面倒で、ジオコーディングで緯度と経度を取得する必要があります。
自分はGoogleが用意してるWebツールを使ったのですが、ぶっちゃけわかりづらいです。
この点については、『Geekなページ』に便利なツールがあったので、使わせてもらうのが良いと思います。
マーカーやコントローラの設定など、わかりやすく解説されていてとても助かりました。
www.geekpage.jp/web/google-maps-api/
というわけで、細かい設定方法などは上記のサイト様に任せて(汗)、自分はハマった点を書いておこうと思います。
とりあえずFireFoxでは問題なく動いたんですが、IE7ではダメでした。
まず、バージョンの指定を「v=2」から「v=2.x」に変更し、最新バージョンを利用するように変更しました。
それでもなんだか表示崩れがありました。
色々ためして、以下の状態だと表示が崩れることがわかりました。
[HTML]
<a name="map"></a>
<div id="map"></div>
…えーと、IEはJavaScriptのgetElementById()でname属性も見るの…?
半ば脱力しながら実装が終了しました。
PR
トラックバック
トラックバックURL: