3 of 62

Google Maps Coverage in Philippines

For users in the Philippines, Google Maps only has satellite tiles and some hybrid tiles.

It does not have:

- Map Tiles

- Geocoding

- Driving Directions

- Local business listings

- Street View

- Localized Controls

4 of 62

Google Map Maker

5 of 62

What is Google Map Maker?

Empowers users to map and share knowledge about neighbourhoods they know best and care about

Every user can add and edit map features and contribute local information, making both mapping and deep maps possible for everyone, everywhere

Users can add, edit and moderate most features on the map including roads, lakes, parks, points of interest, businesses, cities and localities.
User-created maps and local data are visible and searchable immediately by the community

Google Map Maker pushes innovation on the Geoweb

Users can collaboratively map their neighbourhoods with other users and moderate entries by their peers
Automatic moderation technology identifies users with high trust and edits go live instantly
User ranking and other technology keeps the map clean, even when users add large amounts of data to the same place

6 of 62

Live Demo

Google Map Maker

7 of 62

Example: Manila, Phillipines

Manila: Before

Manila: After

8 of 62

What are a few use cases for Google Map Maker?

Map neighbourhoods that they care about (where they grew up, where they went to school, etc.)

Put small local businesses on the map and help other users find them

Map rural and suburban areas in the Vietnam – many of which do not yet have comprehensive online maps

9 of 62

Where is Google Map Maker launched?

Vietnam + 121 other countries

10 of 62

Google Map Maker Resources

Google Map Maker YouTube channel: �http://www.youtube.com/user/GoogleMapMaker

Google Map Maker help pages: �http://sites.google.com/site/mapmakeruserhelp/

Google Map Maker forum �http://groups.google.com/group/google-mapmaker

Start here! http://mapmaker.google.com

11 of 62

Maps API 101

The crash course

12 of 62

Google Maps 101: The Basics

The Google JS Maps API lets you create interactive maps using just JavaScript, HTML, and CSS.

13 of 62

Google Maps 101: Adding a map to your page

1. Create/size a map DIV
2. Load the Maps API JS
3. Create + center the map

Javascript

Key:

<html>

<head>

function createMap() {

var map = new GMap2(document.getElementById("map"));

map.setCenter(new GLatLng(37.44, -122.14), 14);

}

</script>

</head>

</body>

</html>

CSS

HTML

14 of 62

Google Maps 101: Adding a marker

var marker = new GMarker(new GLatLng(lat, lon));

1. Initialise the marker

GEvent.addListener(marker, 'click', function() {

marker.openInfoWindowHtml('<h1>Hi!</p>');

});

2. Make a bubble pop up when clicked

map.addOverlay(marker);

3. Display the marker

Javascript

Key:

CSS

HTML

15 of 62

Google Maps 101: Adding a line

var latOffset = 0.001;

var lngOffset = 0.001;

1. Initialise lat/lon offset from our marker (optional)

var line = new GPolyline([new GLatLng(lat, lng-lngOffset),

new GLatLng(lat, lng+lngOffset)]);

2. Create the line

map.addOverlay(line);

3. Display the line

Javascript

Key:

CSS

HTML

16 of 62

Google Maps 101: Adding a polygon

var polygon = new GPolygon([

new GLatLng(lat, lng - lngOffset),

new GLatLng(lat + latOffset, lng),

new GLatLng(lat, lng + lngOffset),

new GLatLng(lat - latOffset, lng),

new GLatLng(lat, lng - lngOffset)],

'#f33f00', 5, 1, '#ff0000', 0.2);

1. Create the polygon and set line / fill properties

map.addOverlay(polygon);

2. Display the polygon

Javascript

Key:

CSS

HTML

17 of 62

Google Maps 101: Displaying directions

gdir = new GDirections(map,directions);

3. Create the GDirections object

gdir.load('from: ' + address1 + ' to: ' + address2);

4. Compute and display the directions

Javascript

Key:

CSS

HTML

#directions { width:400px;}

1. CSS / HTML: Define a text directions container

address2 = '76 Buckingham Palace Road, London'

2. Define the address(es) to be geocoded

Live Demo

18 of 62

Google Maps API: Examples

1) Lobang

Browse local Singapore events/places

2) MRT Map

Paths and markers for subway lines

3) StarTutor

Browse for local tutors

19 of 62

Local Search API

20 of 62

The Google Bar

This turns the boring Google logo into a shiny new search box. When the user enters a search, it uses the Local Search API to return matches.

