Presentation of GoogleAPI and some Mashups. Google Maps with Youtube. Click on Map and get related Videos from Youtube

1. Google API
Karola Weischenberg, André Küpper, Marco Vreydal, Russel Fossi
The slides are licensed under a
Creative Commons Attribution 3.0 License
14.12.2010 Web Technologies

2. Overview
● What's an API?
● Google APIs
● List of all APIs
● Google Custom Search API
● YouTube API
● Google Maps API
● Example Google Maps API
● Adding map
● Adding mouse event listener
● Adding User Input to Map
● MashUp (Live Coding)
2 Web Technologies

3. What's an API?
Offers methods
ApplicationProgrammingInterface
Uses methods without
knowing the code
3 Web Technologies

4. What's an API?
Application Programming Interface
Pros:
● Easy to use, if API is well documented
● Not everybody has to programm eyerything
(reinvent the wheel)
● Mashups are easier to create
Cons:
● You don´t know exactly how it works
● It´s Google!
http://trendsupdates.com/good-ridance-arthur-levinson/
4 Web Technologies

5. Overview
● What's an API?
● Google APIs
● List of all APIs
● Google Custom Search API
● YouTube API
● Google Maps API
● Example Google Maps API
● Adding map
● Adding mouse event listener
● Adding User Input to Map
● MashUp (Live Coding)
5 Web Technologies

6. Google API
● there is not only one „Google API“
● Google provides many different APIs
http://www.globecartoon.com
6 Web Technologies

7. List of all APIs
7 Web Technologies

8. Google API
Short introduction of three main APIs:
● Google Custom Search Engine
● YouTube
● Google Maps
http://www.techforceindia.co.uk/How_we_Work.htm
8 Web Technologies

9. Overview
● What's an API?
● Google APIs
● List of all APIs
● Google Custom Search API
● YouTube API
● Google Maps API
● Example Google Maps API
● Adding map
● Adding mouse event listener
● Adding User Input to Map
● MashUp (Live Coding)
9 Web Technologies

10. Google Custom Search APIs
Google Search Engine – The heart of Google
● Possibility for using the search engine of Google
● Search over a single website or a collection of websites
● Create a search engine tailored to your needs and interests.
● Present results in your website
● Prioritize or restrict search results based on websites you
specify.
10 Web Technologies

11. Google Custom Search APIs
Google Search Engine – The heart of Google
● Possibility for using the search engine of Google
● Search over a single website or a collection of websites
● Create a search engine tailored to your needs and interests.
● Present results in your website
● Prioritize or restrict search results based on websites you
specify.
11 Web Technologies

12. Google Custom Search APIs
Very easy to use:
● Sign in to Google account
● Choose your settings
● Get generated code
● Embed code to your website
12 Web Technologies

13. Google Custom Search APIs
google.setOnLoadCallback(function() {
var customSearchControl =
new google.search.SearchControl(ID)
customSearchControl.setResultSetSize(switchTo);
var options = new google.search.DrawOptions();
options.setSearchFormRoot('cse-search-form');
customSearchControl.draw('cse', options);
}, true);
<div id="cse" style="width:100%;"></div>
13 Web Technologies

14. Overview
● What's an API?
● Google APIs
● List of all APIs
● Google Custom Search API
● YouTube API
● Google Maps API
● Example Google Maps API
● Adding map
● Adding mouse event listener
● Adding User Input to Map
● MashUp (Live Coding)
14 Web Technologies

15. YouTube API
YouTube – Famous Video Platform
● YouTube APIs and tools enables people to integrate YouTube
videos content and functionality into websites, software
applications or other devices.
● Three types of functionality: Basic, medium an advanced
● Custom Player and Widgets Using only HTML
● Player APIs and embedded Player
● DATA API and chromeless player JavaScript
ActionScript
Java, .net, PHP, Python
15 Web Technologies

16. YouTube API
● More flexible than regular embedded players
● add videos favourites, or play list
● Choose from different layouts and Schemes
● Any change updated automatically
● colour change
● The API enable your application to search for YouTube
content(demonstrate it in the mash up)
16 Web Technologies

17. Overview
● What's an API?
● Google APIs
● List of all APIs
● Google Custom Search API
● YouTube API
● Google Maps API
● Example Google Maps API
● Adding map
● Adding mouse event listener
● Adding User Input to Map
● MashUp (Live Coding)
17 Web Technologies

18. Google Maps APIs
Static Maps API:
only creating an URL
and embedding
this URL in an <img> tag
18 Web Technologies

19. Google Maps APIs
Web Services:
using URL-request and
manipulate the reuslts in
JSON or XML
19 Web Technologies

20. Google Maps APIs
Maps API for flash:
embed Maps in
flash applications
20 Web Technologies

21. Google Maps APIs
Maps API JavaScript:
we use this one
on our web project
21 Web Technologies

22. Google Maps APIs
Google Earth API:
needs Google Earth
Plug-in for the browser
and uses JavaScript
22 Web Technologies

23. Overview
● What's an API?
● Google APIs
● List of all APIs
● Google Custom Search API
● YouTube API
● Google Maps API
● Example Google Maps API
● Adding map
● Adding mouse event listener
● Adding User Input to Map
● MashUp (Live Coding)
23 Web Technologies

24. Example: Google Maps API
Fits perfect in our project
● Travel Together
– Users can offer tours
– Users can choose the best one
– Users can comment tours
● In context: Generate Map with information about the
offered tours
24 Web Technologies

25. Connection and adding Map
<meta name="viewport" content="initial-scale=1.0,
user-scalable=no"
/>
<script type="text/JavaScript" src=
"http://maps.google.com/maps/api/js?sensor=false">
</script>
25 Web Technologies

26. Connection and adding Map
<script type="text/JavaScript">
var map;
function initialize() {
var latlng =
new google.maps.LatLng(-34.397, 150.644);
var myOptions = {
zoom: 8,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById
("map_canvas"), myOptions);
}
</script>
<body onload="initialize()">
<div id="map_canvas" style="width:1000px;
height:500px"></div>
</body>
26 Web Technologies

27. Adding Mouse Event Listeners
var map;
var marker;
function initialize() {
var latlng =
new google.maps.LatLng(-34.397, 150.644);
var myOptions = {
zoom: 8,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById
("map_canvas"), myOptions);
google.maps.event.addListener(map, 'click',
function(event) {
placeMarker(event.latLng);
});
}
27 Web Technologies

28. Adding Mouse Event Listener
function placeMarker(location) {
marker = new google.maps.Marker({
position: location,
map: map
});
map.setCenter(location);
}
28 Web Technologies

29. Adding Information of tours
function attachMessage(marker) {
var message = document.getElementById("description").value;
var infowindow = new google.maps.InfoWindow(
{ content: message,
size: new google.maps.Size(50,50)
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
});
}
<body onload="initialize()">
<div id="map_canvas" style="width:1000px; height:500px"></div>
<input type="text" name="description" value=""
id="description" size="20">
</body>
29 Web Technologies

30. Overview
● What's an API?
● Google APIs
● List of all APIs
● Google Custom Search API
● YouTube API
● Google Maps API
● Example Google Maps API
● Adding map
● Adding mouse event listener
● Adding User Input to Map
● MashUp (Live Coding)
30 Web Technologies

31. Mashup
User Input (e.g a click)
Google Maps API
Maps API output = YouTube API input
YouTube API
Google Maps Video Finder
31 Web Technologies

32. Any other places you want to travel to?
Thank you, for your attention.
32 Web Technologies