An Introduction of Google Map and Google Earth

An Introduction of Google Map and Google Earth Henry H.M. Huang, Ph.D.

Summary  The basics of the Google Maps interface, the fundamentals of

the Google Maps API, and how to organize and translate existing information into a format that can successfully be used within Google Maps and Google Earth applications.

Summary - Google Earth • Google Earth is a standalone application, rather than a web

site solution like Google Maps, and offers a completely new set of methods for describing information. Google Earth is a desk-top application available for Windows and Mac OS X that enables you to browse Google Earth images in a more dynamic environment. Using Google Earth you move about the earth in 3D, moving and manipulating the Google Earth data in real time. This provides additional information that would be difficult to represent within the Google Maps interface, such as “tilting” the earth so that you can see the relative height of different areas of land.

Summary  Also, it will be introduced that the initial and potential

applications of Google Earth in the researches of seismic signals processing and earthquake events classification for event and hazard visualization.  Google Maps and Google Earth exist 7 years since 2005 advent.  Completely based on AJAX(an acronym for Asynchronous JavaScript and XML)

3 main maps web service providers  1. Google Maps and Google Earth  (The first public access GIS, since 2005)

 2.Yahoo! Maps (following Google)  Based on Adobe Flash. Traffic Informations.

 3. Microsoft Virtual Earth (following Google and Yahoo!)

Configure Google Maps API developing Environment  1. AJAX-based Google Maps API normally needs only a web

explorer. However, for many extension applications, serverside service needed.  2. One possible solution: WAMP – Windows+Apache+MySQL+PHP.  http://sourceforge.net/projects/wampserver/

Configure Google Maps API developing Environment — Cont.  2.1 Download WAMP from:  http://sourceforge.net/projects/wampserver/

Then install “wampserver2.2e-php5.4.3-httpd2.2.22mysql5.5.24-32b.exe”

 2.2 Add GD2 graphical library. “D:\wamp\bin\php\php5.4.3\ext\php_gd2.dll” existed? Otherwise download from: http://php.net/

2.3 Apply Google Maps API Key (Optional)

Google Maps Interface • Needing a Google account • Turn on Google Maps API v3 Service

• May incur fee. Such as:

• Service

loads

Usage limit (per day)

• JS Maps API v2

• JS Maps API v3 • Static Maps API • Street View Image API

1,000 excess map (in U.S. dollars)

25,000 25,000 25,000 25,000

$1.00 $0.50 $0.50 $0.50

Google Maps Interface • Google Maps has a wide array of APIs that let you embed the

robust functionality and everyday usefulness of Google Maps into your own website and applications, and overlay your own data on top of them. – Maps JavaScript API

– Maps Image APIs – Google Earth API

– Places API – Maps for Business – Web Services

Maps JavaScript API • The Google Maps Javascript API lets you embed Google

Maps in your own web pages. Version 3 of this API is especially designed to be faster and more applicable to mobile devices, as well as traditional desktop browser applications.

• The API provides a number of utilities for manipulating maps

(just like on the http://maps.google.com web page) and adding content to the map through a variety of services, allowing you to create robust maps applications on your website.

Two simple samples – the 1st map center at Beijing •



•



•



•



•



•

html { height: 100% }

•

body { height: 100%; margin: 0; padding: 0}

•

#map_canvas { height: 100% }

•



•



•



•



• •

function initialize() {var mapOptions = {

•

center: new google.maps.LatLng(39.9075, 116.397222),

•

zoom: 8,

•

mapTypeId: google.maps.MapTypeId.ROADMAP

•

};

•

var map = new google.maps.Map(document.getElementById("map_canvas"),

• •

mapOptions); }

•



•



• • •





The 1st map center at Beijing

Two simple samples – the 2nd map center at Calgary

html { height: 100% } body { height: 100%; margin: 0; padding: 0} #map_canvas { height: 100% } function initialize() {var mapOptions = { center: new google.maps.LatLng(51.05, -114.085278), zoom: 8, mapTypeId: google.maps.MapTypeId.ROADMAP

}; var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions); }





The 2nd map center at Calgary

Basic Steps to use Google Maps JavaScript API v3 Familiar with JavaScript 2. Declare the application as HTML5 1.

3. Obtaining an API Key

4. Loading the Google Maps API 5. Map DOM Elements 6. Map Options 7. The Map Object

