Google Maps

1
Google Maps

• By Rabirashmi Guha
• CS564 Grad Presentation3rd Dec 2007

Title picture source http//maps.google.com/
2
Outline

• What are Google Maps anyway
• Why use Google Maps anyway
• History behind the Google Maps
• What difference does it make to us
• Trends in the usage of Google Map API
• What are Google Map APIs
• Basic Concepts of an API
• Using Google API
• Advantages of using Google Map API.
• Using a Google Map on our Web Applications
• Google Map MashUps and its use
• Some practical examples of Google Map
• References

3
What is Google Maps

• Definition
• Google Maps (for a time named Google Local) is a
  free web mapping service application and
  technology provided by Google that powers many
  map-based services including the Google Maps
  website Google Ride Finder and embedded maps on
  third-party websites via the Google Maps API
  (Application Process Interface). It offers street
  maps a Route Planner and an urban business
  locator for numerous countries around the world.

4
Clients (Standard Browsers)
Static Images (GIF)
GML View (GML)
INTERNET WEB CLIENTS
HTTP
HTTP
HTTP
WEB SERVER
CGI
Communication Layer
Geospatial Analysis Layer
WGIS (Map Server) WMS (OGC)
Query Engine
Client Side
Component
Server Side Components
GEOSPATIAL DATABASE ACCESS LAYER
SPATIAL
DATABASE
Web GIS Architecture
5
The Google Map page
6
Why use Google Maps anyway

• Integrated business search results - Find
  business locations and contact information all in
  one location integrated on the map. For example
  if you search for pizza in San Jose CA
  locations of relevant listings and phone numbers
  appear on the map. You can also view additional
  information like hours of operation types of
  payment accepted and reviews.
• Draggable maps - Click and drag maps to view
  adjacent sections immediately (no long waits for
  new areas to download).
• Satellite imagery - View a satellite image (or a
  satellite image with superimposed map data) of
  your desired location that you can zoom and pan.
• Terrain maps - View physical features such as
  mountains and vegetation with elevation shading.
  

7
Why use Google Maps anyway contd

• Street View - View and navigate within
  street-level imagery.
• Detailed directions - Enter an address and let
  Google Maps plot the location and driving
  directions for you. Plan a trip by adding
  multiple destinations to your route and click
  and drag the route to customize it. Learn more
  about Google Maps driving directions.
• Double-click to zoom functionality - Double
  left-click to zoom in and double right-click to
  zoom out (Ctrl double-click for Mac users).
• Scroll wheel zooming - Use the scroll wheel on
  your mouse to zoom in and out of the maps.

8
Development History behind the Google Map

• Google Maps was first announced on the Google
  Blog on February 8 2005.15 and was located at
  http//maps.google.com/.
• It originally only supported users of Internet
  Explorer and Mozilla web browsers but support
  for Opera and Safari was added on February 25
  2005. Currently (July 1 2006) Internet Explorer
  6.0 Firefox 0.8 Safari 1.2.4 Netscape 7.1
  Mozilla 1.4 and Opera 8.02 are supported.16
• It was in beta for six months before becoming
  part of Google Local on October 6 2005.
• In early April 2005 an alternate view was
  activated to show Satellite images of the area
  displayed.
• In late April 2005 Google created Google Ride
  Finder using Google Maps.

9
Development History behind the Google Mapcontd

• In late June 2005 Google released the
  Extensibility and customisation. In mid July
  2005 Google began Google Maps and Google Local
  services for Japan including road maps.
• On July 22 2005 Google released Hybrid View.
  Together with this change the satellite image
  data was converted from plate carrée to Mercator
  projection which makes for a less distorted
  image in the temperate climes latitudes.
• In July 2005 in honor of the thirty-sixth
  anniversary of the Apollo Moon landing Google
  Moon was launched.
