Programming games Examples: Audio example. Google Maps api. Classwork: show more complex video. Classwork/Homework: Find place (lat and long) for basic Google Maps API. Build more complex maps project.

Basic audio example Demonstrate Need to acquire audio. Use Miro Video Converter (or other tools) to produce mp3 and wav versions (assuming you didn't start with wav version. Do produce an mp3 version). You can modify the names to make them simpler. Write HTML5 –note: I added an image. You can add whatever you want.

playaudio.html Esther at the piano Your browser does not accept the audio tag.

Recap: Terminology HTML has elements. Element defined by opening and closing tags. Elements are within elements. The video element has a video tag, 3 source tags/elements, content to give message for non- compliant browsers, closing video tag. The video and the source tags contain attributes.

Note If you understand general idea of elements being defined by tags Attributes (aka properties) –Some attributes specific to the type of element and –Some not: any element can have name or id You can quickly get comfortable with new elements…

Next Google Maps API –Basic example –Not so basic example Decide on your final project. May use video, and/or audio, and/or Google Maps API, or anything else.

Preparation for mapping How to designate a location? Latitude: degrees, parallels to equator, which is the zero position. North pole 90, South pole -90 longitude: degrees, measured from Greenwich meridian—this is an arbitrary decision made many years ago. Longitude lines called meridians.

How to get? How to get this? –New Google maps: lat long pop up window (BE PATIENT.) –Classic Google Maps: On lower left, click on Maps Labs and enable drop lat lng tool tip marker. Then, click and shift to get lat, long values. This requires Classic google maps. –Look up various ways (this goes to Google) Also geolocation and using Google Maps with addresses.

Google Maps Application Programming Interface An API provides ways to access functionality –Defines objects, which have methods (functions) and attributes (properties) For HTML and JavaScript, –add an external script element –make use of methods and attributes Documentation is quite good. –Not e: we will skip getting a key.

To bring in a Google Map Note: this is dynamic: it isn't an image of a map, but something you can click on, pan, use controls. Need to set up a place to put the map. Need to specify options. –This is done using an associative array: array with named elements, not numbers as indices.

Objects An HTML document is described by the Document Object Model. –Objects (code and data) Attributes (aka properties) that are values Methods that are functions to be invoked using the properties of the objects Google Maps Application Programming Interface IS a set of objects— We create objects using constructor methods Access attributes and invoke [other] methods Including addEventListener Use a script element referencing external file

Remember Very first html program used Date() Constructed a Date object To save the Date object, can use today = new Date(); Used new Array() to create an Array object. To write something on document: document.write( … );

Map options center of map: given as a Google Maps API latlng object. type of map: given as a Google Maps API constant: TERRAIN, ROADMAP, SATELLITE zoom level: number more…

HTML document in in

somewhere in the code // Determine the base location: replace ??? 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);

basic example

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

Assignments Basic Google Maps API Determine latitude and longitude value. Create your basic Google Maps API example. Produce second basic example with different location, zoom, type. Produce your own SOMEWHAT more complex Google Maps example. You can do more for your final project.

Teaser Will show example combining Google Maps API and video and audio Consult HTML5 and JavaScript Projects other…

Extra credit Find discussion on the different video formats, including patent issues. Read, summarize and put in working link as post on moodle.

Another extra credit opportunity …and a good thing to do Determine the size and compare of your video files and audio files –Original (probably MOV or AVI) –webm –mp4 –ogg (ogv) –wav –mp3 Make a posting on the Introductions, etc. forum on moodle

Extra credit Make posting on [old] controversies involving Google gathering video for Street View (in Europe). Make posting on RECENT Net Neutrality rulings