1. Programming Games Recap on Google Maps. Creating elements. Dynamic creation of elements (multiple video elements). Geolocation. Classwork/Homework: Catch-up. Show simple Google Maps. Plan Google Maps application.

2. Recap Access Google Maps API using external script element JavaScript code to bring in a map, with specific options, to a div element in the document. Can have more than one such place.

3. Map options center of map: given as a Google Maps API latlng object. Holds latitude, longitude values type of map: given as a Google Maps API constant: TERRAIN, ROADMAP, SATELLITE zoom level: number icon: image marking center more…

4. Lat lng units Experiment to see how close values are. Compare: -80, +80, 280, -280, 180,… Google Maps API also provides ways to use addresses and also do reverse lookup (lat long to address)

5. HTML document in http://maps.google.com/maps/api/js? sensor=false in

6. somewhere in the code // Determine the base location: replace ??? with actual values mylat = ???; mylong = ???; blatlng = new google.maps.LatLng(mylat, mylong); myOptions = { zoom: 12, center: blatlng, mapTypeId: google.maps.MapTypeId.ROADMAP}; map = new google.maps.Map(document.getElementById("place"). myOptions);

7. basic example http://faculty.purchase.edu/jeanine.meyer/html5/basicmap.html

8. Basic map function init() { blatlng = new google.maps.LatLng(41.04796,-73.70539); myOptions = { zoom: 14, center: blatlng, mapTypeId: google.maps.MapTypeId.ROADMAP }; map = new google.maps.Map(document.getElementById("place"), myOptions); }

9. What comes next Examples of features you can use. Listen for general understanding, but don’t be overly concerned with details. Examine coding in the examples. Programs ARE putting together features based on your ideas and logic.

10. My ideas Set of maps, that is, locations A combination of light and shadow moving with the mouse over a map draw something on canvas, which would be transparent My cursor (fluorescent light bulb) Interactions with user (player) Compute and report distances

11. Spotlight The spotlight program uses Google Maps event handling AND mouse on canvas events. Substitutes default cursor with image I made. Uses alpha for color. Creates a mask. http://faculty.purchase.edu/jeanine.meyer/html5/mapspotlight.html

12. Before next example: arrays Using an array of locations. This is an array of arrays. Inner arrays have 2 elements, holding latitude and longitude values, so…. locations[0][0] is the latitude and locations[0][1] is the longitude

13. Events in Spotlight example Make use of three events on canvas: ‘mousemove’ invokes showshadow ‘mousedown’ invokes pushcanvasunder ‘mouseout’ invokes clearshadow These are 3 functions I WROTE to draw spotlight & shadow centered at mouse; make map on top of canvas; clear the canvas. One event on the map: listener = google.maps.event.addListener(map, 'mouseup', function(event) { checkit(event.latLng); });

14. Drawing spotlight … means drawing a path to be filled in with a color with an alpha setting var grayshadow = “rgba(250,250,250,.8)”; Remember: rgb(255,255,255) is white, so the graymatter variable indicates.8 opaque of something grayish…

15. Cursor Built-in cursors and your own cursors can.style.cursor = “url(‘light.gif’),pointer”; Switches cursor for moving on canvas to be image I uploaded or, if not available, the built-in pointer. I also created & uploaded small red & black hand drawn x’s for icon in maps.

16. Spotlight The spotlight program uses Google Maps event handling AND mouse on canvas events. Substitutes default cursor with image I made. Uses alpha for color. Creates a mask. http://faculty.purchase.edu/jeanine.meyer/html5/mapspotlight.html

17. Map and media http://faculty.purchase.edu/jeanine.meyer/html5/mapvideos.html http://faculty.purchase.edu/jeanine.meyer/html5/mapmediaquiz.html Associates positions with media. Player clicks on map. If close enough, media is presented. Note use of CSS and coding to keep video, images, audio controls invisible until appropriate. Quiz separate logic and content!

