明日から使えるGoogle maps platform 入門

Transcript

1. ໌೔͔Β࢖͑ΔGOOGLE MAPS PLATFORM ೖ໳
2. ࣗݾ঺հ • ௕Ԭ େथ (ͳ͕͓͔ ͍͖ͩ) • 1994೥ੜ·Ε(24ࡀ) • Twitter: @nekoze_da • ܦྺ • 1~1.4೥໨:ɹɹɹגࣜձ͙ࣾΔͳͼ • 1.5೥໨ʙݱࡏ:ɹ JapanTaxiגࣜձࣾ • झຯ • ήʔϜ/μʔπ/ϓϩάϥϛϯά/ಛࡱ/ࣗ࡞ΩʔϘʔυ/
 ےτϨ/ϥϯχϯά/Թઘ/ΞΩόࢄࡦ
3. ࠓ೔ͷ͓࿩ ᶃ Google Maps Platformͱ͸ • શମ૾΍࢖͍ํΛ೺Ѳ͠Α͏ ᶄ Google Maps PlatformϋϯζΦϯ • ஍ਤΛWEBαΠτʹදࣔͤ͞Α͏ • Ң౓ܦ౓͔ΒॅॴΛऔಘ͠Α͏ • Ωʔϫʔυ͔ΒॅॴީิΛऔಘ͠Α͏
4. GOOGLE MAPS PLATFORMͱ͸
5. GOOGLE MAPS PLATFORMͱ͸ • GoogleϚοϓͷػೳΛࣗ਎ͷαΠτ΍ΞϓϦ࡞੒ʹ׆༻ Ͱ͖ΔΑ͏ʹͨ͠API • ࡢ೥6݄·Ͱچ໊শGoogleMapAPI • ୯७Խ͞ΕɺϢʔβʔʹͱͬͯΘ͔Γ΍͍͢࢓༷ʹ Ξοϓσʔτ͞Εͨ • ݄200υϧ෼·ͰແྉͰར༻Մೳ
6. APIͷछྨ • Map API • Routes API • Place API
7. MAP API • Google Mapͷ஍ਤΛදࣔ͢ΔͨΊͷAPI • Javascript • iOS SDK • Android SDK • etc... • ஍ਤͷελΠϧɺϚʔΧʔɺϥΠϯɺը૾·ͰৄࡉʹΧελϚΠ ζՄೳ
8. ROUTES API • A஍఺~B஍఺·Ͱͷಓ࿏্ͷܦ࿏ɺҠಈ࣌ؒ ౳Λऔಘ͢ΔAPI
9. PLACE API • ৔ॴʹؔ͢ΔৄࡉσʔλΛ׆༻ͨ͠API • ৔ॴৄࡉ • ৔ॴݕࡧ • ΦʔτίϯϓϦʔτ • δΦίʔσΟϯά • Ґஔ৘ใऔಘ • λΠϜκʔϯ • etc...
10. GOOGLE MAPS PLATFORM Λ׆༻ͨ͠αʔϏεҰཡ Uber Ecbo Cloak pokemon GO JapanTaxi
11. GOOGLE MAPS PLATFORM ϋϯζΦϯ
12. • Maps JavaScript APIΛ࢖༻ 
 (υΩϡϝϯτ: https://developers.google.com/maps/documentation/javascript/tutorial) • YOUR_API_KEYʹൃߦͨ͠APIΩʔΛషΓ෇͚Δ • callbackύϥϝʔλʹϚοϓͷઃఆΛఆٛͨؔ͠਺໊Λೖྗ͢Δ ஍ਤΛදࣔ͢Δ
13. ஍ਤΛදࣔ͢Δ • new google.maps.Map(ϚοϓΛද͍ࣔͤͨ͞ཁૉ, Φϓγϣϯ)Ͱ஍ਤΛදࣔ • centerΦϓγϣϯ: ॳظදࣔ࣌Ͱ஍ਤதԝʹද͍ࣔͤͨ͞஍఺ͷҢ౓ܦ౓ • zoomΦϓγϣϯ: ॳظදࣔͷ஍ਤͷζʔϜϨϕϧ਺஋͕େ͖͘ͳΔ΄Ͳ֦େ͞ΕΔ • ͦͷଞΦϓγϣϯ͸υΩϡϝϯτΛ֬ೝ
14. ϚʔΧʔΛදࣔ͢Δ • new google.maps.Marker(Φϓγϣϯ(object))ͰϚʔΧʔΛදࣔ • position: ϚʔΧʔΛग़ݱ͍ͤͨ͞Ң౓ܦ౓ ྫ: { lat: 35.681236, lng: 139.767125 } • map: ϚʔΧʔΛग़ݱ͍ͤͨ͞ର৅ͷmap • ͦͷଞΦϓγϣϯ͸υΩϡϝϯτΛ֬ೝ
15. Ң౓ܦ౓͔Βॅॴ৘ใΛऔಘ͢Δ • Geocoding APIΛ࢖༻ • ύϥϝʔλ • latlng: Ң౓, ܦ౓ • language: දࣔݴޠ • key: APIΩʔ curl -X GET 'https: //maps.googleapis.com/maps/api/geocode/json? latlng=35.681236,139.767125&language=ja&key=AIzaSyACJ066_Ge7arr_5qQMdDthr 7p_k9eFeRA'
16. Ωʔϫʔυ͔Βॅॴ৘ใͷީิΛ औಘ͢Δ • Place Autocomplete APIΛ࢖༻ • ύϥϝʔλ • input: Ң౓, ܦ౓ • location: ݕࡧͷى఺ͱͳΔҢ౓,ܦ౓ • radius: location͔Βͷݕࡧൣғ(ϝʔτϧ) • language: දࣔݴޠ • key: APIΩʔ curl -X GET ‘https: //maps.googleapis.com/maps/api/place/autocomplete/json? input=౦ژυʔϜ &location=35.681236,139.767125&radius=5000&language=ja&key=AIzaSyACJ066_Ge7 arr_5qQMdDthr7p_k9eFeRA'
17. ࠓճͭ͘Δ΋ͷ • ஍ਤΛදࣔ͢Δ(Maps JavaScript API) • ϚʔΧʔΛදࣔ͢Δ(Maps JavaScript API) • ϚʔΧʔʹ഑ஔͨ͠৔ॴͷॅॴ৘ใ͕දࣔ ͞ΕΔ(Geocoding API) • ݕࡧ૭ʹΩʔϫʔυΛೖྗ͢Δͱॅॴީิ ͕දࣔ͞ΕΔ (Place Autocomplete API) ϦϑΝϨϯεURL: https://developers.google.com/maps/ documentation/javascript/reference/
18. ϓϩδΣΫτͷ४උ git clone https://github.com/nekoze1210/GoogleMapsPlatform_SampleApp.git Terminal cd GoogleMapsPlatform_SampleApp docker-compose build docker-compose run web rails db:create docker-compose up -d dockerΛ࢖༻͢Δ৔߹ open http://localhost:3000
19. ϓϩδΣΫτͷ४උ git clone https://github.com/nekoze1210/GoogleMapsPlatform_SampleApp.git Terminal cd GoogleMapsPlatform_SampleApp bundle install bundle exec rails s bundle exec rails db:create dockerΛ࢖༻͠ͳ͍৔߹(Ruby: 2.6.1) open http://localhost:3000 ./config/database.ymlΛฤू(username, password, hostΛมߋ)
20. API KEYͷઃఆ GOOGLE_MAPS_KEY=औಘͨ͠GoogleMapsPlatformͷAPIKey .env
21. ࠂ஌ • 4/14(೔) ٕज़ॻయ6ʹͯGoogleMapsPlatformೖ ໳ͷٕज़ॻΛ൦෍͠·͢ʂ
 
 ഑ஔ৔ॴ͸ ͖13