map.enableGoogleBar();

Suggestion: Enable the "GoogleBar" on your map.

Add this 1 line of code:

Live Demo

21 of 62

The Google Bar: Tips and tricks

Using GGoogleBarOptions, the search box can be configured to change the placement of results and types of results filtered.

You can show KML results only, local business listings only, or blended results. KML results are particularly good in countries where we don't have listings.

You can suppress the results panel for smaller maps, or send it to a different DIV.

Live Demo

22 of 62

Maps API for Flash

23 of 62

Flash API

How does it work?

Lets you write code in Actionscript3, compile it against our interface library, and output a SWF containing an interactive Google Map
SWF can be embedded on your web page, Google Earth, MySpace, etc
The API can be used by both Flash CS3 and Flex developers.

The Flash API has all the main functionality of the Javascript API

Solution: Google Maps API for Flash

Live Demo

24 of 62

Flash API: Examples (1)

1. Integration into Flash/Flex sites
Some sites are already built entirely in Flash/Flex, and integrating a JS API can be painful
Example: Navx (UI already in Flex – integrated Flash API in under a week)

2. Smoother video/animation
Flash animation is native and smooth
Example: Google Map Driving Simulator (Converted from JS: Doubled frame-rate, halved CPU usage)

3. Better/more Vector Graphics
Flash handles vector graphics natively
Example: Thematic Mapping

25 of 62

Flash API: Examples (2)

4. Better binary and real-time data streaming
Flash can make raw socket connections so that a continuous stream of data can be read
Example: Collaborative Chat Rooms

5. Rotatable maps
Map is rendered as a sprite, rotatable in Flash
Example: Spinning Map

6. More embeddable
For mostly security related reasons, there are places Flash can be embedded where JS cannot
Examples: MySpace Profiles, Google Earth

26 of 62

Static Maps API

27 of 62

Static Maps API: Introduction

Solution: The Static Maps API

How it works
Just add an <img> tag pointing to a well-crafted URL that specifies various parameters (center, zoom, size, etc):

http://maps.google.com/staticmap?center=37.400470,-122.072981&�zoom=13&�size=500x300&�key=abcdef

Live Demo

28 of 62

Static Maps API: Examples

1) Lonely Planet Mobile

Displays static map of current user location
Plots nearby places to ‘sleep’, ‘play’, ‘eat’, ‘shop’ and ‘see’
Links to Lonely Planet review on each date

2) Orbitz Mobile Update

Generates static map of traffic incidents
Collects input from mobile users

3) Glotter

Displays thumbnails of maps

29 of 62

Static Maps API: Tips and tricks

The Static Maps API can be combined with the Javascript API�for a better user experience

1. Start with a static map, loading JS API seamlessly only if user interacts with it
e.g. Yelp

2. Start with a static map, load JS API when user asks explicitly
e.g. Barry Hunter's Demo

30 of 62

Google Earth Plug-in API

31 of 62

Earth API

�

How does it work?

Users download a plugin the first time they use (currently available only for Windows; Mac and Linux versions coming)
The developer programmatically creates and manipulates instances of Google Earth inside the webpage (adding data or changing the view)

Solution: Google Earth API

Live Demo

google.earth.createInstance("map3d", initCallback);

32 of 62

Earth API: Examples

1) Singapore 3D Explorer

Explore Singapore Grand Prix track
Buildings and track modelled in 3D
Textual information on landmarks

2) Monster Milktruck

3D driving game
Jump anywhere on the Earth’s surface

33 of 62

Earth API: Examples (2)

Google Earth Driving Simulator

Directions

Construct directions from point A to point B

Google Earth Plugin

View route driven in 3D
Set start / end points and speed

Google Maps

Track progress in 2D Maps pane

34 of 62

Earth API: Tips and tricks

map.addMapType(G_SATELLITE_3D_MAP);

1. Add a 3D map type

map.setMapType(G_SATELLITE_3D_MAP);

2. Switch to 3D map type

3D Maps can be combined with 2D maps, for graceful degradation if the user does not have the plugin installed

Javascript

Key:

CSS

HTML

Live Demo

35 of 62

Creating Custom Maps

36 of 62

Creating Custom Maps

If a mapping service is lacking the imagery that you want, then you can overlay or replace it with your own.

Example:

The New Hanoian

37 of 62

Image Overlay Types

Single Image Overlays

(GGroundOverlay)

��

