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

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 http://faculty.purchase.edu/jeanine.meyer/morehtml5examples.html

Scroll down to Google Maps API examples…

First one is find test: http://faculty.purchase.edu/jeanine.meyer/basicmaptest.html

http://faculty.purchase.edu/jeanine.meyer/morehtml5examples.html

http://faculty.purchase.edu/jeanine.meyer/morehtml5examples.html

http://faculty.purchase.edu/jeanine.meyer/basicmaptest.html

http://faculty.purchase.edu/jeanine.meyer/basicmaptest.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

http://faculty.purchase.edu/jeanine.meyer/html5/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

http://faculty.purchase.edu/jeanine.meyer/html5/eyesfollowrecord.html

http://faculty.purchase.edu/jeanine.meyer/html5/eyesfollowrecord.html

Reprise on Google Map (or any) API

Using English and computer jargon• bring in / connect with Google

– JavaScript: external <script> 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: http://code.google.com/apis/maps/documentation/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.MarkerThis 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 <style> 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

• <style> element in <head> 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 <body>

<video id="maze" …> … </video>• 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)<video class="fix" …>

• 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.

Documents

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