Google Earth and Google Maps API

Introduction Google Maps Google Earth Examples

Google Earth and Google Maps API

May 6, 2009

Distributed Systems II, CEID, 2008



Outline

• User interface issues related to the project • Google Maps - Short Tutorial • Google Earth - Short Tutorial • Concepts that we could use, examples - where to go from here




In general...

• The game will (hopefully) take place in multiple places on Earth • Geo-location information will be important in the game: • during the course of a battle - dynamic • off-line

• We need a way to present such related information




World Site

Some examples - cases where we could use such geolocation information:

• Presentation of all battles on a world map • Presentation of statistics of specific battles, online or offline • Replaying of old battles • Study battle mechanics




Battle Engine

Some example cases where we could use such information:

• Present info only about a specific battle • Hidden treasures - weapons • Players may carry mobile phones - PDAs • Local authorities- administrators may exist and watch the game or set parameters




Other important issues

• Dynamic changes during the game • Load on the client - not on the server. How? • Possible client types (PCs, PDAs, mobile phones) • Integration with other parts of the project




A possible option...

Use Google Maps and Google Earth for a number of (really good) reasons:

• Supported by Google :) • Advanced visualization capabilities • Nice API • Huge user-base, existing code • Visualization load on the client’s side (and in some special cases on Google’s servers)




Google APIs Google Maps in general Let’s start playing

Google APIs

Google Maps is only one of Google APIs...

• Google Maps, Google Earth, Google Calendar, Google *... • Lots of platforms supported • Constantly updated with new features





Google Maps in general

• Google Maps is a free web mapping service application and technology provided by Google • It offers, among others, street maps, route planner, an urban business locator for numerous countries (including Greece) • Street, satellite and hybrid image views by default • Third-parties (like us) use Google Map services via the Google Maps API. • Google Mars, Google Moon...





Google Maps API

Google created the Google Maps API to facilitate developers integrating Google Maps into their web sites

• It is currently a free service • Javascript, XML • Concept: add the Google JavaScript code to your page, then use the API’s or custom Javascript functions to manipulate visualization • All major browsers (IE, Firefox, Opera, Safari) & Google Maps mobile (available for most web-enabled mobile phones)





First of all...

• You need a Google Maps API key to use the API on your website. You must have a Google Account to get a Maps API key, and your API key will be connected to your Google Account • There’s no limit to the number of keys you may obtain under a single account • The key check is skipped when the file is read from your desktop • A single Maps API key is valid for a single ‘‘directory’’ on your web server





Your first map... Google Maps JavaScript API Example //





...the result...





Latitude - Longitude • Latitude: gives the location of a place on Earth north or south of the equator • Longitude: left and west hemisphere, Greenwich meridian • Degrees, minutes of arc, seconds of arc. A degree contains 60 minutes of arc, a minute contains 60 seconds of arc. • Latitude (-90, 90), Longitude (-180, 180) Distributed Systems II, CEID, 2008




Customizing your map... map.setCenter(new GLatLng(38.288783, 21.788072), 13);

map.setCenter(new GLatLng(38.288783, 21.788072), 16);





Customizing your map map.setMapType(G_SATELLITE_MAP);

map.openInfoWindow(map.getCenter(), document.createTextNode("Hello, world"));





Basic objects





Example - Adding controls to your map

All of the controls are based on the GControl object.

• GLargeMapControl - a large pan/zoom control used on Google Maps. Appears in the top left corner of the map by default • GSmallMapControl - a smaller pan/zoom control used on Google Maps. Appears in the top left corner of the map by default • GSmallZoomControl - a small zoom control (no panning controls) used in the small map blowup windows used to display driving directions steps on Google Maps • GScaleControl - a map scale • etc.





map.addControl(new GLargeMapControl());

var point = new GLatLng(x, y); map.addOverlay(new GMarker(point));





Custom icons





Polylines - Polygons A GPolyline consists of a series of points and creates a series of line segments that connect those points in an ordered sequence. GPolygons are designed to define regions within a closed loop. var polyline = new GPolyline([new GLatLng(x,y), new GLatLng(z,a)], "#ff0000", 10); map.addOverlay(polyline);





Overlays

If you have an image that you wish to place on a map, use a GGroundOverlay object. var boundaries = new GLatLngBounds(new GLatLng(x,y), new GLatLng(z,a)); var oldmap = new GGroundOverlay("http://www.xyz.com/godzilla.jpg", boundaries); map.addOverlay(oldmap);





Other examples





Other examples





Other services provided by the API

• XML and Data parsing • Geocoding • KML / GeoRSS files • Driving Directions





Static Google Maps service The Google Static Maps API lets you embed an image generated by Google Maps on your webpage without requiring JavaScript or any dynamic page loading.

