Geekなぺーじ : Google MAPS APIプログラミング
このコンテンツに含まれるページ一覧
ここでは、Google MAPS APIを使う前の準備を説明したいと思います。
Google MAPS APIを使うための準備
Google MAPS APIを使うためには、Google MAPS APIのキーが必要です。
keyは、Google MAPS APIの...
ここでは、Google MAPS APIを使ってプログラムを書くときのデバッグ方法を説明したいと思います。
日本語コードに注意する
一番最初につまずくのは恐らく日本語の扱いだと思われ...
ここでは、GLog.writeを使ってログメッセージを出力する方法を説明したいと思います。
サンプル
以下のサンプルはGoogle MAPS APIを使ったページのソースです。
クリックする度にロ...
Google MAPS APIを使ったプログラムを簡単に作るツールを作ってみました。
目標はJavascriptなどが全くわからない人でも簡単にGoogle mapをブログやホームページに貼り付けられる事で...
ここでは、Google MAPS APIを使った単純な例を説明したいと思います。
サンプル
以下のサンプルはGoogle MAPS APIを使ったページのソースです。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//...
Google MAPS APIを使った単純な例では、setCenterというメソッドを使って初期化位置を指定していましたが、ここではsetCenterに関してもう少し詳しい説明をしたいと思います。
(Google Ma...
ここでは、衛星地図を表示する方法を説明したいと思います。
setMapTypeを使ったサンプル
以下のサンプルはGoogle MAPS APIを使ったページのソースです。
強調してある部分が地図を...
ここでは、地図+衛星写真のハイブリッド表示にする方法を説明したいと思います。
setMapTypeを使ったサンプル
以下のサンプルはGoogle MAPS APIを使ったページのソースです。
強調し...
前述した例では、移動や縮尺変更用のボタンがありませんでした。
ここでは、そららのボタンを表示する方法を説明したいと思います。
GSmallMapControlを使ったサンプル
以下のサ...
前述した例では、簡易な移動や縮尺変更用のボタン表示方法を説明しましたが、ここではもう少し機能が豊富なコントロールを表示する方法を説明したいと思います。
GLargeMapCont...
前述した例では、地図/衛星 切り替え用のボタンがありませんでした。
ここでは、そららのボタンを表示する方法を説明したいと思います。
GMapTypeControlを使ったサンプル
以下の...
前述した例では、地図/衛星 切り替え用のボタンは右上に表示されていました。
ここでは、そららのボタンを表示する位置を指定する方法を説明したいと思います。
GMapTypeControl...
Google Mapで拡大率が大きい地図を表示していると、どこにいるのかわかりにくくなってしまします。
GOverviewMapControlを使うと、右下に概要を示す地図が表示されて、今どこにいる...
Local Search コントロールを使うと、ローカル検索機能が実現できます。
ここでは、Local Search コントロールを表示する方法を説明したいと思います。
ローカル検索サンプル
以下の...
ここではキーボードを使って地図を動かせるようにする方法を説明したいと思います。
通常のGoogle Mapsではキー操作で地図が動かせますが、Google Maps APIを使った場合、初期設定...
通常状態では、マウスを使ったドラッグ操作で地図が動かせるようなっていますが、ここではドラッグで地図を動かせないようにする方法を説明したいと思います。
サンプル
以...
ここでは、Google MAPS APIを使ったクリック処理の例を説明したいと思います。
サンプル
以下のサンプルはGoogle MAPS APIを使ったページのソースです。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML ...
ここでは、Google MAPS APIを使ったZoomイベント処理の例を説明したいと思います。
サンプル
以下のサンプルはGoogle MAPS APIを使ったページのソースです。
<!DOCTYPE html PUBLIC "-//W3C//DTD XH...
ここでは、Google MAPS APIを使ったMoveイベント処理の例を説明したいと思います。
サンプル
以下のサンプルはGoogle MAPS APIを使ったページのソースです。
<!DOCTYPE html PUBLIC "-//W3C//DTD XH...
ここでは、Google MAPS APIを使ったmovestartイベント処理の例を説明したいと思います。
サンプル
以下のサンプルはGoogle MAPS APIを使ったページのソースです。
<!DOCTYPE html PUBLIC "-//W3C//D...
ここでは、Google MAPS APIを使ったmoveendイベント処理の例を説明したいと思います。
サンプル
以下のサンプルはGoogle MAPS APIを使ったページのソースです。
<!DOCTYPE html PUBLIC "-//W3C//DTD...
ここでは、Google MAPS APIを使ったmaptypechangedイベント処理の例を説明したいと思います。
サンプル
以下のサンプルはGoogle MAPS APIを使ったページのソースです。
<!DOCTYPE html PUBLIC "-//W...
ここでは、地図上にふきだしを表示する方法を説明したいと思います。
サンプル
以下のサンプルはGoogle MAPS APIを使ったページのソースです。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 St...
ここでは、地図上に表示するふきだしの中身をHTMLで表現する方法を説明したいと思います。
ふきだしの中身をHTMLで書く事により、改行を行ったり、文字の色を変えたり、画像...
ここでは、地図上に表示するふきだしの中に画像を貼り付ける方法を説明したいと思います。
ふきだしの中身をHTMLで書く事により、ふきだしの中に画像を貼り付ける事ができま...
ここでは、地図上に表示するふきだしの中にYouTubeの映像を貼り付ける方法を説明したいと思います。
ふきだしの中身をHTMLで書く事により、ふきだしの中にYouTube映像を貼り付け...
サンプル
以下のサンプルはGoogle MAPS APIを使ったページのソースです。
showMapBlowupを使うと地図内に拡大地図をふきだし内に表示できます。
showMapBlowupに渡す引数によっては拡大地...
ここでは、クリックを行うたびにふきだしが表示される例を説明したいと思います。
サンプル
以下のサンプルはGoogle MAPS APIを使ったページのソースです。
<!DOCTYPE html PUBLIC "-//W3C...
ここでは、マーカをクリックするとふきだしが表示される例を説明したいと思います。
サンプル
以下のサンプルはGoogle MAPS APIを使ったページのソースです。
<!DOCTYPE html PUBLIC "-//...
Google maps apiでは、任意の位置にマーカーと呼ばれる印をつけることが出来ます。
ここでは、Google MAPS APIを使ったマーカーを貼り付け例を説明したいと思います。
サンプル
以下...
前述したマーカー貼り付け例では、デフォルトのマーカーを使っていましたが、ここでは自作の画像をマーカーとして利用する方法を説明したいと思います。
サンプル
以下のサ...
ここではマーカーにふきだしをつける方法を説明したいと思います。
サンプル
以下のサンプルはGoogle MAPS APIを使ったページのソースです。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Stric...
ここではマーカーのクリックイベントを処理する方法を説明したいと思います。
サンプル
以下のサンプルはGoogle MAPS APIを使ったページのソースです。
<!DOCTYPE html PUBLIC "-//W3C//DTD ...
ここではマーカーのmouseoverイベントを処理する方法を説明したいと思います。
サンプル
以下のサンプルはGoogle MAPS APIを使ったページのソースです。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHT...
ここではマウスを使ってドラッグができるマーカーを設置する方法を説明したいと思います。
サンプル
以下のサンプルはGoogle MAPS APIを使ったページのソースです。
<!DOCTYPE html PU...
ここではマウスを使ってドラッグができるようにしたマーカーが、ドラッグ終了時に跳ねない(bounceしない)ようにする方法を説明したいと思います。
サンプル
以下のサンプルはG...
Google Maps API version 2 からGMarkerがGMarkerOptionsという引数を取るようになりました。
ここでは、GMarkerOptionsの生成方法と使い方を説明します。
GMarkerOptionsの生成と利用
GMarkerOptionsは以...
GScreenOverlayを利用すると、画面上に固定された画像表示ができます。
マーカーの場合は、地図と共に移動してしまいますが、GScreenOverlayは地図ではなく画面(スクリーン)に対して...
ここでは、マップをアニメーションさせながら移動する方法を説明したいと思います。
(Google Maps API version 1ではrecenterOrPanToLatLngを使っていましたが、version 2からはpanToというメソ...
ここでは、マップを連続的にアニメーションさせながら移動する方法を説明したいと思います。
ソースコード
以下のサンプルはGoogle MAPS APIを使ったページのソースです。
<!DOCTYP...
ここでは、GPolylineを使って線を地図上に引く方法を説明したいと思います。
GPolylineを使ったサンプル
以下のサンプルはGoogle MAPS APIを使ったページのソースです。
強調してある...
ここでは、細かい設定をしながらGPolylineを使って線を地図上に引く方法を説明したいと思います。
GPolylineを使ったサンプル
前述したサンプルは単純に線だけを引いていましたが...
ここでは、GLanLngのdistanceFromを利用して2点間の距離を計測する方法を説明したいと思います。
サンプル
このサンプルでは、距離を求めている点をわかりやすくするためにGPolyline...
ここでは、GPolygonを使って図形を地図上に描く方法を説明したいと思います。
GPolygonを使ったサンプル
以下のサンプルはGoogle MAPS APIを使ったページのソースです。
強調してある...
ここでは、GPolygonがクリックされたときの処理を説明したいと思います。
GPolygonを使ったサンプル
以下のサンプルはGoogle MAPS APIを使ったページのソースです。
強調してある部分...
ここでは、GPolygonによるポリゴンが覆っている面積を計算する方法を説明したいと思います。
サンプル
以下のサンプルはGoogle MAPS APIを使ったページのソースです。
強調してある...
ここでは、Google MAPS APIとradioフィールドを連動させる例を説明したいと思います。
サンプル
以下のサンプルはGoogle MAPS APIを使ったページのソースです。
<!DOCTYPE html PUBLIC "-//W3C//DT...
ここでは、Google MAPS APIとチェックボックスフィールドを連動させる例を説明したいと思います。
サンプル
以下のサンプルはGoogle MAPS APIを使ったページのソースです。
<!DOCTYPE html...
ここでは、Google MAPS APIとフォーム(FORM)のselectフィールドを連動させる例を説明したいと思います。
サンプル
以下のサンプルはGoogle MAPS APIを使ったページのソースです。
<!DOCTYPE h...
ここでは、Google MAPS APIとフォーム(FORM)のselectフィールドを連動させる例を説明したいと思います。
この例では、地図の種類をSelectフォームと連動させます。
サンプル
以下のサ...
Google Maps APIには住所情報から緯度と経度を取得するGClientGeocoderというAPIがあります。
GClientGeocoder公開当初は日本の住所に対応していませんでしたが、2006年12月現在では使えるよ...
Google Maps APIには住所情報から緯度と経度を取得するGClientGeocoderというAPIがあります。
「住所を使って緯度経度を取得する(1)」では、発見した座標を表示していませんでした。
今...
ここでは、Google MAPS APIとstyle sheetを組み合わせて、地図上に画像を配置する方法を説明したいと思います。
サンプル
以下のサンプルはGoogle MAPS APIを使ったページのソースです。
...
ここでは、Google MAPS APIとstyle sheetを組み合わせて、移動する地図上に画像を配置する方法を説明したいと思います。
サンプル
以下のサンプルはGoogle MAPS APIを使ったページのソー...
ここでは、Google MAPS APIとstyle sheetを組み合わせて、地図を半透明にする方法を説明したいと思います。
サンプル
以下のサンプルはGoogle MAPS APIを使ったページのソースです。
<!DOCT...
ここでは、Google MAPS APIでAJAXを行うための基礎的な要素であるGXmlHttpの説明を行います。
サンプル
以下のサンプルはGoogle MAPS APIを使ったページのソースです。
<!DOCTYPE html PUBLIC "-//...
ここでは、Google MAPS APIでAJAXを行うための基礎的な要素であるGXmlHttpの説明を行います。
前述した例ではテキストファイルを取得しましたが、今度はXMLを取得してみたいと思いま...
ここでは、Google MAPS APIでAJAXを行うための基礎的な要素であるGXmlHttpの説明を行います。
前述した例ではXMLファイルを取得しましたが、特定のファイルを読み込むだけでは出来る...
ここでは、Google MAPS APIでAJAXを行うための基礎的な要素であるGXmlHttpの説明を行います。
前述した例ではCGIを使ってXMLを取得しましたが、同じ事をPHPでも行えます。
ここでは、GXm...
ここでは、Google MAPS APIでAJAXを行うための基礎的な要素であるGXmlHttpの説明を行います。
前述した例ではXML情報を取得しましたが、CGIからの情報を一方的に読み込むだけでは出来...
ここでは、Google MAPS APIでAJAXを行うための基礎的な要素であるGXmlHttpの説明を行います。
前述した例ではXML情報を取得しましたが、PHPからの情報を一方的に読み込むだけでは出来...
Google Maps API上でアマゾンのアフィリエイトリンクを作る方法です。
何と無くマッシュアップしてみました。
サンプル
以下のサンプルはGoogle MAPS API上でAmazonアフィリエイトリン...
2006/4/4、Google maps apiがversion 1からversion 2にupgradeしました。
ここでは、upgradeの内容を説明したいと思います。
update概要
version 2 APIはversion 1 APIと99% backward compatibleらしいです。
そ...
ここでは、Google MAPS API version 1を説明したいと思います。
ただし、Google Maps API version 1は既に古いので、はじめてGoogle maps apiを使う場合には、新しいバージョンを使うことをお勧...
ここでは、地図を揺らして地震を表現する方法を説明したいと思います。
サンプル
以下のサンプルはGoogle MAPS APIを使ったページのソースです。
地震を表現するために、id=mapのDI...
Google MAPS APIを使って緯度と経度を取得するサンプルです。
クリックした位置の緯度と経度を表示します。
最初に表示されるのが経度で次の行が緯度です。
緯度/経度の数値取得...
Google maps apiを使うにはHTMLを全部UTF-8を使わなければならなりませんが、「&#数値」という表現でasciiだけで日本語を表現することで直接UTF8で日本語を書かずに表示することもでき...
Google MAPS APIを使って山手線ぐるぐるぐるアニメーションしてみました。
山手線ぐるぐるぐるプログラムがどうなっているか興味がある方はJavascriptが書いてあるHTMLファイルで右...