狠狠撸

狠狠撸Share a Scribd company logo
Copyright ? Century Four All right reserved. 1
エクセルマップ(Google Maps API3.0対応)
GoogleMaps API 2.0の廃止に伴い、新バージョンのGoogleMaps API3.0に対応させました
エクセルに入力した住所から、GoogleMapsに吹き出しを表示させるシステムです
■開発言語
?Excel VBA
?JavaScript
■マークアップ言語
?XHTML 1.0 Strict
?CSS2.0
■API
?GoogleMaps JavaScript
API Ver3.0
■対応ブラウザ
?Internet Explorer6.7.8.9
?Firefox
?Google Chrome
Copyright ? Century Four All right reserved. 2
吹き出しに表示させたい『文字』と、吹き出しに表示したい『住所』を入力してください。
●手順1
?吹き出しに表示させたい『文字』を入力
?吹き出しに表示させたい『住所』を入力
地図作成方法
Copyright ? Century Four All right reserved. 3
「座標取得」が取得されてきます。しばらく時間が掛かります。
「座標取得」が自動的に取得されていきます。
●手順2
「座標取得」ボタンをクリックすると、
住所から座標を取得します。
地図作成方法
Copyright ? Century Four All right reserved. 4
拡大
「ブロックされているコンテンツを許可」をクリック
地図を見る場合は、ココをクリック
地図作成方法
Copyright ? Century Four All right reserved. 5
GoogleMapsが起動し、入力した住所に吹き出しに表示されます。
入力した住所に、
「物件名」のテキストをいれた、
吹き出しが表示されるようになります。
「住所」を入力すると、
入力した住所に地図が移動します。
ストリートビューも可能!
地図作成方法
Copyright ? Century Four All right reserved. 6
仕様書
Copyright ? Century Four All right reserved. 7
Excel
VBA
Encoding
SJIS→UTF-8
GoogleMaps API3.0
JavaScript File
Excel Map
Geocoding
?latitude
?longitude
Encoding
SJIS→UTF-8
システム仕様
StyledMarker
https://code.google.com/p/google-maps-utility-library-v3/
Google Maps JavaScript API V3 Reference
https://developers.google.com/maps/
Copyright ? Century Four All right reserved. 8
コード解説(Excel VBA編)
Copyright ? Century Four All right reserved. 9
コード解説(Excel VBA編)
Excel VBA
VBAは、コールバック処理ができない?
恰好悪いけど、Sleepで連打送信を制限
他にも綺麗な書き方ある!
美を追求し過ぎない主義!(言い訳)
500ms 一時停止させる
Copyright ? Century Four All right reserved. 10
コード解説(Excel VBA編)
やっとこさ、経度と緯度が取得できた
XMLファイルを操作するので、
Microsoft XML V6.0 を有効に!
住所を「UTF-8」に変換する
Excel VBA
Copyright ? Century Four All right reserved. 11
コード解説(Excel VBA編)
文字コードを変換する関数
SJIS-WIN ?UTF-8
汎用性が効く関数です。
Excel VBA
オブジェクトの解放を忘れずに
Copyright ? Century Four All right reserved. 12
コード解説(Excel VBA編)
Excel VBA
「, 」を入れないとIEでは起動できない。。。
件数分ループさせて、
JavaScriptに読み込ませる用のデータを作る
Copyright ? Century Four All right reserved. 13
コード解説(Excel VBA編)
Excel VBA
Internet Explorer を起動させる
相対パス指定
Copyright ? Century Four All right reserved. 14
コード解説(Excel VBA編)
Excel VBA
GoogleMaps API V3.0に対応する吹き出しライブラリ
https://code.google.com/p/google-maps-utility-library-v3/
コイツを動かすには、文字コード「UTF-8」にしないといけない
かなり嵌まってしまった。。。
Excel VBA で、ファイルの文字コード変換作成ができる!
オブジェクトの解放を忘れずに
Copyright ? Century Four All right reserved. 15
コード解説(HTML編)
Copyright ? Century Four All right reserved. 16
コード解説(HTML編)
HTML
マップ表示領域
ページ表示時に実行
Copyright ? Century Four All right reserved. 17
コード解説(JavaScript 編)
Copyright ? Century Four All right reserved. 18
コード解説( JavaScript 編)
テキストボックスに表示させる説明表示
Javascriptで対応
UI にも優れるので便利な関数?
こんな感じになる!
JavaScript
Copyright ? Century Four All right reserved. 19
コード解説( JavaScript 編)
GoogleMapの初期表示
地図上に吹き出しを生成
VBAで作成したファイルを反映
こんな感じになる!
JavaScript

More Related Content

