Category Archives: APIs

Migrate Google Maps from V2 to V3

Google maps v2 has been deprecated since May 19, 2010 and will stop working on May 19, 2013, so here is a little guide on how to migrate.

On V3 we don’t need an API key, but it’s useful to keep track of your API calls (25,000 free), so to get the API key, log into https://code.google.com/apis/console/, click on services and activate google maps v3, once is done click on API access on the left, and go to Simple API at the very bottom, then click on edit allow referers, and set up like *.mysite.com/* that will allow all your subdomains and folders on your site.

Now that you have your API key, is time to replace the old URL, by the new one:

  1.  
  2. <!– V2 –>
  3.  
  4. "http://maps.google.com/maps?file=api&amp;v=2&amp;key=$yourKey"
  5.  
  6. <!– V3 –>
  7.  
  8. "https://maps.googleapis.com/maps/api/js?key=$youKeu&v=3&sensor=true""text/javascript"
  9.  
  10. <!– "sensor" is required an indicates if a device (like GPS) is used to determine the user’s location –>
  11.  

First get rid of the old unload function, is not needed anymore.

  1.  
  2. /* V2 */

Also get rid of old code used to load Vector Markup Language(VML) just needed for IE, VML has been deprecated on IE9 in favor Scalable Vector Graphic (SVG)

  1.  
  2. <!DOCTYPE html>
  3. "en" xmlns:v="urn:schemas-microsoft-com:vml>
  4. <head>
  5.         <style type="">
  6.         v\:* {
  7.         behavior:url(#default#VML);
  8.         }
  9.         </style>

Now lets load the map itself.

  • First take out GBrowserIsCompatible is not supported anymore.
  • Replace GMmap2 by google.maps.Map.
  • GLatLng has been replaced by google.maps.LatLng.
  • Now take out addControl, setMapType, now all of these are passed as an object when map is created
  • For V2 we use these map types G_NORMAL_MAP,G_SATELLITE_MAP,G_HYBRID_MAP on V3 they have been replace by google.maps.MapTypeId.ROADMAP, google.maps.MapTypeId.SATELLITE, google.maps.MapTypeId.HYBRID ,google.maps.MapTypeId.TERRAIN
  1.  
  2. /* V2 */‘map’/*zoomLevel*/ );
  3.         map.setMapType( G_NORMAL_MAP );
  4.         //map.setMapType( G_SATELLITE_MAP );
  5.         //map.setMapType( G_HYBRID_MAP );
  6. }
  7.  
  8. /* V3 */‘map’ ), mapOptions);
  9.  

In V3 creating custom icons is a lot easier, instead of creating a special icon object now we can just pass image as url.

  1.  
  2. /* v2 */"http://labs.google.com/ridefinder/images/mm_20_red.png""http://labs.google.com/ridefinder/images/mm_20_shadow.png"/* v3 */‘Testing Icon’,
  3.         icon:‘icon.jpg’‘shadow.jpg’/* icon and shadow can be just a string containg  the image file url, for must complex icons just pass and object with all the properties
  4.   var image = {
  5.     url: ‘images/icon.png’,
  6.     size: new google.maps.Size(20, 32),
  7.     origin: new google.maps.Point(0,0),
  8.     anchor: new google.maps.Point(0, 32)
  9.   };
  10. more info: https://developers.google.com/maps/documentation/javascript/overlays?hl=en#ComplexIcons
  11. */
  12.  
  13.  

clearOverlays has been removed from v3, so if you want remove all your markers from your map, now you have to manually keep track your markers an remove them.

  1.  
  2. /* v2 */
  3. map.clearOverlays();
  4.  
  5. /* v3 */// Global array to store marker
  6. // store a reference to the marker each time you create one
  7.  
  8. // delete all the markers on the array

To create overlay on Google maps V3 now we have to use google.maps.Polyline inseatd of GPolyline.

  1.  
  2. /* V2 *//* V3 */"#FF0000",strokeOpacity: 1.0,strokeWeight: 2});
  3. area.setMap(map);
  4.  
  5.  

