VV's Corner

Getting started with Google Geo (Maps, Mapplets & Earth) APIs

2008-10-19T03:52:47Z

There is a great quantity of quality resources to help get you started on making your first geo mashups. This page links to all those great resources from one easy location.

Google Maps API

Google Streetview API

Google Mapplets API

Google Earth API

Google Earth

Google Maps API

Get started with the Google Maps API
Read the API Getting Started guide and API reference documentation
Watch Google Maps Presentations on basics and advanced topics
Learn to create your first map, store locator, and other useful tutorials
Participate in discussions and receive support at the Google Maps API Group
There are a number of open-source utility libraries that make developing with Google Maps easy
Play with some API examples to see what can be done
Subscribe to the Google Geo Developers blog and Google LatLong blog to keep up to date with the latest tips and updates
Subscribe to the Google Maps Mania blog and see what others are doing with the Maps API
Use the Static Maps API to embed map images in your mobile and email content
Use the Flash Maps API in your Flash applications

YouTube videos

View a full list of Maps API videos here


Google Maps API Intermediate (44:11)	Google Maps API Advanced (50:17)

Google Street View API

The Street View API allows you to leverage Google’s unique Streetview imagery and controls within your mashups. Streetview is currently available for selected locations in the US, Australia, and Japan.

Get started with the Google Street View API
Read the API reference documentation
Play with some API samples to see what can be done

Google Mapplets API

Mapplets are a combination of the Maps API and Gadgets API, and provide a great platform for making your maps mashups discoverable and permanent via the mapplets directory.

Get started with the Google Mapplets API
Read the API Getting Started guide and API reference documentation
Discover, install, and play with others’ mapplets in the Mapplets Directory

Google Earth API

Get started with the Google Earth API
Read the API Getting Started guide and API reference documentation
Learn about KML files
Learn how to create 3D models using Google Sketchup
Participate in discussions and receive support at the Google SketchUp Help Group and subscribe to the SketchUp Blog
Play with some Earth API samples to see what can be done
Subscribe to the Google Geo Developers blog and Google LatLong blog to keep up to date with the latest tips and updates
Subscribe to the Google Maps Mania blog and see what others are doing with the Earth API

Google Earth

Download Google Earth
Learn about using Google Earth
Learn about KML files and how to develop content for Google Earth
Participate in discussions and receive support at the Google Earth Community
Learn how to create 3D models using Google Sketchup
Discover, install, and play with others’ Earth content in the Google Earth KML Gallery
Subscribe to the Google Geo Developers blog and Google LatLong blog to keep up to date with the latest tips and updates
Subscribe to the Google Maps Mania blog and see what others are doing with Google Earth

User-friendly 404 pages

2008-08-26T03:30:19Z

If a user types in or follows a URL that does not exist on a website they are usually taken to a 404 (page not found) page. Returning a standard 404 page to your user tends to provide a less-than-optimal user experience and may cause you to lose them altogether.

A solution is now at hand. Create a custom 404 page and embed a Webmaster Tools 404 widget into it. The 404 widget helps your visitors find what they’re looking for by providing suggestions based on the incorrect URL. It also provides a link to the parent subdirectory, a sitemap webpage, and a site search query suggestions and search box.

Using the Google Static Maps API to include maps in your emails

2008-08-11T09:45:14Z

The Google Maps API is a great way to utilise Google’s Maps platform on your own website. The standard Maps API, however, does not work in e-mails as it is reliant on JavaScript which most (if not all) e-mail clients block.

Luckily there is a solution thanks to the Google Static Maps API. The Static Maps API generates an image file that can be embedded into your HTML content (like below). Because it is an image, and there is no JavaScript involved, mail clients will display such a map. You can specify the location of the map, the size of the image, the zoom level, the type of map, and the placement of optional markers at locations on the map using the API. For example:

Getting started is easy!

