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 Usage limit 1,000 excess map 

loads 

(per day) (in U.S. dollars) 

• JS Maps API v2 25,000 $1.00 

• JS Maps API v3 25,000 $0.50 

• Static Maps API 25,000 $0.50 

• Street View Image API 25,000 $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 

1. Familiar with JavaScript 

2. Declare the application as HTML5 

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


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/Google- 

Maps-API 

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

Google Maps API for Flash(Deprecated): 

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


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) GMarker (Refs) 

GPolyline (Refs) GIcon 

GEvent GXmlHttp 

GXml GXslt 

GPoint GSize 

GBounds

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!

An Introduction of Google Map and Google Earth

Create successful ePaper yourself

Delete template?

Save as template?