On google maps v3 is a lot easier to create custom controls, now we only create a div element an insert it on Google maps.

  1.  
  2. /* V2 */
  3.  
  4. /* we used to create the custom control like */"div"‘myId’‘<a href="save.php" ><img src="icon_save.gif" /></a>’/* we used to add to the map, after it was created */
  5.  
  6. /* v3 */"div"); /* To change look, just add some style like container.style.border=” */‘myId’‘<a href="save.php" ><img src="icon_save.gif" /></a>’; /* Custom HTML code */

Prototype Compressed

I am a prototype user, but i want to save some bandwidth using a compressed version, so i start looking for it and i found a compressed version called
protopack it includes different versions, just spaces removed ( no eval required ), encrypted(eval required) and gziped version for both. i prefere the just spaces removed version since it dosen’t require use of eval.

Another good option is to use the Google AJAX Libraries API that serves a compressed version of prototype that will be cached by a year and sent with compression headers , you can include it using the full url or the Googles’s API

  1.  
  2. "text/javascript""http://ajax.googleapis.com/ajax/libs/prototype/1.6.0.2/prototype.js"
  3.  
  4. OR
  5.  
  6. "text/javascript""http://www.google.com/jsapi"
  7. "text/javascript"
  8. google.load("prototype", "1.6.0.2");
  9.  
  10.  
  11.  

You can find compressed versions of scriptaculous, jQuery, MooTools, dojo as well.
The bad thing is there are no https support so it wont work for secure sites.

Show videos on your site using PERL and Youtube API

This tutorial uses an old Youtube API, after google acquired Youtube a new API was released

In this brief tutorial i will show you how to show videos from youtube on you web page using PERL and Youtube API, the idea of the script is that it will show by default the favorites videos of some users, and you will be able to navigate to the tags you specify.

For this script we will use some libraries from the CPAN:

  • CGI we will use to get the data send by GET
  • Template toolkit This is an excellent template library
  • XML:DOM this library will help us to parse the XML file that is returned by youtube
  • LWP::UserAgent This is needed by XML:DOM to parse the files in remote locations
  • Unicode::String We will use this to convert data to UTF8

Click here to see this script in action.

Download the code

index.pl this is the perl script.

  1. #!/usr/bin/perl
  2. # you have to sign up to get a developer id
  3. ‘developerid’;
  4. # we will show the favorites videos of this user as front page
  5. ‘someuser’;
  6. # this is an array of the tags we will allow to navigate throw
  7. ‘tlaxcala’=>‘Tlaxcala’,
  8.         ‘huamantla’=>‘Huamantla’,
  9.         ‘huamantlada’=>‘Huamantlada’,
  10.         ‘feria huamantla’=>‘Feria Huamantla’,
  11.         ‘cacaxtla’=>‘Cacaxtla’,
  12.         ‘apizaco’=>‘Apizaco’,
  13.         ‘tlaxco’=>‘Tlaxco’,
  14.         ‘feria tlaxcala’=>‘Feria Tlaxcala’‘action’"Content-type: text/html;charset=UTF-8\n\n"‘view’‘video’‘video’# here we start parsing the XML
  15. ‘http://www.youtube.com/api2_rest?method=youtube.videos.get_details&dev_id=FIq6LWxC3RE&video_id=’‘video’} );
  16.                 # we put this on eval to avoid errors
  17. # here i add all the commets to an array
  18. ‘comment’‘time’‘author’‘text’‘%r’‘%d-%m-%Y’, @date )
  19.                                 };
  20.                         }
  21.                        
  22.                         # here i format the video time
  23. ‘length_seconds’# here i create an array of the data i will use and show the page using template toolkit
  24. ‘video’‘title’‘author’‘rating_avg’‘tags’‘description’‘%02s:%02s:%02s’‘videos_view.tt’‘page’‘page’‘tag’‘tag’‘tag’ ) {
  25.                 # i show the favorites of the user
  26.                 $url=‘http://www.youtube.com/api2_rest?method=youtube.users.list_favorite_videos&dev_id=FIq6LWxC3RE&user=’‘page’}=‘1’‘page’);
  27.                 # here i get videos by tab
  28.                 $url=‘http://www.youtube.com/api2_rest?method=youtube.videos.list_by_tag&dev_id=FIq6LWxC3RE&tag=’‘tag’} . ‘&page=’‘page’} . ‘&per_page=20’;
  29.                 # since the api dosent support paging, i see if the next xml has data, to show next link
  30. ‘http://www.youtube.com/api2_rest?method=youtube.videos.list_by_tag&dev_id=FIq6LWxC3RE&tag=’‘tag’} . ‘&page=’‘page’} + 1 ) . ‘&per_page=20’# we put this on eval to avoid errors
  31. # here i create an array with the info for videos
  32. ‘video’‘author’‘author’‘id’‘id’‘title’‘title’‘length_seconds’‘length_seconds’‘rating_avg’‘rating_avg’‘rating_count’‘rating_count’‘description’‘description’‘view_count’‘view_count’‘upload_time’‘upload_time’‘comment_count’‘comment_count’‘tags’‘tags’‘url’‘url’‘thumbnail_url’‘thumbnail_url’‘video’‘tag’‘page’}
  33.         );
  34.         # i show the page using template toolkit
  35. ‘videos_list.tt’

