先日ライブハウスドットコム ってサイトの携帯向けコンテンツに google map を追加した。
http://www.livehouse.com/ へ携帯端末でアクセスしながらこのサイトを見てもらえればと思う。
今回は、これを忘れないためにブログに書き記すと共に、誰かの役に立てればと思う。
はじめに、google map を利用するには、Google Maps API の key 取得しなければならない。これに関しては、「Google Maps API key 取得」等で google 検索等で調べてもらい、 key を取得してほしい。
次に、携帯でGoogle map を利用するとなると、JavaScript が使えないので、各プログラムからHTTPにて値を取得したりしなければならない。ソケットとかソープとか・・・そんな感じのものである。
php や perl 等を使った事があれば問題ない。秋田の場合、VBScript が得意なので、VBScript （old asp）で作った。なるべく言語に依存しないように書くつもりである。
プログラムの流れとしては、
１、住所情報を Google に投げて、緯度と経度を教わる。
２、緯度と経度を Google に投げて、地図イメージをもらい画面表示する。
これだけである。
１、で緯度と経度を取得する
http://maps.google.co.jp/maps/geo?q=東京都中野区中野&output=xml&key=自分のgoogleKey
このように値を投げると、XMLにて情報を返してくれる。
q=住所（ビル名は入れると結果が戻らない）
output=xml このままxml としておくのがよい
key=自分のgoogle Key
緯度と経度は <coordinates></coordinates> の中にカンマ区切りで入ってくる。
３ヶ目（2）に「0」があるが、これはよくわからない。
カンマ区切りの緯度と経度がこれで取得出来る。
ここまではソケット通信などと呼ばれる技術になる。
普通にブラウザのURL入力欄に入れてアクセスすると状況がわかる。
これを試してからプログラムをいじるとイメージが湧きやすい。
２、地図イメージをもらう
こちらは単純に <img src=> でリクエストする。
http://maps.google.com/mapdata? に以下の引数を渡してあげる
w=もらう地図の横幅
h=もらう地図の縦幅
cc=jp（言語 jp のままでよい）
min_priority=1（優先度 １のままで良い）
latitude_e6=緯度
longitude_e6=経度
zm=地図のズームサイズ
Point=b マーカー指定開始b のまま
Point.latitude_e6=緯度座標
Point.longitude_e6=経度座標
Point.iconid=16 マーカーのアイコンを指定
Point=e マーカー指定終了e のまま
これらを & で繋いで<img> タグで呼び出す。
マーカーは複数指定できるが、携帯画面なのであまり指定しても・・・って感じなので、複数指定は割愛する。このページに辿りつくまでに色々と情報を見たと思うので、そちらで見てもらえればと思う。
若干適当な所もあるが、以下に old asp のコードを記しておく。
もし使うのであれば、自己責任でお願いしたい。
************************************************************************************
<img src=<%=googlemapMb(txt,googlekey,errcod,mpzm,mpw,mph)%>>>
Function googlemapMb(txt,googleKey,errcod,mpzm,mpw,mph)
‘日本語住所からGoogle map API で緯度、経度を取得し、
‘携帯で利用できる地図を取得する
‘txt 検索される住所
‘googleKey = google のキー
‘errcod = エラーコード
‘mpzm = 地図のズーム
‘mpw = 地図の幅
‘mph = 地図の高さ
On Error Resume Next
‘緯度、経度取得のための url 作成
dim url
url = “http://maps.google.co.jp/maps/geo?” & _
“q=” & txt & _
“&output=xml” & _
“&key=” & googleKey
‘オブジェクトの作成
Dim objXMLHTTP,objXML,ReturnData
Set objXMLHTTP = Server.CreateObject(“Msxml2.ServerXMLHTTP”)
‘ソケット通信
objXMLHTTP.open “GET”, url, false
objXMLHTTP.Send
‘ソケット通信状況を見る
if objXMLHTTP.status = “200” then
ReturnData = objXMLHTTP.responseText
‘response.write ReturnData
else
errcod = “1” ‘通信エラー
googlemapMb = errcod
exit function
end if
If Err <> 0 Then
errcod = “2” ‘システムエラー
googlemapMb = errcod
exit function
else
end if
Set objXMLHTTP = nothing
On Error GoTo 0
‘取得した XML より緯度経度を取得する
dim fTxt,eTxt
‘response.write InStr(lcase(ReturnData),”<coordinates>”)
‘response.write InStr(lcase(ReturnData),”</coordinates>”)
if InStr(lcase(ReturnData),”<coordinates>”) > 0 and InStr(lcase(ReturnData),”</coordinates>”) > 0 Then
fTxt = InStr(lcase(ReturnData),”<coordinates>”)
eTxt = InStr(lcase(ReturnData),”</coordinates>”)
Else
errcod = “3” ‘緯度、経度取得エラー
googlemapMb = errcod
exit function
End if
‘データ取得
ReturnData = Replace(ReturnData,”<coordinates>”,””)
dim coordinates: coordinates=mid(ReturnData,fTxt,eTxt)
dim coordinates_Array
coordinates_Array = Split(coordinates,”,”)
‘緯度、経度はカンマで区切られていて、配列要素は3ヶ。
‘Ubound して 2 以外はエラーなので、エスケープする
if Ubound(coordinates_Array) <> 2 Then
errcod = “4” ‘緯度、経度取得エラー
googlemapMb = errcod
exit function
end if
dim latitude ‘緯度
dim longitude ‘経度
latitude = trim(coordinates_Array(1))
longitude = trim(coordinates_Array(0))
‘response.write latitude & “<br>”
‘response.write longitude
‘必ず数字型なので、それを調べる。
‘数字方ではない場合、失敗しているのでエラーとする
if IsNumeric(latitude) and IsNumeric(longitude) Then
else
errcod = “5” ‘緯度、経度取得エラー
googlemapMb = errcod
exit function
end if
latitude = replace(latitude,”.”,””)
longitude = replace(longitude,”.”,””)
‘地図情報のURLを返す
rtn = “”
rtn = “http://maps.google.com/mapdata?” & _
“w=” & mpw & _
“&h=” & mph & _
“&cc=jp” & _
“&min_priority=1” & _
“&latitude_e6=” & latitude & _
“&longitude_e6=” & longitude & _
“&zm=” & mpzm & _
“&Point=b” & _
“&Point.latitude_e6=” & latitude & _
“&Point.longitude_e6=” & longitude & _
“&Point.iconid=16” & _
“&Point=e”
googlemapMb = rtn
end Function