Logo Design Brain Storm

June 30, 2008


Google Map

June 30, 2008

I’ve already uploaded this google map file on our team’s site.


A geocoding feature does not work for UK postcodes

June 30, 2008

Google Maps API provides a geocoding feature, for finding the latitude and longitude of places or addresses; but it does not work for UK postcodes

There are various solutions out there for using 3rd party services and importing the data to be used with Google Maps, or for using community built databases for the info. However, I’ve had a few people ask me about doing it just though Google.

It is possible — Google AJAX Search API does provide geocoding for UK postcodes. We need to use the two APIs in harmony to achieve our result.

So here it is.

Step by step

I’ll assume you already know how to use Google Maps API, and you came here just looking how to add geocoding for the UK.

Step 1.

Grab a two API keys, if you already have your Google Maps API key, just grab an AJAX search key. You can get them here:



Step 2.

Google will give you a sample page, you need to stick your two API keys at the top of the page, followed by a reference to your Javascript file:

<script src="http://maps.google.com/maps?file=api&v=2&key=*KEY*"

<script src="http://www.google.com/uds/api?file=uds.js&v=1.0&key=*KEY*"

<script src="gmap.js" type="text/javascript"></script>

Ensure the reference to your Javascript file comes after the two API keys.

Step 3.

In addition to the Google Maps API stuff, you need to stick a reference to Google local search at the top of your Javascript file:

var localSearch = new GlocalSearch();

You can grab my Javascript file right here, but remember you’ll need to change the API keys.

Step 4.

The key to this Geocoder is only a single function:

function usePointFromPostcode(postcode, callbackFunction) {

function() {

if (localSearch.results[0]) {
var resultLat = localSearch.results[0].lat;
var resultLng = localSearch.results[0].lng;
var point = new GLatLng(resultLat,resultLng);
alert("Postcode not found!");

localSearch.execute(postcode + ", UK");

It takes 2 arguments; postcode is the postcode you want to look for, and callbackFunction is the function you wish to run on the results.

Why is it necessary to do it this way? It is the way AJAX, and thus Google AJAX Search API, works – the request is sent, and a callback function is designated to handle the results returned, when they are ready.

In our case, the callback function can do whatever you want with the results, which will come in the format of a GLatLng (often just called a point); I’ve supplied 2 sample functions, placeMarkerAtPoint and setCenterToPoint which do pretty much what they sound like they do.

Step 5.

Putting aside accessibility and graceful degradation for the sake of simplicity in this tutorial, the last step we need is just to add some hooks into our Javascript:

<input type="text" id="postcode" size="10" />
<input type="submit" value="Place Marker" onclick="javascript:
usePointFromPostcode(document.getElementById('postcode').value, placeMarkerAtPoint)" />

We have a field for inputting a postcode, and I’ve added a button for placing a marker there. Where I have placeMarkerAtPoint you can put a reference to your own function, or you can even add a function right in there, like this:

<input type="submit" value="Do whatever" onclick="javascript:
function (point) {
alert('Latitude: ' + point.lat() + '\nLongitude: ' + point.lng());
})" />

Reference: http://www.tomanthony.co.uk/blog/geocoding-uk-postcodes-with-google-map-api/

Fixed Layout of Form Registration HTML

June 29, 2008

Building Mob-Housing Student info Database using Navicat

June 28, 2008

What is Navicat?

Navicat MySQL is a powerful MySQL Database Server administration and development tool. It works with any MySQL version from 3.21 or above and supports most of the latest MySQL features including Trigger, Stored Procedure, Function, Event, View, Manage User, and so on.

It is also easy to learn for new users since I learned about it in CMS collective with Cliff, and fortunately I learned enough to Make our Data base for Mob-Housing.
With its well-designed Graphical User Interface(GUI), Navicat MySQL lets me quickly and easily create, organize, access and share information in an easy way.

Navicat MySQL is available on Mac OS X. I am using MAMP.

MAMP has a set of free software programs commonly used together to run dynamic Web sites or servers:

* Mac OS X, the operating system;
* Apache, the Web server;
* MySQL, the database management system (or database server); * P for PHP, Perl, or Python, all programming languages used for web development.

It can connect users to local/remote MySQL Server, providing several utilitarian tools such as Data/Structure Synchronization, Import/Export, Backup and Report to facilitate the process of maintaining data.

Big thanks to Rob and Cliff for providing us with this elective 😉

Mob-Housing Registration Form up and running on the Server

June 27, 2008

This is how the submission page will look like, I will implement further changes later today

Testing result

June 27, 2008

Result of HTML form testing 


Gender : 1 male, 1 female

Nationality : Japan, Unknown

Course : Fashion Design & Technology, Interior Design


The main purpose was testing a form and users did not have enough time, thus there are not answers for survey questions.




         1 student did not understand the name of field ‘study field’.

         2 users felt confusing with using priority option

         some students do not want to write down their e-mail address due to receiving spam mail

–     1 student did not find prefered language so he wanted more language options(ex. german, portugese…)



Suggestions from users


         less priority options : 8 is too many

         to choose language options as multiple (ex. Taiwanese and Japanese)

         to need party and movie theatre option

         relation with university and transportation

         1 student needed more specific area name than only zone

         need some user guide text : explanation about fields and how to use it

Some suggestions were useful but it is impossible to make it due to time.