Sign up for a Google Maps API key
Use the Google Static Map Wizard to create your first static map
Read the Google Maps Static API documentation

This method is great for also providing map content in other mediums that don’t support JavaScript – such as mobile content.

Python: Inserting characters into a string

2008-08-02T14:02:09Z

Disclaimer: I’m a Python newbie … if you know of a more efficient way let me know!

I needed to take a sequence of 4 digits (eg 1145) and modify it to look like clock-time (eg “11:45″). After a bit of online (what else?) research I decided to take the approach of converting the integer to a string and then to a list (of characters). I then insert the extra character (ie the “:”) into the list at the right position. Finally, join the list elements together to form a new string.

time_int = 1145 time_str = str(time_int) time_list = list(time_str) time_list.insert(2, ':') #insert the ':' character into the list before position 2 time_str = "".join(time_list)

Python: removing repeated values in a list

2008-07-29T13:56:50Z

PLAIN TEXT

CODE:

list = ['one', 'two', 'three', 'one', 'one', 'four', 'two']
#convert the list into a set. An element can only exist once within a set
set = set(list)
#convert the set back into a list type
list = list(set)
print list

Are those variable names confusing? Let's look at that example again:

PLAIN TEXT

CODE:

fruits = ['apple', 'bananas', 'cantaloupes', 'apple', 'apple', 'durian', 'bananas']
#convert the list into a set. An element can only exist once within a set
fruits_unique = set(fruits)
#convert the set back into a list type
fruits = list(fruits_unique)
print fruits

Testing your regular expression Goal URLs for Google Analytics

2008-07-28T09:55:55Z

Your dilemma: You want to create a Google Analytics Goal that defines a Goal URL using a regular expression match. But how do you test it without having to wait 24 hours for your Google Analytics reports to be updated?

Help is at hand: Regular expressions can be tested using the search box in Google Analytics reports. That's right - the search box available in all reports can take and interpret regular expressions. Let's say that you intend to use the following regular expression as your Goal URL:

/goal_page\.html\?cid=[123][abc]-.*&.*

First, copy the regular expression into your clipboard. Then navigate to the Content > Top Content report. Paste the regular expression into the search box that sits below the table of data. Now click on the "Go" button.

Do you see your Goal URL(s) in the returned report? If yes - great, you're good to go! If no - you will need to spend some time refining your regular expression. Tools like RegExr and The Regex Coach are useful for this.

There you have it - an easy way to test your regular expressions without having to wait 24 hours for your reports to update.

This method can also be used to test regular expressions for your filters. For example, if you have a custom filter for the "Visitor Country" field that uses a regular expression, test that expression in the Visitors > Map Overlay report.

Google Analytics and Troubleshooting AdWords Auto-Tagging

2008-07-15T00:50:22Z

When reading your AdWords reports in Google Analytics, there are many possible reasons why there may be discrepancies between Google Analytics visits and AdWords clicks. If you see wildly different numbers for visits and clicks, the likely culprit is that the AdWords auto-tagging parameter is being stripped from the landing page URL.

What happens when you have auto-tagging enabled in your AdWords account? Any time one of your ads is clicked on, AdWords will automatically append a paramater called the gclid (Google CLick ID) on to the end of the ad's destination URL.

For example, if your ad's destination URL is http://www.mysite.com/landing_page.html and a user clicks on your ad, AdWords will redirect the user to http://www.mysite.com/landing_page.html?gclid=123fa35fjn809080jk (the gclid value is a random string)

The gclid value is a unique identifier that identifies which ad (and consequently keyword, ad group and campaign) the visitor clicked on to reach your site. When Google Analytics processes your reports, it fills in the AdWords reports by looking up the appropriate gclid values in the AdWords database to find the corresponding information.

Here's the key point: Google Analytics cannot tell if the visitor came from an AdWords click if the gclid parameter is missing on the page that the user eventually lands on!

The key is to test whether your landing page retains the gclid parameter.

