*

最新のブログは「OBRIGADO! ARIGATO!」で書いています。

携帯サイトに google map

 先日ライブハウスドットコム ってサイトの携帯向けコンテンツに google map を追加した。
livehouse.comhttp://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)で作った。なるべく言語に依存しないように書くつもりである。


 プログラムの流れとしては、
 1、住所情報を Google に投げて、緯度と経度を教わる。
 2、緯度と経度を Google に投げて、地図イメージをもらい画面表示する。


 これだけである。


 1、で緯度と経度を取得する
 
http://maps.google.co.jp/maps/geo?q=東京都中野区中野&output=xml&key=自分のgoogleKey
 このように値を投げると、XMLにて情報を返してくれる。
 q=住所(ビル名は入れると結果が戻らない)
 output=xml このままxml としておくのがよい
 key=自分のgoogle Key


 緯度と経度は <coordinates></coordinates> の中にカンマ区切りで入ってくる。
 3ヶ目(2)に「0」があるが、これはよくわからない。
 カンマ区切りの緯度と経度がこれで取得出来る。
 ここまではソケット通信などと呼ばれる技術になる。
 普通にブラウザのURL入力欄に入れてアクセスすると状況がわかる。
 これを試してからプログラムをいじるとイメージが湧きやすい。



 2、地図イメージをもらう
 こちらは単純に <img src=> でリクエストする。
 
http://maps.google.com/mapdata? に以下の引数を渡してあげる
 w=もらう地図の横幅
 h=もらう地図の縦幅
 cc=jp(言語 jp のままでよい)
 min_priority=1(優先度 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


 


 





関連記事

告知活動 今日の社窓から

強い日本を創りたい ECサイト構築の豊作プロジェクト株式会社 秋田です...

記事を読む

.xxx ドメインの受付開始しました。

12月から利用出来るドメイン .xxx。 アダルト事業者専用の新しい...

記事を読む

ネットショップ構築セミナー中

クライアントさんに来て頂き、商品撮影からブログで情報発信までをレクチャ...

記事を読む

EC★ALL STARS フェイスブックアプリ

ネットショップ検索サイト EC★ALL STARS の フェイスブッ...

記事を読む

VB ASP リファレンス

この所、少々プログラムを書く事がある。 豊作プロジェクトで使っている...

記事を読む

新着記事

創立記念日 14期目、13歳にまりました

今日は、豊作プロジェクトの創立今日。 14期目、13歳になりました。 ...

記事を読む

元バブルガムブラザースギタリストの書籍3作同時リリース

秋田と同世代の方なら懐かしい、あのバブルガムブラザース。まさにあのウォ...

記事を読む

念願の4時間切り達成

EC業界の成長に貢献する 豊作プロジェクト 秋田隆輝です。 昨日、勝...

記事を読む

新年明けましておめでとうございます。

EC業界の成長に貢献する 豊作プロジェクト 秋田隆輝です。 新年明け...

記事を読む

電子書籍が熱い。今日の社窓から

EC業界の成長に貢献する 豊作プロジェクトの 秋田隆輝です。 二週程...

記事を読む

コメント/トラックバック

トラックバック用URL:

コメントフィード




管理人にのみ公開されます

*

創立記念日 14期目、13歳にまりました

今日は、豊作プロジェクトの創立今日。 14期目、13歳になりました。 ...

元バブルガムブラザースギタリストの書籍3作同時リリース

秋田と同世代の方なら懐かしい、あのバブルガムブラザース。まさにあのウォ...

念願の4時間切り達成

EC業界の成長に貢献する 豊作プロジェクト 秋田隆輝です。 昨日、勝...

新年明けましておめでとうございます。

EC業界の成長に貢献する 豊作プロジェクト 秋田隆輝です。 新年明け...

電子書籍が熱い。今日の社窓から

EC業界の成長に貢献する 豊作プロジェクトの 秋田隆輝です。 二週程...

→もっと見る

PAGE TOP ↑