Tiled Image Overlays

(GTileLayer)

38 of 62

Single Image Overlays

In the API, usually use GGroundOverlay to achieve this
Basic concept: Stretch an image to fit a bounding box

39 of 62

Single Image Overlays: Examples

Various Uses:

With each of these examples, play with the zoom level and notice the degradation in image quality.��Interactive Fitting Tools:

�Dynamically Generated Counties Ground Overlay�With this example, play with the zoom level and notice the change in loading time for the overlay.�

40 of 62

Single Image Overlays: Conclusion

Single Image Overlays work well for areas that consist of a single map viewport and a single zoom setting. ��It’s easy to implement but suffers from performance issues and limited options. ��Applications that require larger coverage and multi-resolution data need a more robust solution.

41 of 62

Tiled Image Overlays

In the API, usually use GTileLayer to achieve this
Basic concept: Load tiles of constant size at each zoom level. The standard Google Maps map types are implemented this way.

�Advantages:

Extremely Efficient
Runs easily on all map capable browsers
Works equally well at each zoom level
Capable of displaying large areas

Disadvantages:

Somewhat complex to generate
More difficult to understand
Typically requires a robust server

42 of 62

Tiled Image Overlays: Tile Structure

The tiling system consists of a series of images with a dimension of 256x256 pixels.
Each successive zoom level divides the previous zoom level’s images into four new images, resulting in a map that displays one forth the area at twice the resolution of the previous level.
Zoom level 0 is the lowest level, there is no theoretical upper zoom level limit.

��Try zooming and panning �on Google Maps with �"Outline Images" enabled�to see this in action.

43 of 62

Tiled Image Overlays: Tile Structure

The world as one tile: zoom 0 (4**0)

Pixels:

Top (y): 0

Left (x): 0

Bottom: 255

Right: 255

Tile No.:

x:0 y:0

44 of 62

Tiled Image Overlays: Tile Structure

The world as four tiles: zoom 1 (4**1)

Tile No.:

x:0 y:0

Pixels:

Top (y): 0

Left (x): 0

Bottom: 255

Right: 255

Tile No.:

x:0 y:1

Pixels:

Top (y): 256

Left (x): 0

Bottom: 511

Right: 255

Tile No.:

x:1 y:0

Pixels:

Top (y): 0

Left (x): 256

Bottom: 255

Right: 511

Tile No.:

x:1 y:1

Pixels:

Top (y): 256

Left (x): 256

Bottom: 511

Right: 511

45 of 62

Tiled Image Overlays: Tile Structure

Number of tiles per zoom level = 4**zoom
Number of pixels per zoom level = 4**(zoom + 8)

46 of 62

Tiled Image Overlays: Tile Structure

Interactive Tile Structure Demo

47 of 62

Tiled Image Overlays: Techniques

Tiles cut from images

��

Static data tiles

��

Dynamic data tiles

48 of 62

Tiles cut from images

Basic concept: You already have the image (often scanned in), and you use a script to cut it into multi-resolution tiles

Uses:

Obsolete, historical, campus maps (Sailing Map)
Fantastical maps (MapWow)
Aerial photo imagery (Mexico 1809 Map)
Panoramic photos (Prague360)
Other documents, books, magazines (SPACE Mag)

Advantages:

Easily integrated, great user interface

Disadvantages:

Pixelation, Borders and text get bigger with zoom, image geolocation errors

49 of 62

Tiles cut from images: Counties Example

County Tiles Cut from Source Image

Source image: 5462 x 2920, zoom 7
Zoom levels 5-9 generated with Perl script
Notice the aliasing that occurs when you zoom/pan

Zoom 5

Zoom 6

Zoom 7

Zoom 8

Zoom 9

50 of 62

Tiles cut from images: Resources

MapCruncher Beta for Microsoft Virtual Earth:

Great alignment options, limited to non-commercial use, non-Google tile numbering

Automatic Tile Cutter for Photoshop:

Requires Photoshop CS or better, alignment web tool available

Unix Command Line Tile Cutter:

Runs under Linux/Unix/Mac OSX, uses ImageMagick, GPL, no image alignment tool

Perl tile cutter:

Runs under Linux/Unix/Mac OSX, uses GD, GPL, no image alignment tool

51 of 62

Tiles cut from images: Conclusion

Tiles cut from images are useful for many purposes, but suffer when extending to more than a few zoom levels due to pixelation, and they can be difficult to align with a base map.

52 of 62

