This document discusses Google Maps APIs and examples of maps created using these APIs. It begins with an introduction to the speaker's experience developing with Google Maps APIs since 2007. It then provides examples of maps created by ThinkWrap and others using the APIs. The document outlines key objects and APIs in the Google Maps JavaScript API v3, such as LatLng, Map, Marker, and Geocoding. It concludes by emphasizing the potential of maps to visualize large amounts of data and provides suggestions for handling many markers on a map.

1. Maps bakes the crust -
you add the toppings!
Nael El Shawwa

2. About me
• Work at ThinkWrap Solutions
• Co-Founder #DevTO

3. About me
• Work at ThinkWrap Solutions
• Co-Founder #DevTO

4. Google Maps API
Experience
• Started developing in 2007 since v2
• Dozens of mashups
• Qualified Google Maps API Developer since
2009

5. Who’s Paul
Rademacher?
• Father of the “Google Maps Mashup”
• http://www.housingmaps.com/
• Thanks to him Google Maps is 6 years old
• Go ahead & thank him @paulrademacher

6. Examples from
ThinkWrap

7. uOttawa Campus Map
http://www.uottawa.ca/maps/

8. Martha Stewart Online
http://shop.marthastewart.com/content/Find_A_Store.htm

9. Obama SMS Map
http://obamamobilemap.appspot.com/
http://www.youtube.com/watch?v=NG6k7QadYM4

10. XPrize Foundation
http://www.youtube.com/watch?v=1N4MKIjZYOU

11. What others have
done?

12. Deel.io
http://deel.io/

13. zoocasa.com

14. ChaosInYourTown.com

15. Boundaries
http://www.vasile.ch/hacks/ft-mask/

16. Ok, you get the point

17. Maps JS API v3
• MVC
• Objects - LatLng, Map, Marker,
InfoWindow, Geocoder, ...
• APIs - Image, Google Earth, Directions,
Elevation, Geocoding, DistanceMatrix, ...

18. LatLng
• coordinates - latitude, longitude
new google.maps.LatLng(-34.397, 150.644)

19. Map
• the map - duh...!
var myOptions = {
zoom: 8,
center: new google.maps.LatLng(-34.397, 150.644),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map($('#map_canvas'),myOptions);

20. Marker
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title:"Hello World!"
});

21. Ok I could have figured
this out myself dude...

22. Twitter Google Map
Code Review

23. ... power of map
visualization is
unleashed with more
data..

24. Too many markers is
not healthy for your
map

25. The DOM is always the
problem

26. Flash Maps API

27. Fl
as
h
M
ap
Se As
pt PI
20 De
11 pr
ec
at
e d
Flash Maps API

28. What can we do about
that?
• Buckets
• Heatmaps
• Charts
• Bounded box

29. Cartographer.js
thematic mapping

30. Final notes
• Sky is the limit with Google Maps API
• Find creative ways to show case MORE
data FASTER
• The crust is baked by Google, you add the
toppings