18. Mediaquizcontent.js I separated program from content and mediaquizcontent.js is the name of the file holding the content, meaning the specification for the video at the locations. You can’t tell that from outward display. Look at head element in code You can read about it in HTML5 and JavaScript Projects in the Library.

19. var base= [41.04796,- 73.70539,"Purchase College/SUNY"]; var zoomlevel = 13;

20. var precontent = [ [41.19991,-73.72353,"Esther at home","pictureaudio","estherT","es ther.jpg"], [41.05079,-73.70448,"Lego robot ","video","maze"], [40.68992,-74.04460,"Fire works ","video","sfire3"], [41.8442,-89.480,"Aviva in Dixon","picture","avivadixon.jpg"] ];

21. var questions = [ "Where does Grandma Esther live?", "Show the Lego robot navigating a maze.", "Where are great fireworks?", "Find where Aviva played the flute.” ];

22. var questions = [ "Where does Grandma Esther live?", "Show the Lego robot navigating a maze.", "Where are great fireworks?", "Find where Aviva played the flute.” ];

23. Dynamic creation of elements New example inspired by student: http://faculty.purchase.edu/jeanine.meyer/ html5/videogame/videogame.html http://faculty.purchase.edu/jeanine.meyer/ html5/videogame/videogame.html Article and others: http://faculty.purchase.edu/jeanine.meyer/ morehtml5examples.html http://faculty.purchase.edu/jeanine.meyer/ morehtml5examples.html

24. Street view http://faculty.purchase.edu/jeanine.meyer/html5/ mapstreet.htmlhttp://faculty.purchase.edu/jeanine.meyer/html5/ mapstreet.html Set location More realistic example would have user/player make choices or click on screen or ??? My code does Allow for a street view (aka panorama) not existing Note also heading and pitch. EXPERIMENT!

25. Create element Use a template May make substitutions May put into innerHTML Need to addChild Need to position Produce string for style.top and style.left. The strings end in “px”

26. Callbacks In many situations, action is not immediate, aka asynchronous The code sets up an action AND specifies a function (by name or defined as autonomous function) to be called when action is complete. This is the callback sv.getPanoramaByLocation(mtk,2000, processSVData); The function processSVData does the remaining work.

27. Responsive Adaptive Design What if I want this program to work…adapt…be responsive to different window sizes? Various techniques For this, I use percentages in the width and height property values:

28. Other responsive design technique http://faculty.purchase.edu/jeanine.meyer/ In the element, uses @media query and a class col of div.

29. Examine code http://faculty.purchase.edu/jeanine.m eyer/html5/mapstreet.html http://faculty.purchase.edu/jeanine.m eyer/html5/mapstreet.html Note: init function Create the SV object Associative arrays for map and for panorama The target DIVs for map and panorama set differently Global variables Required since not everything is done in the init function

30. NOTE Callbacks are another type of event handling Start or set up event Specify code to handle (respond) to event Applies to other features See next: Geolocation Using percentages and other Responsive Adaptive design techniques applicable to other situations

31. Geolocation This is a standard that is separate from HTML5. The browser uses what it can to determine location. –IP addresses –triangulation using cell phone towers –triangulation using GPS satellites –triangulation using wireless hot spots –?

32. Geolocation example Used with php to send email to someone with 'found' location. http://faculty.purchase.edu/jeanine.meyer/html5/geolocationkmemail.ht ml

33. Re: the php file The file sendemailp.php runs on the server, NOT the client (not the user’s computer). It is written in the php language You can’t look at it in the normal way! You can find it in my HTML5 and JavaScript Projects book in the Library. PLUG: We learn to use php in the Creating Databases course

34. Classwork / homework Catch up Produce your own simple = basic HTML and JavaScript document bringing in a map. Use your own location (and understand how to change it), set zoom and set type (and understand how to change it). Plan and execute [slightly more] complex example.