Static data tiles

Basic Concept: You have the data in some format, and you generate the tile layers just once from that data and store on your server.

Uses:

Displaying points of interest, heat maps, borders, other thematic data (Zoning Map, Walkscore Heatmap)

Advantages:

Allows creation of nearly perfect tiles
Fast browser response regardless content
Great for polygons, markers and lines

Disadvantages:

Requires server side programming experience
Tiles generated on a schedule

53 of 62

Static data tiles: Counties Example

Generated County Tiles

Tiles generated with Perl script using data in PostGRE database for zoom levels 5-9
Notice the constant edge thickness when you zoom/pan

Zoom 5

Zoom 6

Zoom 7

Zoom 8

Zoom 9

54 of 62

Static data tiles: Conclusion

Static tiles created from data are extremely fast and efficient, can be made to work with any zoom level and any area.

They don’t suffer from pixelation and are easily aligned to the map.

Since they require building in advance, time sensitive and user driven requirements are difficult to address.

55 of 62

Dynamic data tiles

Basic Concept: You have the data in some format, and you generate the tile layers dynamically (when the user requests them).

Uses:

User driven data, time sensitive data (DayLight Map)

Advantages:

Tiles custom tailored to the user

Disadvantages:

Requires significant server side programming experience
Requires significant server side processing power

56 of 62

Dynamic data tiles: Conclusion

�Dynamic tiles created “on the fly” offer great functionality at a stiff price - increased time to process and heavy load on the server. ��The benefits of dynamic tiles over static ones have to be weighed for each application.

57 of 62

Simulating Clickable Tiles

Tile layers are great, but they're inherently not clickable (since data is rasterized into images).
You can simulate clickability by storing bounding boxes of the area that should be clickable, and checking for intersection with the mouse click/hover.

�Examples:

Panoramio/Wikipedia Layers on Google Maps

Bounding boxes set down as JSON

Clickable County Markers

Bounding boxes stored in the tile image cookies
Simulates

58 of 62

Sharing Geo data between applications

Using KML

59 of 62

KML: Introduction

Keyhole Markup Language (KML) is an XML-based language for expressing geographic annotation and visualization
Developed for use with Google Earth (originally named ‘Keyhole Earth Viewer’)
Became an official standard for geobrowsers in April 2008
KML files specify a set of ‘place’ features (placemarks, images, polygons, 3D models, textual descriptions, etc.) and views
Each place has a longitude and a latitude
Views can be defined in terms of tilt, heading and altitude
KML files are very often distributed as KMZ files, which are zipped KML files with additional images and assets

60 of 62

KML: Placemarks

<?xml version='1.0' encoding='UTF-8'?>

</kml>

Headers

In this example, we create a placemark with a name, description and altitude

<name>Simple placemark</name>

</Placemark>

<description> <![CDATA[

<h1>CDATA Tags are useful!</h1>

<p><font color='red'>Text is <i>more readable</i> and

<b>easier to write</b> when you can avoid using entity

references.</font></p>

]]>

</description>

<Point>

</Point>

Placemark definition

Placemark name

Placemark HTML description

Placemark lat/long/altitude

Javascript

Key:

CSS

HTML

61 of 62

KML: What to do with it

1. Display it in Google Maps

KML can be displayed in Google Maps, Earth and Static Maps �and other compatible geo applications

var kml = new GGeoXml('http://mydomain.com/myfile.kml');

map.addOverlay(kml)

2. Display it in Google Maps for Mobile

Clicking a link to a KML document should open Google Maps for Mobile (if installed)

3. Display it in Google Earth

Google Earth identifies itself with KML file types
Contents can be saved in the ‘Places’ menu
KML can be added as an overlay in the Google Earth browser API

Javascript

Key:

CSS

HTML

Can also view by pasting the URL into the Maps Search box

62 of 62

KML: Submit it to Google!

1. Create the KML content and include attribution tags

KML can be submitted to the Google index, making it discoverable from google.com and maps.google.com

<atom:author>

<atom:name>J. K. Rowling</atom:name>

</atom:author>

<atom:link href='http://www.harrypotter.com' />

2. Add a reference to the KML to your Sitemap file

<url>

<loc>http://www.example.com/example1.kml</loc>

<geo:geo>

<geo:format>kml</geo:format>

</geo:geo>

</url>

3. Submit the Sitemap to Google

Submit your Sitemap using Google Webmaster Tools

Javascript

Key:

CSS

HTML