8. Loading the Map

Usage Limits and Billing  Almost Free for use by any person or any

organization.  Incurring fee only when a large volume of access: 25 000 map loads per day for more than 90 consecutive days.  Non-profit organizations are exempted from the Maps API usage limits

Google Maps API Usages 1.

Basics search and Locale Business

Search for string “Calgary”: http://maps.google.cz/maps?q=Calgary Locale Business center Add : http://www.google.com/local/add 2. Google Maps on Mobile or iPhone Download Google Maps for mobile to one’s phone from http://www.google.com/mobile/maps/

Google Maps API Usages – Cont. 3. Google Maps Static

The Google Static Maps API lets you embed a Google Maps image on your webpage without requiring JavaScript or any dynamic page loading https://developers.google.com/maps/documentation/staticma ps/ - API documentation 4. Basic Static Map Insert http://maps.google.com/staticmap?center=51.05,114.085278&zoom=12&size=350x200

Google Maps API Usages – Cont. 5. Documentation & APIs

Main Documentation Page: https://developers.google.com/maps/ Google Maps API Blog: http://googlemapsapi.blogspot.com/ Discussions:https://groups.google.com/forum/?fromgroups#!forum/GoogleMaps-API

KML format:

https://developers.google.com/kml/

Google Maps API for Flash(Deprecated): https://developers.google.com/maps/documentation/flash/

Google Maps API Usages – Cont. 6. Mapplets Mapplets are mini-applications that run within Google aps(Deprecated):

https://developers.google.com/maps/documentation/mapplets/

7. Related Pages Google Maps Mania: http://googlemapsmania.blogspot.ca/ OpenLayers makes it easy to put a dynamic map in any web page: http://openlayers.org Google Earth view satellite imagery etc: http://earth.google.com or

http://www.google.com/earth/index.html

Basic Components of a Google Maps Application XHTML (Extensible HTML) VML (Vector Markup Language) Styles and Elements XML (Extensible Markup Language) JavaScript

Google Maps API Constituents 1. Overlays(refs) 2. Events(refs) 3. Controls(refs) 4. Styles(refs) 5. Layers(refs) 6. Map Types(refs)

Google Maps API Constituents – Events 2 types of events (1)User events – 'click’, 'dblclick', 'mouseup’, 'mousedown’, 'mouseover' , 'mouseout‘… (2) MVC state change Information Windows Controls

Events – Example 1: Fixed the Center of Map

Events – Example 2: Click and Re-Centerize

Events – Example 3: Message Boxes

Events – Example 4: Display Zoom Level

Events – Example 5: DOM Listener

Google Maps API Constituents – 3. Controls

Google Maps API Constituents– Map Types (1) Basic Map Types: •MapTypeId.ROADMAP: the default road map view •MapTypeId.SATELLITE: Google Earth satellite images •MapTypeId.HYBRID: a mixture of normal and satellite views •MapTypeId.TERRAIN: a physical map based on terrain information. The map type in use can be modified by setting its mapTypeId property, either within the constructor via setting its Map options object, or by calling the map's setMapTypeId() method. (2) 45° Imagery: Enabling and Disabling 45° Imagery; Rotating 45° Imagery. (3) User-defined Map Types……

Rotating 45° Imagery Example

The Google Maps Classes GMap(Refs) GPolyline (Refs) GEvent GXml GPoint GBounds

GMarker (Refs) GIcon GXmlHttp GXslt GSize

Google Earth(refs) 

Explore the world from anywhere Whether on your computer or on the go, see the world the same way you’re used to seeing it, in 3D. Explore Google Earth in three ways: Desktop, Web, Mobile Highlights in Google Earth: Moon, 3D Buildings, Mars, Sky, Ocean, Historical Imagery http://www.google.com/earth/explore/products/



Virtual adventure Take a trip to a faraway place, stroll through a 3D forest and travel back in time. http://www.google.com/earth/explore/showcase/

Google Earth Interface

Google Earth API(Refs)  Google Earth API Reference (Refs)

 Google Earth API Developer's Guide(Refs)  Code Samples(Refs)  More Resources(Refs)

Google Earth in Seismology Real-time Earthquakes(Refs)

Using Google Earth to visualize volcanic and seismic activity Visualize Earthquake Data In Google Earth

Real-time Earthquakes

That’s all!

Thank you!