webteko#10 googlemaps
DESCRIPTION
Webteko#10でお話しさせていただいたGoogleMapsの発表です。TRANSCRIPT
![Page 1: Webteko#10 GoogleMaps](https://reader033.vdocuments.net/reader033/viewer/2022052622/558d2098d8b42a3a0a8b45c4/html5/thumbnails/1.jpg)
ふるかわだいすけ/mogya.com
GoogleMaps
![Page 2: Webteko#10 GoogleMaps](https://reader033.vdocuments.net/reader033/viewer/2022052622/558d2098d8b42a3a0a8b45c4/html5/thumbnails/2.jpg)
目次
•Googleマイマップ•GoogleMapsAPI•GoogleStaticMaps•その他
![Page 3: Webteko#10 GoogleMaps](https://reader033.vdocuments.net/reader033/viewer/2022052622/558d2098d8b42a3a0a8b45c4/html5/thumbnails/3.jpg)
目次
•Googleマイマップ•GoogleMapsAPI•GoogleStaticMaps•その他
![Page 4: Webteko#10 GoogleMaps](https://reader033.vdocuments.net/reader033/viewer/2022052622/558d2098d8b42a3a0a8b45c4/html5/thumbnails/4.jpg)
Googleマイマップ
![Page 5: Webteko#10 GoogleMaps](https://reader033.vdocuments.net/reader033/viewer/2022052622/558d2098d8b42a3a0a8b45c4/html5/thumbnails/5.jpg)
マイマップ
![Page 6: Webteko#10 GoogleMaps](https://reader033.vdocuments.net/reader033/viewer/2022052622/558d2098d8b42a3a0a8b45c4/html5/thumbnails/6.jpg)
マイマップ
![Page 7: Webteko#10 GoogleMaps](https://reader033.vdocuments.net/reader033/viewer/2022052622/558d2098d8b42a3a0a8b45c4/html5/thumbnails/7.jpg)
マイマップ
![Page 8: Webteko#10 GoogleMaps](https://reader033.vdocuments.net/reader033/viewer/2022052622/558d2098d8b42a3a0a8b45c4/html5/thumbnails/8.jpg)
マイマップ
![Page 9: Webteko#10 GoogleMaps](https://reader033.vdocuments.net/reader033/viewer/2022052622/558d2098d8b42a3a0a8b45c4/html5/thumbnails/9.jpg)
マイマップ
![Page 10: Webteko#10 GoogleMaps](https://reader033.vdocuments.net/reader033/viewer/2022052622/558d2098d8b42a3a0a8b45c4/html5/thumbnails/10.jpg)
マイマップ
![Page 11: Webteko#10 GoogleMaps](https://reader033.vdocuments.net/reader033/viewer/2022052622/558d2098d8b42a3a0a8b45c4/html5/thumbnails/11.jpg)
マイマップ
![Page 12: Webteko#10 GoogleMaps](https://reader033.vdocuments.net/reader033/viewer/2022052622/558d2098d8b42a3a0a8b45c4/html5/thumbnails/12.jpg)
マイマップ
![Page 13: Webteko#10 GoogleMaps](https://reader033.vdocuments.net/reader033/viewer/2022052622/558d2098d8b42a3a0a8b45c4/html5/thumbnails/13.jpg)
マイマップ
![Page 14: Webteko#10 GoogleMaps](https://reader033.vdocuments.net/reader033/viewer/2022052622/558d2098d8b42a3a0a8b45c4/html5/thumbnails/14.jpg)
マイマップ
![Page 15: Webteko#10 GoogleMaps](https://reader033.vdocuments.net/reader033/viewer/2022052622/558d2098d8b42a3a0a8b45c4/html5/thumbnails/15.jpg)
マイマップ
![Page 16: Webteko#10 GoogleMaps](https://reader033.vdocuments.net/reader033/viewer/2022052622/558d2098d8b42a3a0a8b45c4/html5/thumbnails/16.jpg)
マイマップ
![Page 17: Webteko#10 GoogleMaps](https://reader033.vdocuments.net/reader033/viewer/2022052622/558d2098d8b42a3a0a8b45c4/html5/thumbnails/17.jpg)
目次
•Googleマイマップ•GoogleMapsAPI•GoogleStaticMaps•その他
![Page 18: Webteko#10 GoogleMaps](https://reader033.vdocuments.net/reader033/viewer/2022052622/558d2098d8b42a3a0a8b45c4/html5/thumbnails/18.jpg)
GoogleMapsAPI
http://code.google.com/intl/ja/apis/maps/documentation/
![Page 19: Webteko#10 GoogleMaps](https://reader033.vdocuments.net/reader033/viewer/2022052622/558d2098d8b42a3a0a8b45c4/html5/thumbnails/19.jpg)
キーの取得
http://code.google.com/intl/ja/apis/maps/signup.html
:
![Page 20: Webteko#10 GoogleMaps](https://reader033.vdocuments.net/reader033/viewer/2022052622/558d2098d8b42a3a0a8b45c4/html5/thumbnails/20.jpg)
GoogleMapsAPI
http://code.google.com/intl/ja/apis/maps/documentation/introduction.html#Intro
![Page 21: Webteko#10 GoogleMaps](https://reader033.vdocuments.net/reader033/viewer/2022052622/558d2098d8b42a3a0a8b45c4/html5/thumbnails/21.jpg)
APIのロード
APIキー
sensor=trueiPhoneとか携帯でGPSを使う時はtrue
![Page 22: Webteko#10 GoogleMaps](https://reader033.vdocuments.net/reader033/viewer/2022052622/558d2098d8b42a3a0a8b45c4/html5/thumbnails/22.jpg)
APIのロード
地図がロードされる場所を作っておく
![Page 23: Webteko#10 GoogleMaps](https://reader033.vdocuments.net/reader033/viewer/2022052622/558d2098d8b42a3a0a8b45c4/html5/thumbnails/23.jpg)
出た
![Page 24: Webteko#10 GoogleMaps](https://reader033.vdocuments.net/reader033/viewer/2022052622/558d2098d8b42a3a0a8b45c4/html5/thumbnails/24.jpg)
余談:Google AJAX API
GMap2 → google.maps.Map2GLatLng → google.maps.LatLng
動かないことが・・・(><)
![Page 25: Webteko#10 GoogleMaps](https://reader033.vdocuments.net/reader033/viewer/2022052622/558d2098d8b42a3a0a8b45c4/html5/thumbnails/25.jpg)
ピンを打つ
![Page 26: Webteko#10 GoogleMaps](https://reader033.vdocuments.net/reader033/viewer/2022052622/558d2098d8b42a3a0a8b45c4/html5/thumbnails/26.jpg)
ピンを打つ
![Page 27: Webteko#10 GoogleMaps](https://reader033.vdocuments.net/reader033/viewer/2022052622/558d2098d8b42a3a0a8b45c4/html5/thumbnails/27.jpg)
ピンを打つ
![Page 28: Webteko#10 GoogleMaps](https://reader033.vdocuments.net/reader033/viewer/2022052622/558d2098d8b42a3a0a8b45c4/html5/thumbnails/28.jpg)
ピンを打つ
![Page 29: Webteko#10 GoogleMaps](https://reader033.vdocuments.net/reader033/viewer/2022052622/558d2098d8b42a3a0a8b45c4/html5/thumbnails/29.jpg)
ピンを打つ
![Page 30: Webteko#10 GoogleMaps](https://reader033.vdocuments.net/reader033/viewer/2022052622/558d2098d8b42a3a0a8b45c4/html5/thumbnails/30.jpg)
InfoWindow
![Page 31: Webteko#10 GoogleMaps](https://reader033.vdocuments.net/reader033/viewer/2022052622/558d2098d8b42a3a0a8b45c4/html5/thumbnails/31.jpg)
InfoWindow
![Page 32: Webteko#10 GoogleMaps](https://reader033.vdocuments.net/reader033/viewer/2022052622/558d2098d8b42a3a0a8b45c4/html5/thumbnails/32.jpg)
InfoWindow
![Page 33: Webteko#10 GoogleMaps](https://reader033.vdocuments.net/reader033/viewer/2022052622/558d2098d8b42a3a0a8b45c4/html5/thumbnails/33.jpg)
ピンを打つ
![Page 34: Webteko#10 GoogleMaps](https://reader033.vdocuments.net/reader033/viewer/2022052622/558d2098d8b42a3a0a8b45c4/html5/thumbnails/34.jpg)
目次
•Googleマイマップ•GoogleMapsAPI•GoogleStaticMaps•その他
![Page 35: Webteko#10 GoogleMaps](https://reader033.vdocuments.net/reader033/viewer/2022052622/558d2098d8b42a3a0a8b45c4/html5/thumbnails/35.jpg)
やってみてわかったこと
iPhone上でGoogleMapsは使いにくい!
•3Gでのロード時間が長い•指で操作しにくい
![Page 36: Webteko#10 GoogleMaps](https://reader033.vdocuments.net/reader033/viewer/2022052622/558d2098d8b42a3a0a8b45c4/html5/thumbnails/36.jpg)
そこで、GoogleStaticMaps
(○)画像なので軽量(○)マーカーも出せます(×)画像なので
ユーザーは操作ができない
![Page 37: Webteko#10 GoogleMaps](https://reader033.vdocuments.net/reader033/viewer/2022052622/558d2098d8b42a3a0a8b45c4/html5/thumbnails/37.jpg)
出し方
<img src ="http://maps.google.com/staticmap?center=35.636157,139.883723&size=310x310&maptype=mobile&markers=35.636157,139.883723,tinyorange%7C35.6615013,139.8733166,midblue0%7C35.6628428,139.8723138,midblue1%7C35.6643148,139.8721888,midblue2%7C35.6650962,139.8920179,midblue3%7C35.6657128,139.8920762,midblue・・・
![Page 38: Webteko#10 GoogleMaps](https://reader033.vdocuments.net/reader033/viewer/2022052622/558d2098d8b42a3a0a8b45c4/html5/thumbnails/38.jpg)
出し方
<img src ="http://maps.google.com/staticmap?center=35.636157,139.883723&size=310x310&maptype=mobile&markers=35.636157,139.883723,tinyorange%7C35.6615013,139.8733166,midblue0%7C35.6628428,139.8723138,midblue1%7C35.6643148,139.8721888,midblue2%7C35.6650962,139.8920179,midblue3%7C35.6657128,139.8920762,midblue・・・
地図の中心位置を指定
マップのサイズ
マーカー
※詳しくはhttp://code.google.com/intl/ja/apis/maps/documentation/staticmaps/
![Page 39: Webteko#10 GoogleMaps](https://reader033.vdocuments.net/reader033/viewer/2022052622/558d2098d8b42a3a0a8b45c4/html5/thumbnails/39.jpg)
目次
•Googleマイマップ•GoogleMapsAPI•GoogleStaticMaps•その他