an introduction of google map and google earthpages.cpsc.ucalgary.ca/~marina/695/huang_an...
TRANSCRIPT
Henry H.M. Huang, Ph.D.
An Introduction
of Google Map and Google Earth
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, server-
side 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.22-
mysql5.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 • <!DOCTYPE html>
• <html>
• <head>
• <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
• <style type="text/css">
• html { height: 100% }
• body { height: 100%; margin: 0; padding: 0}
• #map_canvas { height: 100% }
• </style>
• <script type="text/javascript"
• src="http://maps.googleapis.com/maps/api/js?key= AIzaSyA1Pk8zU6NzM_FE4MzASV4fF_tRXzUP1jI&sensor=true">
• </script>
• <script type="text/javascript">
• 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); }
• </script>
• </head>
• <body onload="initialize()">
• <div id="map_canvas" style="width:100%; height:100%"></div>
• </body>
• </html>
Two simple samples – the 2nd map center at Calgary <!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0}
#map_canvas { height: 100% }
</style>
<script type="text/javascript"
src="http://maps.googleapis.com/maps/api/js?key= AIzaSyA1Pk8zU6NzM_FE4MzASV4fF_tRXzUP1jI&sensor=true">
</script>
<script type="text/javascript">
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); }
</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="width:100%; height:100%"></div>
</body>
</html>
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/staticmaps/
- 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/Google-
Maps-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
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……
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!