地理情報科学特論 GoogleMapsAPIとGPSログの活用

What is Google Maps API? (and how to use GPS
data) 井上佳祐(Keisuke Inoue)

Agenda • About Google Map • About Google Maps API
• About GPS • How to get GPS data (.gpx file) from “やまやまGPS” • About .gpx file • Input .gpx file to Google Maps API • Wadachi 2

Google Map • Google Map is online map service provided
by Google inc. • We can search shop, restaurant and building. • This tell us the route to the place where we donʻt know the way. 3

Google Maps API • Google Maps API is supported by
some platforms. • e.g. iOS(Objective-C, Swift), Android(Java), Web Service(JavaScript) • This time we will use the API using JavaScript. • We can embed a map very easily on my web page. • We can create map own favorite maps, including displaying markers ,lines and circle on the map, and it is very useful. My web page API Google Map Structure ① Want map ② Request map data ③ Response map data ④ Show map 4

Google Maps API • Example Show map Show marker Show
circle Draw line and Show route 5

Google Maps API (how to Show map) 6

Google Maps API (how to Show map) • Head element
<head> <meta charset="utf-8"> <title>Title</title> <style type="text/css"> html, body { width: 100%; height: 100%; margin: 0; padding: 0; } #map { height: 94%; } </style> <script src="http://maps.google.com/maps/api/js?sensor=false&language=ja"></script> </head> Important! 7

Google Maps API (how to Show map) • Body element(Base
Code) <body> <div> <strong>Sample</strong> </div> <div id="map"></div> <script type="text/javascript"> var latlng = new google.maps.LatLng(34.7245225, 137.7177968); var options = { zoom: 15, center: latlng, mapTypeId: google.maps.MapTypeId.ROADMAP } var map = new google.maps.Map(document.getElementById('map'), options); </script> </body> Shizuoka University Longitude Latitude 8

Google Maps API (how to add new object) • Body
element(Base Code) <body> <div> <strong>Sample</strong> </div> <div id="map"></div> <script type="text/javascript"> var latlng = new google.maps.LatLng(34.7245225, 137.7177968); var options = { zoom: 15, center: latlng, mapTypeId: google.maps.MapTypeId.ROADMAP } var map = new google.maps.Map(document.getElementById('map'), options); // Add code that I introduce next page in following </script> </body> 9

Google Maps API (how to Show marker on map) 10

Google Maps API (how to Show marker on map) •
Add this to Base Code. <script type="text/javascript"> ・・・ var map = new google.maps.Map(document.getElementById('map'), options); var latlng = new google.maps.LatLng(34.7245225, 137.7177968); var marker = new google.maps.Marker({ position: latlng, map: map }); var latlng_castle = new google.maps.LatLng(34.7117718, 137.7248914); var marker_castle = new google.maps.Marker({ position: latlng_castle, map: map }); </script> Add 11

Google Maps API (how to Show line on map) 12

Google Maps API (how to Show line on map) •
Add this to Base Code. <script type="text/javascript"> ・・・ var map = new google.maps.Map(document.getElementById('map'), options); latlng = new google.maps.LatLng(34.7245225, 137.7177968); latlng_catsle = new google.maps.LatLng(34.7117718, 137.7248914); var points = [ latlng, latlng_catsle ]; var line = new google.maps.Polyline({ path: points, map: map }); </script> Add 13

Google Maps API (how to Show circle on map) 14

Google Maps API (how to Show circle on map) •
Add this to Base Code. <script type="text/javascript"> ・・・ var map = new google.maps.Map(document.getElementById('map'), options); var popCircle = new google.maps.Circle({ map: map, center: latlng_mid, radius: 300 }); </script> Add 15

GPS • GPS stands for ”Global Positioning System”. • GPS
is supplied by U.S. forces. • Russia is using an original satellite, such GPS satellite. It is called GLONAS. • Japan is launching a satellite to aid GPS. It is called QZSS, Common name is “Michibiki（みちびき）” • GPS measures the position on the earth using the difference in distance from three or more satellites. 16

Measurable by GPS • Latitude • Longitude • Altitude •
Time 17

Get GPS data (.gpx file) from “やまやまGPS” • GPS track
App stored GPS data(.gpx file) in your smartphone. • We have to transfer “.gpx file” to PC. 18

Get GPS data (.gpx file) from “やまやまGPS” Tap Tap 19

Get GPS data (.gpx file) from “やまやまGPS” Tap Swipe to
the top 20

Get GPS data (.gpx file) from “やまやまGPS” Tap Input your
E-Mail Tap 21

Get GPS data (.gpx file) from “やまやまGPS” Tap Tap 22

Open .gpx file • You can open .gpx file by
text editor, e.g. notepad, TeraPad. • .gpx file is based on XML file format. 23

Detail .gpx file <metadata> <bound minlat minlon maxlat maxlon/> </metadata>
<wpt lat=“” lon=“”> //Waypoint data <ele></ele> <time></time> <name></name> </wpt> ・・・ <trk> <trkseg> //Tracking data <trkpt lat=“” lon=“”> <ele></ele> <time></time> </trkpt> ・・・ </trkseg> </trk> 24

Detail .gpx file • wpt : WayPoint • trkpt :
the point on the way that we walked • lat : Latitude • lon : Longitude • ele : Altitude • time : Time which was recorded and added 25

Input .gpx file to Google Maps API • To read
a file into JavaScript, use the FileReader() object. function gpx_load(){ var file = document.getElementById("filePicker").files[0]; var reader = new FileReader(); reader.addEventListener('load', parseXML, false); reader.readAsText(file); function parseXML(e){ ・・・ } } 26

Input .gpx file to Google Maps API • To read
.gpx files with JavaScript, you need to be able to do DOM manipulation with an XML parser. function parseXML(e){ 'use strict'; var xml = e.target.result; var parser = new DOMParser(); var dom = parser.parseFromString(xml, 'text/xml'); ・・・ } 27

Processing and show Waypoint with Marker var wpt = dom.getElementsByTagName('wpt');
for (var i = 0; i < wpt.length; i++) { var lat_wpt = wpt[i].getAttribute('lat'); var lon_wpt = wpt[i].getAttribute('lon'); var latlng_wpt = new google.maps.LatLng(lat_wpt, lon_wpt); var marker_wpt = new google.maps.Marker({ position: latlng_wpt, map: map }); } 28

Processing and show TrackPoint with Line var trkpt = dom.getElementsByTagName('trkpt');
var points = []; for (var i = 0; i < trkpt.length; i++) { var lat_trkpt = trkpt[i].getAttribute('lat'); var lon_trkpt = trkpt[i].getAttribute('lon'); var p = new google.maps.LatLng(lat_trkpt, lon_trkpt); points.push(p); } var line = new google.maps.Polyline({ path: points, map: map }); 29

Result run 30

Demo 31

Wadachi • Wadachi is GPS log utilization tool. • This
automatically create a map to visualize the GPS log. Letʻs use this if you are in trouble creating a map! http://wadachi.cyclekikou.net 32

Reference • Samples Code • https://github.com/keisuke-oni/geoinfo2017 • Google Maps API
Documents • https://developers.google.com/maps/documentation/javascript/tut orial 33

Thank you for your attention! 34

地理情報科学特論 GoogleMapsAPIとGPSログの活用

地理情報科学特論 GoogleMapsAPIとGPSログの活用

More Decks by Keisuke Inoue

Other Decks in Technology

Featured

Transcript