videos_list.tt The template where we see the list of videos.

  1.  
  2. "videosList"
  3. [% FOREACH videos %]
  4.  
  5.   "index.pl?action=view&amp;video=[% id %]""[% thumbnail_url %]"
  6.   "index.pl?action=view&amp;video=[% id %]"[% title %]
  7.   [% description %]
  8.  
  9. [% END %]
  10.  
  11.  
  12.  
  13. "center"
  14.  [% IF tag || ( page>1 && total>0 ) %]
  15.  [% IF ( page > 1 ) %]
  16.   <a href="index.pl?tag=[% tag %]&amp;page=[% (page – 1) %]" alt="Previous" title="Previous">Previous
  17.   [% END %]
  18.   [% IF total>0 %]
  19.    "index.pl?tag=[% tag %]&amp;page=[% (page + 1) %]""Next"‘Next’Next
  20.   [% END %]
  21.  
  22.  
  23.  
  24.  [% END %]
  25.  
  26.  [% IF tag == ” %]Favorites[% ELSE %]"index.pl"Favorites[% END %]
  27.  [% FOREACH key = tags.keys %]
  28.   || [% IF tag == key %][% tags.$key %][% ELSE %]"index.pl?tag=[% key %]"[% tags.$key %][% END %]
  29.  [% END %]
  30.  
  31.  

videos_view.tt The template where we see a specific video.

  1.  
  2. [% title %]
  3.  
  4. "center"
  5. "425""350""movie""http://www.youtube.com/v/[% video %]""wmode""transparent""http://www.youtube.com/v/[% video %]""application/x-shockwave-flash" wmode="transparent""425""350"
  6.  
  7.  
  8. Author: "http://www.youtube.com/user/[% author %]""_blank"[% author %]
  9.  
  10. Rating: [% rating_avg %]
  11.  
  12. Tags: [% tags %]
  13.  
  14. Time: [% time %]
  15.  
  16.  
  17. [% description %]
  18.  
  19.  
  20. [% IF comments.size > 0 %]
  21.  Comments
  22.   [% FOREACH comment=comments %]
  23.    ‘textoComentarios’[% comment.text %]
  24.  
  25.    ‘pieComentarios’
  26.    | By ‘http://www.youtube.com/user/[% comentario.author %]’[% comment.author %] | [% comment.date %] | [% comment.time %] |
  27.  
  28.  
  29.  
  30.  [% END %]
  31. [% END %]
  32.