Webteko#10でお話しさせていただいたGoogleMapsの発表です。

1. Google
Maps
ふるかわだいすけ/mogya.com

2. •Googleマイマップ
•GoogleMapsAPI
•GoogleStaticMaps
•その他
目次

3. •Googleマイマップ
•GoogleMapsAPI
•GoogleStaticMaps
•その他
目次

4. Googleマイマップ

5. マイマップ

6. マイマップ

7. マイマップ

8. マイマップ

9. マイマップ

10. マイマップ

11. マイマップ

12. マイマップ

13. マイマップ

14. マイマップ

15. マイマップ

16. マイマップ

17. •Googleマイマップ
•GoogleMapsAPI
•GoogleStaticMaps
•その他
目次

18. http://code.google.com/intl/ja/apis/maps/documentation/
GoogleMapsAPI

19. :
http://code.google.com/intl/ja/apis/maps/signup.html
キーの取得

20. http://code.google.com/intl/ja/apis/maps/
documentation/introduction.html#Intro
GoogleMapsAPI

21. APIキー
sensor=true
iPhoneとか携帯でGPSを使う時はtrue
APIのロード

22. 地図がロードされる場所を作っておく
APIのロード

23. 出た

24. GMap2 → google.maps.Map2
GLatLng → google.maps.LatLng
動かないことが・・・(＞＜)
余談：Google AJAX API

25. ピンを打つ

26. ピンを打つ

27. ピンを打つ

28. ピンを打つ

29. ピンを打つ

30. InfoWindow

31. InfoWindow

32. InfoWindow

33. ピンを打つ

34. •Googleマイマップ
•GoogleMapsAPI
•GoogleStaticMaps
•その他
目次

35. iPhone上で
GoogleMapsは
使いにくい！
•3Gでのロード時間が長い
•指で操作しにくい
やってみてわかったこと

36. (○)画像なので軽量
(○)マーカーも出せます
(×)画像なので
ユーザーは操作ができない
そこで、GoogleStaticMaps

37. <img src ="
http://maps.google.com/staticmap?center=35.636157,
139.883723&size=310x310&maptype=mobile&markers
=35.636157,139.883723,tinyorange%7C35.6615013,13
9.8733166,midblue0%7C35.6628428,139.8723138,mid
blue1%7C35.6643148,139.8721888,midblue2%7C35.6
650962,139.8920179,midblue3%7C35.6657128,139.89
20762,midblue・・・
出し方

38. 地図の中心位置を指定
<img src ="
http://maps.google.com/staticmap?center=35.636157,
139.883723&size=310x310&maptype=mobile&markers
=35.636157,139.883723,tinyorange%7C35.6615013,13
9.8733166,midblue0%7C35.6628428,139.8723138,mid
blue1%7C35.6643148,139.8721888,midblue2%7C35.6
650962,139.8920179,midblue3%7C35.6657128,139.89
20762,midblue・・・
マーカー
マップのサイズ
※詳しくは
http://code.google.com/intl/ja/apis/m
aps/documentation/staticmaps/
出し方

39. •Googleマイマップ
•GoogleMapsAPI
•GoogleStaticMaps
•その他
目次

40. http://maps.smartnetwork.co.jp/view?m=49
ドラクエGoogleMaps

41. http://maps.smartnetwork.co.jp/
だれでもちず

42. http://www.monopolycitystreets.com
Monopoly City Streets

43. http://www.monopolycitystreets.com
Monopoly City Streets