• Useful when no javascript support is available • Issueing a query as a network address (http://maps.google.com/staticmap?...)




KML Basics

KML - Keyhole Markup Language

Keyhole Markup Language (KML) is an XML-based language schema for expressing geographic annotation and visualization on web-based online maps (2d) and earth browsers (3d) KML was developed for use with Google Earth, which was originally created by Keyhole, Inc, acquired by Google in 2004 KML files specify a set of features for display in Google Earth, Maps and Mobile, or any other 3D earth browser implementing the KML encoding Not all KML information can be viewed in Google Maps or Mobile KML files are very often distributed as KMZ files, which are zipped KML files




KML Basics

Current KML specification version is 2.2 You can use either Google Earth or a text editor to author KML files The simplest kind of KML documents can be authored directly in Google Earth




KML Basics

Placemarks

A placemark marks a position on the Earth’s surface Simple placemark Attached to the ground. Intelligently places itself at the height of the underlying terrain. -122.0822035425683,37.42228990140251,0




KML Basics

Placemark description - HTML We can use HTML tags inside the description of placemarks to produce more useful results Computer Engineering and Informatics Department
University of Patras, Building B
]]>




KML Basics

Folders

All KML elements inside a KML file can be organized using folders Really helpful, allows for additional interface capabilities




KML Basics

Ground Overlays

Ground overlays enable us to place additional images on the Earth’s surface Large-scale overlay on terrain Overlay shows Mount Etna erupting on July 13th, 2001. http://code.google.com/apis/kml/documentation/etna.jpg 37.91904192681665 37.46543388598137 15.35832653742206 14.60128369746704 -0.1556640799496235




KML Basics

Paths

A path is created by a element, similar to GPolyline in Google Maps. 1 1 absolute -112.2550785337791,36.07954952145647,2357 -112.2549277039738,36.08117083492122,2357 -112.2552505069063,36.08260761307279,2357 -112.2564540158376,36.08395660588506,2357 ... -112.2644963846444,36.08627897945274,2357 -112.2656969554589,36.08649599090644,2357




KML Basics

Polygons

Polygons are used to create all kinds of shapes and more complex structures (eg. buildings) Simple polygons can be created directly with Google Earth More complex polygons must be created using other software (Sketchup) Various parameters can be controlled, including color, opacity, etc.




KML Basics

Screen Overlays

Screen Overlays enable us to place images on the main window of Google Earth (not on Earth’s surface) Useful to include map legends and other useful information Absolute Positioning: Top left http://code.google.com/apis/kml/documentation/top_left.jpg




KML Basics

Network Links Network links give you the power to serve content from a remote location A network link contains a element with an (a hypertext reference) that loads a file, that could be eg.:

• An image file used by icons in icon styles, ground overlays, and screen overlays • A model file used in the element • A KML or KMZ file loaded by a Network Link Network links can be used to split one large KML file into smaller, more manageable files on the same computer.




KML Basics

Network links - Refresh based view

Network links can be viewed single-time or periodically If a network link is set to refresh periodically it polls the link’s server for a given period The coordinates of the area that the user is currently watching in Google Earth are also sent Eg., if you have a database of geographic information, you can extract the coordinates of the viewer and make a call to the database for the data specific to the view




KML Basics

3D models in Google Earth

As stated before polygons can be used to create 3D models in Google Earth This method allows for a number of features, but is not always suitable Collada 3D models can also be used Not as parameterizable, but easier to handle than 3D polygon models Also produced with Sketchup




KML Basics

Sketchup

• Google SketchUp is software that you can use to create, modify and share 3D models • Closely coupled with Google Earth • Available for free • Simple to use, lots of capabilities • Can extract both to 3D polygon models and Collada models (and other types as well)





KML Basics



KML Basics

3D Warehouse

Online repository of 3D models Two types of 3D models found in the Google 3D Warehouse: geo-referenced and non-geo-referenced

• Geo-referenced include buildings or other real world objects that directly map to Google Earth • Non-geo-referenced includes objects that are more generic or not related to specific location




KML Basics

Time and animation

Any Feature in KML can have time data associated with it Restrict the visibility of the data set to a given time period or point in time -> Animation When Google Earth opens a KML file that contains a Feature with a TimePrimitive element, it displays a time slider Users can use the sliding bar or press the play button to animate




London Eye - Animation




Settings




Game items




Where to go from here

• Google Maps API: http://code.google.com/apis/maps/ • KML reference: http://code.google.com/apis/kml/documentation/ • Google Sketchup: http://www.sketchup.com/ • 3D Warehouse: http://sketchup.google.com/3dwarehouse/