• In September 2005 in the aftermath of Hurricane
  Katrina Google Maps quickly updated its
  satellite imagery of New Orleans to allow users
  to view the extent of the flooding in various
  parts of that city. (Oddly in March 2007
  imagery showing hurricane damage was replaced
  with images from before the storm this
  replacement was not made on Google Earth which
  still uses post-Katrina imagery.

10
What difference does it make to us

• The Google Map actually allows to combine one
  type of information to a specific latitude and
  longitude and connect that to a display on a map.
  People today are more interested on location
  where and using a Google Map we can display the
  location of just about everything
• There are several examples of popular Google Map
  APIs where people have used the Google Map on
  their websites and displayed important and
  relevant information in a elegant way on a Map.

11
What difference does it make to us...contd

• Some of the most popular examples
• Panoramio.com A website using Google Map API to
  display pictures of a particular place on a map.
  The User can upload pictures for a specific place
  on a map identified with a particular latitude
  longitude.

12
What difference does it make to us...contd

• Wikimapia.org Wiki created by the user
  community a website where anyone can add their
  own content and this is a way of communication

13
What difference does it make to us...contd

• Trulia This another of the popular websites
  which has used the Google Maps for presenting
  their business information in a more elegant way.

14
What difference does it make to us...contd

• onNYturf This is a website where a person having
  some data having some privileges used Google Map
  to display that data.

15
Trends observed in usage of Google APIs

• As we see for the case of onNYturf.com which can
  be the example of a classic API site where there
  are some data owned by someone who has access to
  that data and he presents that data in a map thus
  the information is useful to millions of users
• Then we land on the Wikimapia.com which has an
  entirely user generated data and where any user
  can go and see the data added by another user of
  the world. So it is becoming more and more
  collaborative trend in the usage of the Google
  Map API.

16
The different flavors of Google API

• API Version Changes (Release Notes)  
• Current (v2) 2.93
• Latest (v2.x) 2.94
• Stable (v2.s) 2.73 

17
Google Map API

• What is the Google Maps API
• The Google Maps API lets you embed Google Maps in
  your own web pages with JavaScript. 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.
• Google created the Google Maps API to facilitate
  developers integrating Google Maps into their web
  sites with their own data points. It is a free
  service which currently does not contain ads
  but Google states in their terms of use that they
  reserve the right to display ads in the future.

18
Google Map API concepts

• By using the Google Maps API you can embed the
  full Google Maps on an external web site. The
  Google Maps API is based on JavaScript which
  makes life pretty easy since you dont need to
  worry about installing software. You can directly
  run JavaScript in just about any web browser.
  Knowledge of XML and XSL helps to build a rich
  user interface but its not required.
• Like many other Google web applications Google
  Maps uses JavaScript extensively. As the user
  drags the map the grid squares are downloaded
  from the server and inserted into the page.

19
Google Map API conceptscontd

• When a user searches for a business the results
  are downloaded in the background for insertion
  into the side panel and map - the page is not
  reloaded. Locations are drawn dynamically by
  positioning a red pin (composed of several
  partially-transparent PNGs) on top of the map
  images.
• The technique of providing greater
  user-interactivity by performing asynchronous
  network requests with Javascript and
  XMLHttpRequest has recently become known as Ajax.
  Maps actually uses XmlHttpRequest sparingly
  preferring a hidden IFrame with form submission
  because it preserves browser history. It also
  uses JSON for data transfer rather than XML for
  performance reasons. These techniques both fall
  under the broad Ajax umbrella.

20
Google Map API conceptscontd

• The GIS (Geographic Information System) data used
  in Google Maps are provided by Tele Atlas and
  NAVTEQ3 while the small patches of
  high-resolution satellite imagery are largely
  provided by DigitalGlobe and its QuickBird
  satellite with some imagery also from government
  sources. The main global imagery base called
  NaturalVue was derived from Landsat 7 imagery by
  MDA Federal (formerly Earth Satellite
  Corporation). This global image base provides the
  essential foundation for the entire application.

21
Googles use of Google Maps

• The main Google Maps site includes a local search
  feature finding businesses of a certain category
  in a geographic area.
• Google Ditu Google Ditu was released to the
  public on February 9 2007 and replaced the old
  Google Bendi. This is the Chinese localised
  Google Maps and Google Local services only cover
  China.

22
Googles use of Google Mapscontd

• Google Moon
• In honor of the 36th anniversary of the Apollo 11
  moon landing on July 20 1969 Google took public
  domain imagery of the Moon integrated it into
  the Google Maps interface and created a tool
  called Google Moon.20 By default this tool
  with a reduced set of features also displays the
  points of landing of all Apollo spacecraft to
  land on the Moon. It also included an easter egg
  displaying a Swiss cheese design at the highest
  zoom level which Google has since removed.
  Google Moon was linked from a special
  commemorative version of the Google logo
  displayed at the top of the main Google search
  page for July 20 2005 (UTC) webarchive.org.

23
Googles use of Google Mapscontd
Google Moon
24
Googles use of Google Mapscontd

• Google Ride Finder Google launched an
  experimental Google Maps-based tool called Ride
  Finder tapping into in-car GPS units for a
  selection of participating taxi and limousine
  services. The tool displays the current location
  of all supported vehicles of the participating
  services in major US cities including Chicago
  and San Francisco on a Google Maps street map.

25
Googles use of Google Mapscontd

• Google Transit In December 2005 Google launched
  Google Transit. This is a web application (listed
  in Google Labs) that plans a trip using public
  transportation options. Google Transit launched
  with support for Portland Oregon. Information
  for Eugene Oregon Honolulu Hawaii Pittsburgh
  Pennsylvania Seattle Washington and Tampa
  Florida was added on September 27 200622 with
  more added since including adding cities in
  Canada Europe and Japan. The service calculates
  route transit time and cost and can compare the
  trip to one using a car.
• Google My Maps In April 2007 My Maps was a new
  feature added to Googles local search maps. My
  Maps lets users and businesses such as
  weather.com and Zvents create their own map by
  positioning markers polylines and polygons onto
  a map. The interface is a straightforward overlay
  on the map.

26
Using Google Map API

• The steps involved in using Google Maps API
• Sign up for a free Google Map API key
• Read the Maps API Concepts
• Check some of the Maps examples provided.
• Refer to the Google Maps API Reference.
• You can also have a look at this video of the
  Google Developer Day 2007 conferencehttp//doug.r
  icket.com/gdd2007

27
Using Google Map API contd

• Using the Google Map API is not so difficult
  since it is basically using the scripting
  languages like Javascript XML (Extensible Markup
  Language )VML (Vector Markup Language) GML
  (Geography Markup Language).

28
A simple example

• After signing up for the Google Map API we just
  need to have some initial working knowledge about
  the Google Map API functions and events.
• Let us walkthrough a simple code

29
A simple example contd

•   http//www.w3.org/TR/xhtml1/DTD/xhtml1-strict.
  dtd
        contenttext/html charsetutf-8/   
  Google Maps JavaScript API
  Example    e.com/mapsfileapiampv2ampkeyABQIAAAAaNUXpW
  sbx41ge0RRTV0jDBRXZolEq-1TF3Ogwv02T87kjAdteRQxkx8i
  UJsFMAvFLngWW5e73-Rkjg           
  typetext/javascript    typetext/javascript    function
  initialize()       if (GBrowserIsCompatible())
          var map new GMap2(document.getElementB
  yId(map_canvas))        map.setCenter(new
  GLatLng(37.4419 -122.1419) 13)         
          onloadinitialize() onunloadGUnload()   
  300px 

30
A simple example contd

• Lets take the parts of the code one by one
• Its should look pretty familiar to most of the
  people being a simple HTML code having some
  Javascript code.
• Now lets concentrate on the highlighted codes
• ampv2ampkeyabcdefg           
  typetext/javascriptCode
  explanation Loading the Google Maps API
• The http//maps.google.com/mapsfileapiv2keya
  bcdefg URL points to the location of the
  JavaScript file that includes all of the symbols
  and definitions you need for using the Google
  Maps API. Your page must contain a script tag
  pointing to this URL using the key you received
  when you signed up for the API. In this example
  the key is shown as abcdefg.

31
A simple example contd

• 300px
• Code Explanation Map DOM Elements
• The JavaScript class that represents a map is the
  GMap2 class. Objects of this class define a
  single map on a page. (You may create more than
  one instance of this class - each object will
  define a separate map on the page.) We create a
  new instance of this class using the JavaScript
  new operator.
• When you create a new map instance you specify a
  DOM node in the page (usually a div element) as a
  container for the map. HTML nodes are children of
  the JavaScript document object and we obtain a
  reference to this element via the
  document.getElementById() method.

32
A simple example contd

• map.setCenter(new GLatLng(37.4419 -122.1419)
  13)
• Code Explanation Initializing the Map
• Once weve created a map via the GMap2
  constructor we need to do one more thing
  initialize it. This initialization is
  accomplished with use of the maps setCenter()
  method. The setCenter() method requires a GLatLng
  coordinate and a zoom level and this method must
  be sent before any other operations are performed
  on the map including setting any other
  attributes of the map itself.

33
A simple example contd

• 
  
• Code Explanation Loading the Map
• While an HTML page renders the document object
  model (DOM) is built out and any external images
  and scripts are received and incorporated into
  the document object. To ensure that our map is
  only placed on the page after the page has fully
  loaded we only execute the function which
  constructs the GMap2 object once the
  element of the HTML page receives an onload
  event. Doing so avoids unpredictable behavior and
  gives us more control on how and when the map
  draws.

34

• The end result is a cool map on my page
  http//voyager.cs.bgsu.edu/cs464/cs464n1/index2.ht
  ml

35
Some changes to the code before gives us this page
See now there is this arrows for moving on the map
36
But everything has pros and cons

• Disadvantages of Google Map
• Can I use Google Maps in my non-Web application
  No. The Google Maps API is currently available
  only for websites.
• Does it uses Geocoding
• No it uses Latitude and Longitude. But
  there are competitors in the market like
  Yahoo!Maps who uses Geocoding Services for its
  Map API.
• But there are more advantages of using a Google
  Map than disadvantagesLets see what they are

Source http//en.wikipedia.org/wiki/Geocoding
37
How Google Maps help us

• Definitely adding a piece of Map only enhances
  the way of representation of useful data. People
  love to know Where
• and How and what better than a Map!!
• More value is added to the information on you web
  page when you also provide a location people
  get the value of their money and time they spent
  to visit your website.
• International Map Data Coverage Details - The
  Google Maps team is constantly pushing new map
  data out and increasing our international
  coverage.

38
Some of the cool uses of Google Map

• HousingMaps Craigslist apartment listings
  plotted on Google Maps
• Found City A community-generated map of
  interesting places in New York City
• Google Sightseeing A blog that shows the best
  tourist spots in the world via Google Maps
  satellite imagery.
• Google-Traffic.com Maps traffic data onto
  Google Maps
• Google Maps Wallpapers Merges Google Maps
  satellite tiles to produce wallpaper or a
  poster
• Cheap Gas Find cheap gas prices powered by
  gasbuddy and Google Maps

39
Comparable services

• Ask.com Maps
• Géoportail (A French rival offering detailed
  aerial (photographic) pictures of French
  territories)
• Map24
• MapQuest
• Multimap.com
• Seat Pagine Gialle A Italian competitor offering
  detailed satellite pictures of Italian
  territories and navigable street level panoramas
  of Rome (very similar to street view).
• Terralink International
• Windows Live Local (Microsofts mapping service
  with road maps and aerial/satellite imagery)
• TerraServer-USA (Public domain (older than five
  years) satellite imagery via Microsoft servers)
• Virtual Earth (The original Microsoft map
  service)
• Yahoo! Maps
• MapFan A MapQuest equivalent for Japan)

