Lesson 24 EECS Seminars Developing Android Location-aware Apps Victor Matos Cleveland State University Portions of this presentation are reproduced from work created and shared by Google and used according to terms described in the Creative Commons 3.0 Attribution License. Agenda Developing Android Mapping Apps What is this talk about? We will discuss current technologies used to create attractive, powerful and effective location ‐ aware solutions for Android powered devices. Sections 1. Overview of the Google Maps API resources 2. Review various Android strategies to accommodate mapping operations. 3. Introduce Vernacular Mapping – a novel strategy for geo ‐ mapping based on cultural narrative. 1 ‐ 2
Lesson 24 Section1 ‐ Google Maps API Introduction Section1 ‐ Google Maps API is a web ‐ service develop by Google to assist desktop and mobile devices on their geo ‐ mapping needs. Includes satellite imagery, • street maps, • 360° panoramic views of streets (3D Street Views), • real ‐ time traffic conditions, • route planning for traveling by foot, car, bicycle, or public • transportation, Direct and Reverse Geo ‐ coding, • Elevation and time ‐ zone information, • Area demarcation using polygons and polylines, • KML location marking, etc . • 1 ‐ 3 Section1 ‐ Google Maps API Target Platforms Section1 ‐ Google Maps APIs are available for a variety of platforms including: Mapping is free for Google Maps Android API and Google Maps SDK for iOS (although there is a limit of total executions per/day). 1 ‐ 4
Lesson 24 Section1 ‐ Google Maps API How to Become a Google Map’s Developer? 1. Obtain a Developer’s Key Visit the Google Developers Console to obtain a KEY as well as permission to use the resources https://console.developers.google.com/home/dashboard 40 chars key looks like: AIzaSyD0dNC21AyUxaHcz_mWcp0TXNKCMiP4 ‐ CU 1 ‐ 5 Section1 ‐ Google Maps API How to Become a Google Map’s Developer? 2. Identify & Activate Services Sixteen services 1 ‐ 6
Lesson 24 Section1 ‐ Google Maps API 1. Google Maps Android API & Google Maps iOS API This API interacts with location ‐ aware Android apps to expose maps created with data extracted from the Google Maps Service. The API automatically handles access to Google servers, map rendering and response to user gestures such as clicks and drags. Examples will be shown later 1 ‐ 7 Section1 ‐ Google Maps API 2. Google Maps JavaScript API The JavaScript API allows you to create customizable ( dynamic ) maps on • your website . A map is shown inside of the designated HTML container (typically a DIV • element). The API includes services such as geocoding, directions, Street View. • The rendering of the map and its features, as well as its interaction with • the user is supported through JavaScript methods. References : https://developers.google.com/maps/documentation/javascript/examples/directions ‐ panel 1 ‐ 8
Lesson 24 Section1 ‐ Google Maps API 2. Google Maps JavaScript API <!DOCTYPE html> <html> <head> <title>Simple Map</title> <meta name="viewport" content="initial ‐ scale=1.0"> <style> html, body { height: 100%; margin: 0; padding: 0; } #map { height: 100%; } </style> </head> <body> <h1> Welcome to Cleveland State University</h1> <div id=" map "></div> <script> var map; function initMap() { map = new google.maps.Map(document.getElementById('map'), { center: {lat: 41.502610, lng: ‐ 81.675464}, zoom: 15 }); } </script> <script src="https://maps.googleapis.com/maps/api/js?callback=initMap &key=YOUR ‐ API ‐ KEY" async defer></script> </body> 1 ‐ 9 Section1 ‐ Google Maps API 2. Google Maps JavaScript API 1 ‐ 10
Lesson 24 Section1 ‐ Google Maps API 2. Google Maps JavaScript API 1 ‐ 11 Section1 ‐ Google Maps API 3. Google Static Maps API You could place a lightweight static map on your website without any JavaScript coding. The map request is based on URL parameters sent through a standard HTTP request and returns the map as an image. http://maps.googleapis.com/maps/api/staticmap? size=640x400 ¢er=Cleveland+State+University,+Cleveland+Ohio &key= YOUR ‐ API ‐ KEY 1 ‐ 12
Lesson 24 Section1 ‐ Google Maps API 4. Google Maps Roads API Identifies the best ‐ fit road geometry for a given set of location points. Points are generally taken along a path on which you have been traveling. EXAMPLE: In this example the user supplies four locations along her path from school to a baseball game at Progressive Field. In return the SnapPoints service provides a set of coordinates closely matching known roads better describing her trajectory. https://roads.googleapis.com/v1/snaptoroads?path=41.503224, ‐ 81.672490 |41.499273, ‐ 81.675420|41.497044, ‐ 81.679618|41.495133, ‐ 81.684059 &interpolate=true&key=YOUR ‐ API ‐ KEY CSU ‐ College of Engineering 41.503224, ‐ 81.672490 CSU – Convocation Center 41.499273, ‐ 81.675420 CSU Overflow Parking 41.497044, ‐ 81.679618 Progressive Field 41.495133, ‐ 81.684059 1 ‐ 13 Section1 ‐ Google Maps API 4. Google Maps Roads API The answer is presented in JSON notation ( only a few lines are shown ) { "snappedPoints": [ { "location": { "latitude": 41.5026151, "longitude": ‐ 81.6724211 }, "originalIndex": 0, "placeId": "ChIJnYO8GGH6MIgRy6k0LbALluM" }, { "location": { "latitude": 41.5021887, "longitude": ‐ 81.67232709999999 }, "placeId": "ChIJnYO8GGH6MIgRy6k0LbALluM" }, { "location": { "latitude": 41.502054099999988, "longitude": ‐ 81.6722935 }, "placeId": "ChIJnYO8GGH6MIgRy6k0LbALluM" }, . . . } 1 ‐ 14
Lesson 24 Section1 ‐ Google Maps API 4. Google Maps Roads API After parsing the JSON response and plotting the returned points we obtain an interpolated fit to the original sequence of points. SNAPPED LOCATIONS 41.5026151, ‐ 81.6724211|41.5021887, ‐ 81.67232709999999|41.50205409999999, ‐ 81.6722935|41.50205409999999, ‐ 81.6722935|41.5018959, ‐ 81.6722506|41.5018959, ‐ 81.6722506|41.501387199999996, ‐ 81.6721661|41.501329899999995, ‐ 81.6721541|41.5012827, ‐ 81.6721407|41.50102149999999, ‐ 81.672032|41.50065250000001, ‐ 81.67185959999999|41.50065250000001, ‐ 81.67185959999999|41.5006453, ‐ 81.67193139999999|41.500602, ‐ 81.6723027|41.500602, ‐ 81.6723027|41.500507299999995, ‐ 81.67316439999999|41.500507299999995, ‐ 81.67316439999999|41.500484, ‐ 81.67336809999999|41.500484, ‐ 81.67336809999999|41.500456799999995, ‐ 81.6736141|41.500456799999995, ‐ 81.6736141|41.500380899999996, ‐ 81.67431909999999|41.500380899999996, ‐ 81.67431909999999|41.500254999999996, ‐ 81.67544099999999|41.500254999999996, ‐ 81.67544099999999|41.5002091, ‐ 81.6754878|41.5001818, ‐ 81.6755122|41.500155, ‐ 81.6755299|41.500128499999995, ‐ 81.6755434|41.50009490000001, ‐ 81.6755501|41.50006419999999, ‐ 81.6755518|41.49997760000001, ‐ 81.67553889999999|41.4996224, ‐ 81.6754729|41.4996224, ‐ 81.6754729|41.4991857, ‐ 81.67541469999999|41.4991857, ‐ 81.67541469999999|41.4988102, ‐ 81.6753399|41.4988102, ‐ 81.6753399|41.498662700000004, ‐ 81.67573569999999|41.498662700000004, ‐ 81.67573569999999|41.4983144, ‐ 81.67675659999999|41.4983144, ‐ 81.67675659999999|41.4981339, ‐ 81.6773154 1 ‐ 15 Section1 ‐ Google Maps API 5. Google Street View Image API This API allows you to include a static Street View panorama (or thumbnail) into your webpage. No JavaScript programming is needed . The viewport (direction of the scene and angle of the camera) is specified in the sender’s URL string which is transmitted using plain HTTP. https://maps.googleapis.com/maps/api/streetview?size=600x400 &location=41.501585, ‐ 81.675271&heading= ‐ 40&pitch=5&fov=90 &key=YOUR ‐ API ‐ KEY CSU Location : 41.501585° ‐ 81.675271° 1 ‐ 16
Lesson 24 Section1 ‐ Google Maps API 6. Google Maps Embed API This API allows you to fill an HTML iFrame element with a dynamic Google map which could include base maps, • indoor plans, • satellite images, • street views, and • turn ‐ by ‐ turn directions. • The map is defined in the src attribute of the < iFrame> . The webpage holding the iFrame element uses plain HTML transport 1 ‐ 17 Section1 ‐ Google Maps API 6. Google Maps Embed API <body> Example : Draw an embedded map <H1> Section1 ‐ Google Maps API Embedd – Basic Map</H1> showing a place (CSU) <iframe width="600" height="450" frameborder="0" style="border:0" src="https://www.google.com/maps/embed/v1/place ?q=Cleveland+State+University,Cleveland+Ohio &key= YOUR ‐ API ‐ KEY" allowfullscreen> </iframe> </body> </html> 1 ‐ 18
Lesson 24 Section1 ‐ Google Maps API 6. Google Maps Embed API 1 ‐ 19 Example : Draw an Section1 ‐ Google Maps API embedded map showing directions 6. Google Maps Embed API from Cleveland to Indianapolis <body> <H1> Section1 ‐ Google Maps API Embedd – Directions </H1> <iframe width="600" height="450" frameborder="0" style="border:0" src="https://www.google.com/maps/embed/v1/directions ?origin=Cleveland+Ohio &destination=Indianapolis+Indiana &avoid=tolls &key=YOUR ‐ API ‐ KEY" allowfullscreen> </iframe> </body> </html> 1 ‐ 20
Recommend
More recommend