Take your destination URL (eg http://www.yoursite.com/landing_page.html) and paste it into your browser's location bar (where you usually type in a web address)
Add a test parameter on to the end of the URL. If your URL does not already have parameters in it, append ?gclid=test. If there are already parameters, append &gclid=test on to the end. (For example, http://www.yoursite.com/landing_page.html becomes http://www.yoursite.com/landing_page.html?gclid=test; and http://www.yoursite.com/landing_page.html?myval=1 becomes http://www.yoursite.com/landing_page.html?myval=1&gclid=test)
Press enter
Your browser will take you to your landing page. Be mindful of redirects, especially if you are tracking with Doubleclick, Atlas, etc tags.
Is the gclid=test parameter still visible in your browser's location bar?

YES? Auto-tagging plays nice with your destination URLs. You can stop reading now!

NO? Oh-oh. There is most likely an intermediate redirect that is stripping out the gclid parameter. There are two options to remedy this:

First (and easiest) - change your destination URL to the ultimate page that the visitor lands on, thus bypassing any redirects
Configure your server so that the gclid parameter is passed along in the redirect

(Two other common culprits are users are landing on a 404 error page or the Google Analytics tracking code missing altogether on the landing page!)

There you have it - how to test if your destination URLs play nice with auto-tagging. For more information, read Google's help center article on auto-tagging.

Triggering the Source Code view of the current page using JavaScript

2008-03-28T22:41:18Z

I was recently writing a demo to showcase the new Google Language API, and in my demo I did the usual thing of instructing users to View > Page Source in order to view the source code and comments. I know this is less than ideal, because it forces users to have to process the instructions, and then execute them. Somewhere in there you lose them and they never execute the desired action.

It got me thinking: is there a way to have the source code in front of them in one click? A few Google searches later, and the answer was yes!

Using JavaScript you can open a new window to display the source code view of the current window:

PLAIN TEXT

JAVASCRIPT:

window.open('view-source:' + window.location.href, 'mysource');

Voila! How easy was that? Now it's your turn.

Recommended Mozilla Firefox add-ons (aka extensions, aka plugins)

2007-07-30T02:15:19Z

This is a list of my "must-have" Mozilla Firefox add-ons. If you can recommend anything similar or better, be sure to drop me a comment.

Page Analysis & SEO
Minimise Nuisance
Bookmark Management
Download Management
Productivity
Web Development & Design
Security
Functional Extensions
Tab Management
Add-Ons Management

Page Analysis & SEO

About This Site Bookmarks - right-click on a page, select "About This Site Bookmarks" and you will see a list of handy links pointing off to informational sites such as Alexa, Compete, Netcraft, del.icio.us, etc.

SearchStatus

ShowIP

Minimising Nuisance

Adblock Plus

Adblock Filterset.G Updater

Bookmark Management

Add Bookmark Here

Bookmark Duplicate Detector

del.icio.us

Download Management

Download Statusbar - manage your downloads via the Firefox status bar.

DownThemAll - conveniently download all link targets on a page.

FlashGot - allows for single and multiple downloads utilising an external download manager of your choice (I prefer FlashGet).

Productivity

Auto Copy - highlight a piece of text and the selection is automatically copied to your clipboard.

FoxClocks - displays local times around the world in the statusbar or toolbar. Great for if you are dealing with friends and colleagues across multiple timezones.

FoxyTunes - operate your currently running media player from your Firefox statusbar.

Google Notebook - conveniently clip text and links to your Google Notebook.

Linkification - Converts text links (including e-mail addresses) into clickable links.

PDF Download

Web Development & Design

ColorZilla - eye-dropper tool that allows you to pick the HEX & RGB values of colours of elements on the page.

Firebug - the quintessential Javascript debugger. It also allows for excellent DOM and CSS debugging and manipulation.

HTML Validator

IE View - open the current page in an IE window.

Live HTTP Headers - view HTTP request and response headers in realtime.

User Agent Switcher - allows you to spoof the User-Agent string and have Firefox masquerade as the Googlebot, etc, to see how your site reacts to different user-agents.

View Source Chart - renders page source HTML in an easy-to-read manner.

Web Developer - a must for the serious web developer.

YSlow - an addon to the Firebug debugger. It allows you to profile a page and identify bottlenecks. Provided by Yahoo. Also see Yahoo's articles on improving page load performance.

Security

CookieSafe

Edit Cookies

McAfee SiteAdvisor - lets you know if the currently viewed site is considered "safe" or not.

Functionality Extensions

CustomizeGoogle - customize your Google search and application experiences.

ErrorZilla - extends the standard page not found error screen with convenient links such as access to the page's Google cached copy.

Secure Login

View Cookies

Tab Management

Faviconize Tab - minimize a tab's width to the width of the favicon.

Tab Mix Plus

Add-Ons Management

Google Browser Sync

FEBE - a convenient extensions & settings backup tool. Allows you to also run scheduled backups. The backups can be used to transport your extensions and their settings to another machine or Firefox profile.

MR Tech Local Install - install power tools for add-ons

scp Usage

2007-07-25T11:34:03Z

Secure File Copy (scp) allows you to copy files between hosts using the SSH protocol.

To copy from a remote host to your current host

PLAIN TEXT

PERL:

scp -r user@remotehost:path/to/remotefiles localtarget
#-r recursive copy
#you will be prompted for user's password @ remotehost

To copy files from your current host across to the remote host

PLAIN TEXT

PERL:

scp -r localfiles user@remotehost:path/to/remotetarget

Selecting a random row using MySQL

2007-07-25T08:54:58Z

There are many examples where you would need to retrieve a random record or more from a set of tables. For example your page template may be cycling through QOTDs, testimonials, offers, specials, and so forth.

To retrieve a random row in MySQL, use the ORDER BY RAND() statement to randomly order the rows of a table. Then use LIMIT x to retrieve the first x rows from the randomised representation of the table.

For example:

PLAIN TEXT

SQL:

/* Retrieve 5 random special offers to display in your e-commerce store's sidebar */
SELECT offer_id
FROM special_offers
ORDER BY RAND()
LIMIT 5

Of course, we can make our query as complex as needed, and then randomly order the resultset.

PLAIN TEXT

SQL:

SELECT so.offer_id, i.title
FROM special_offers so
LEFT JOIN items i ON (so.item_id = i.item_id)
LEFT JOIN item_categories ic ON (i.item_id = ic.item_id)
WHERE ic.category_id = 2344
ORDER BY RAND()
LIMIT 5

PHP code snippet – Reorder items in a table

2007-07-09T10:00:15Z

This snippet of code reorders items in a table based on the number of steps you want to move an item from its current position. It moves the item of interest to its new position and shifts all other items to their new shifted positions.

PLAIN TEXT

PHP:

function moveItem ($n_steps) {
if ($n_steps == 0) {
return;
}
$cur_pos = $this->pos;
$new_pos = $cur_pos + $n_steps;
if ($n_steps <0) {
$min_pos = $cur_pos + $n_steps;
$max_pos = $cur_pos - 1;
$shift_sign = '+';
} elseif ($n_steps> 0) {
$min_pos = $cur_pos + 1;
$max_pos = $cur_pos + $n_steps;
$shift_sign = '-';
} else {
return;
}
$id = $this->id;
//Reorder existing items that will be existed by moving this item
$sql = "UPDATE positions
SET order_num = order_num $shift_sign 1
WHERE id = $id
AND position>= $min_pos
AND position <= $max_pos";
$this->db->query($sql);
//Now set new position for this item
$sql = "UPDATE postions SET position = $new_pos WHERE id = $id";
$this->db->query($sql);
}

svn – Ignore/exclude files from version control

2007-07-08T08:21:01Z

In most projects there are going to be files that you wish to ignore in version control. These could be temporary files, log or debug files, and so forth. These are files that you can safely ignore when executing commands such as svn commit and svn st. The following shows how to configure your svn client to ignore particular files in your working copy.

svn propedit svn:ignore /path/with/files/to/ignore/

svn opens up your text editor of choice

Use file patterns to indicate which files to ignore from version control. Each pattern goes on a new line. e.g.

log_12*.log
*.tmp

Save your file and exit

Now whenever you perform commands like svn st or svn commit, svn will ignore files with the patterns you specified in the directories that you specified.

Class Inheritance in Javascript

2007-06-05T11:08:17Z

My previous post showed how to create classes in Javascript. This addendum post shows how to create an inherited class from a parent class.

The concept is simple.

Declare and define your parent class
Declare and define your child class without defining the parent-child relationship
Add a new instance of your parent class to your child class' prototype. Now the child class has access to the parent class' properties and methods. This last step may seem counter-intuitive, but the example below helps to clarify what I mean.

PLAIN TEXT

JAVASCRIPT:

function SuperHero(heroID, p1, p2, p3) {
...
...
...
}
/* Do some extending of SuperHero's prototype here */
//Now let's define our child class - note that we do not initially define the parent-child relationship
function AlienSuperHero(heroID, homePlanet, race, p1, p2, p3) {
...
//Now we indicate the parent-child relationship
this.prototype = new SuperHero(heroID, p1, p2, p3);
}
/* Do some extending of AlienSuperHero's prototype here */

Usage would be along the lines of:

PLAIN TEXT

JAVASCRIPT:

var MartianManhunter = new AlienSuperHero(3454, 'Mars', 'Martian', 'Flight', 'Telepathy', 'Shapeshifting');
if (fire) {
//This is a method defined in the parent class
MartianManhunter.losePowers();
}

Creating classes with Javascript

2007-06-05T11:08:46Z

Javascript is a prototype-based language rather than a class-based language (e.g. Java). For an explanation of the difference, see Mozilla's comparison of class-based and prototype-based languages.

In short, in a class-based language, objects are created by instantiating classes. The classes' list of properties and methods cannot be altered (e.g. added to) at runtime. A prototype-based language does not have the notion of a class. Everything is an object. A prototype-based object can have its list of properties and methods modified during runtime.

The examples below show how to create a class in Javascript. First we define a function that will behave as our constructor. Then we extend that function's prototype to include further functions that will behave as the class' methods. Note the use of the "this" keyword to refer to the prototype of the current object.

PLAIN TEXT

JAVASCRIPT:

//This is our constructor
function SuperHero(heroID, p1, p2, p3) {
this.heroID = heroID;
this.name = null;
this.power_1 = p1;
this.power_2 = p2;
this.power_3 = p3;
this.power_ultimate = p1 + p2 + p3;
}
//Now add some methods to the class
SuperHero.prototype.getPower1 = function() {
return this.power_1;
}
SuperHero.prototype.losePowers = function() {
this.power_1 = null;
this.power_2 = null;
this.power_3 = null;
}
SuperHero.prototype.setName = function(name) {
this.name = name;
}
SuperHero.prototype.alertProfile = function() {
var str = 'Hero Profile:\n' +
'Name: ' + this.name + '\n' +
'Name: ' + this.name + '\n' +
'Name: ' + this.name + '\n' +
'Name: ' + this.name + '\n' +
}

And now we have a simple class with a few simple properties and methods. Usage of the class would be something like:

PLAIN TEXT

JAVASCRIPT:

var Superman = new SuperHero(2331, 'Flight', 'Speed', 'Strength');
Superman.setName('Superman: Man of Steel');
var power_1 = Superman.getPower1();
if (kryptonite) {
Superman.losePowers();
}
Superman.alertProfile();