40
MashUps Mash it Up!!!

• What is a Mash Up anyway
• In Software Development a MashUp is a web
  application that combines data from more than one
  source into a single integrated tool an example
  is the use of cartographic data from Google Maps
  to add location information to real-estate data
  from Craigslist thereby creating a new and
  distinct web service that was not originally
  provided by either source. It just mixes the
  information from the different APIs across the
  Internet.
• source http//en.wikipedia.org/wiki/Mashup_
  28web_application_hybrid29
• Mash Up originally referred to the practice in
  pop music (notably hip-hop) of producing a new
  song by mixing two or more existing pieces.
• source http//en.wikipedia.org
  /wiki/Mashup_28web_application_hybrid29

41
The functional diagram for a typical Map MashUp
Source picture http//www.javaworld.com/javaworld
/jw-01-2006/jw-0116-google.html
42
Some of the most popular Map Mash Up

• Wii Seeker A mashup to help consumers locate a
  Nintendo Wii. Provides retail addresses
  locations shipment dates and local ebay
  auctions.
• APIs Amazon e-Commerce
  Google Maps and eBay

43
Some of the most popular Map Mash Upcontd

• Flash Earth Zoom able mashup of Google Maps
  Virtual Earth and other satellite imagery through
  a Flash application. Try rotating the compass or
  building a permanent link to a location.
• APIs Google Maps Microsoft
  Virtual Earth NASA Yahoo! Maps
• OpenLayers

44
Some of the most popular Map Mash Upcontd

• 1001 Secret Fishing Holes Over a thousand
  fishing spots in national parks wildlife
  refuges lakes campgrounds historic trails etc.
  
• APIs Google
  Maps

45
References

• http//www.abc.net.au/news/indepth/featureitems/s1
  432602.htm
• Google Earth FAQ (Google Earth and Google Maps
  use the same imagery)
• http//blumenthals.com/blog/p75comments
• http//www.housingmaps.com/
• http//www.gooffcampus.com/
• http//www.ratemyapartments.com/
• Google Maps API - Terms of use.
• Google Maps API key.
• Yahoo! Maps API in-depth review
• Google Maps announcement on Google Blog.
• Google Maps Help
• House panel Why did Google airbrush history.
  Associated Press (2007-04-31).)
• http//mars.google.com/
• Google Maps adds subway stops building outlines
  to cities CNET. 
• http//moon.google.com/
• http//www.google.com/mars/about.html
• http//groups.google.com/group/Google-Maps-API/web
  /api-version-changes