贰虫肠别濒で作る骋辞辞驳濒别マップ

  • 1. Copyright ? Century Four All right reserved. 1 エクセルマップ(Google Maps API3.0対応) GoogleMaps API 2.0の廃止に伴い、新バージョンのGoogleMaps API3.0に対応させました エクセルに入力した住所から、GoogleMapsに吹き出しを表示させるシステムです ■開発言語 ?Excel VBA ?JavaScript ■マークアップ言語 ?XHTML 1.0 Strict ?CSS2.0 ■API ?GoogleMaps JavaScript API Ver3.0 ■対応ブラウザ ?Internet Explorer6.7.8.9 ?Firefox ?Google Chrome
  • 2. Copyright ? Century Four All right reserved. 2 吹き出しに表示させたい『文字』と、吹き出しに表示したい『住所』を入力してください。 ●手順1 ?吹き出しに表示させたい『文字』を入力 ?吹き出しに表示させたい『住所』を入力 地図作成方法
  • 3. Copyright ? Century Four All right reserved. 3 「座標取得」が取得されてきます。しばらく時間が掛かります。 「座標取得」が自動的に取得されていきます。 ●手順2 「座標取得」ボタンをクリックすると、 住所から座標を取得します。 地図作成方法
  • 4. Copyright ? Century Four All right reserved. 4 拡大 「ブロックされているコンテンツを許可」をクリック 地図を見る場合は、ココをクリック 地図作成方法
  • 5. Copyright ? Century Four All right reserved. 5 GoogleMapsが起動し、入力した住所に吹き出しに表示されます。 入力した住所に、 「物件名」のテキストをいれた、 吹き出しが表示されるようになります。 「住所」を入力すると、 入力した住所に地図が移動します。 ストリートビューも可能! 地図作成方法
  • 6. Copyright ? Century Four All right reserved. 6 仕様書
  • 7. Copyright ? Century Four All right reserved. 7 Excel VBA Encoding SJIS→UTF-8 GoogleMaps API3.0 JavaScript File Excel Map Geocoding ?latitude ?longitude Encoding SJIS→UTF-8 システム仕様 StyledMarker https://code.google.com/p/google-maps-utility-library-v3/ Google Maps JavaScript API V3 Reference https://developers.google.com/maps/
  • 8. Copyright ? Century Four All right reserved. 8 コード解説(Excel VBA編)
  • 9. Copyright ? Century Four All right reserved. 9 コード解説(Excel VBA編) Excel VBA VBAは、コールバック処理ができない? 恰好悪いけど、Sleepで連打送信を制限 他にも綺麗な書き方ある! 美を追求し過ぎない主義!(言い訳) 500ms 一時停止させる
  • 10. Copyright ? Century Four All right reserved. 10 コード解説(Excel VBA編) やっとこさ、経度と緯度が取得できた XMLファイルを操作するので、 Microsoft XML V6.0 を有効に! 住所を「UTF-8」に変換する Excel VBA
  • 11. Copyright ? Century Four All right reserved. 11 コード解説(Excel VBA編) 文字コードを変換する関数 SJIS-WIN ?UTF-8 汎用性が効く関数です。 Excel VBA オブジェクトの解放を忘れずに
  • 12. Copyright ? Century Four All right reserved. 12 コード解説(Excel VBA編) Excel VBA 「, 」を入れないとIEでは起動できない。。。 件数分ループさせて、 JavaScriptに読み込ませる用のデータを作る
  • 13. Copyright ? Century Four All right reserved. 13 コード解説(Excel VBA編) Excel VBA Internet Explorer を起動させる 相対パス指定
  • 14. Copyright ? Century Four All right reserved. 14 コード解説(Excel VBA編) Excel VBA GoogleMaps API V3.0に対応する吹き出しライブラリ https://code.google.com/p/google-maps-utility-library-v3/ コイツを動かすには、文字コード「UTF-8」にしないといけない かなり嵌まってしまった。。。 Excel VBA で、ファイルの文字コード変換作成ができる! オブジェクトの解放を忘れずに
  • 15. Copyright ? Century Four All right reserved. 15 コード解説(HTML編)
  • 16. Copyright ? Century Four All right reserved. 16 コード解説(HTML編) HTML マップ表示領域 ページ表示時に実行
  • 17. Copyright ? Century Four All right reserved. 17 コード解説(JavaScript 編)
  • 18. Copyright ? Century Four All right reserved. 18 コード解説( JavaScript 編) テキストボックスに表示させる説明表示 Javascriptで対応 UI にも優れるので便利な関数? こんな感じになる! JavaScript
  • 19. Copyright ? Century Four All right reserved. 19 コード解説( JavaScript 編) GoogleMapの初期表示 地図上に吹き出しを生成 VBAで作成したファイルを反映 こんな感じになる! JavaScript