Programming Games Google Map API examples. CSS. Classwork/homework: Catch up. Upload work. Show your [more] complex Google Maps API example. Plan your original project. Post proposal.

Google maps API examples Go to orehtml5examples.html orehtml5examples.html Scroll down to Google Maps API examples… First one is find test: sicmaptest.html sicmaptest.html

Experiment with rgba My spotlight put canvas on top of map. You can make drawings on canvas, including using drawImage to bring in an image from an image file, and draw on top of it.

[very annoying] Buzzing bee ml5/eyesfollowrecord.html Mouse cursor Audio Record positions and then move element on path Coding to adapt to devices Note: bee is displayed by two different mechanisms: cursor and moving element

Reprise on Google Map (or any) API Using English and computer jargon bring in / connect with Google –JavaScript: external element –Processing: import –other: include Invoke functions and access values –invoke object methods and reference object properties. Create new things –use term new with constructor method Use correct terminology, especially units –latitude longitude, specifically latLng object

Google Maps API Look at Google Maps API V3 tutorial: n/javascript/tutorial.html n/javascript/tutorial.html Prepare your own application –your location, map type, zoom Also title, icon, …. experiment with changing options You can build a more elaborate example for your original project –Look at my examples. can add to existing project –Look at examples in tutorial

Note APIs are and will become increasingly important. APIs often have objects –Provides methods and attributes (properties) –also events and ways to set up event handling –need to understand (manage) the JavaScript events and the API events. You need to be able to read sources.

Pop quiz Look on-line and write code to produce a marker at a position stored as a latlng object in a variable named here. Your code already has created a map stored in a variable named map. The title should be "Here you are!" Mark center with your own icon, say an image in the file littlex.png.

blah = new google.maps.Marker( {position: here, title: “Here you are”, map: map }); This uses the term new to create a new object, using the method google.maps.Marker This method takes an associative array: a set of named options. The value used for position is held in the variable here and the value for map (which map to place the marker) is the one in the variable map.

Video To start video to be invisible and then play at specific time –perhaps as reward at a point in the game –perhaps to be a state in the virtual something –in the map portal applications, when player clicks near enough to a location –? Use Cascading Style Sheet and JavaScript

CSS overview The section has directives for specific elements by id OR types OR classes video { } all videos img { } all img elements #place { } the single element with id="place".notes { } all the elements that have class="notes"

Cascading Style Sheet element in section Styles start with identifier indicating what is to be styled. Can be an element type or a class or an id. So the following applies to all video elements video {display:none; position:relative;}

HTML and JavaScript In the … In the code, perhaps the init function: mazev = document.getElementById("maze"); In the code, when you want the maze video to play: mazev.style.display="block"; mazev.currentTime = 0; mazev.play();

CSS and JavaScript CSS specify absolute position or relative to where element is in the body element and JavaScript can change –e.style.left = ….; e.style.top = ….; CSS has z-index and JavaScript has zIndex

CSS rotating You could make all the videos that you need to rotate have a class attribute (YOU name it) In CSS.fix {-webkit-transform: rotate(90deg); -moz-transform:rotate(90deg); -o-transform:rotate(90deg); transform:rotate(90deg);} Note: you may need to do some positioning, also…

Classwork / homework Update your website –Upload all necessary files. This includes all the video files. –Modify your index.html Start thinking about final project. –Your work! –You can use Google Maps API. –If you want to use another API, discuss with me first to get approval. Post proposal on moodle proposal forum. Check for my approval and advice.