Crit 3 – Video Teaser

11 May

Presentation Seminar

10 May

Crit 3 – Working Progress 2 – Design & Content

9 May

After Critique 3 presentation, Sir advice me to change something for my design and also the content’s colour.

So I working on the design and also include new content in it.

Here’s the final outcome, satisfied.

Home page

*Adding Donate button in About page, Haha. Who knows I can really earn a few bucks to at least sustain my blog hosting? :p

About Page

All the text change from light dark colour to pure white, and font change to Verdana.

Info Page

Share Your Green

Share Your Green

Crit 3 – Working Progress Database Update + Photo Upload

8 May

Include real adding photo function to my maps.

This is very hard for me…as well. So I keep on consulting lecturers, my friends and google for it. Without them, I don’t think I can made it on time.

First is of course to create a form which allow people to submit the image files of theirs.

Second is database to save the file, I create a folder call “upload” in the database, in which I use php to direct and save the image files in that folder, and name it follow with the title of the submission.

*I want to make it save as number+1, but fail, so I keep it as title first.

After consulting Mr Hafiz, my lecturer, creating a new row in the table to save the image name.

So that afterward it can be call out, based on the name of the image file.

The finalize table is this:

*I’ve studied and research for many days on how to do it, but without a proper guidance, I fail to make it, end up still need to consult my lecturer and solve this prob. Especially on saving the images and presenting the images on the markers.

After the success on presenting the images on the map, lecturers advice me to add a column of submission for people to write in their name.

So here it is:

Adding a new bar for people to insert name is much easier, as I’ve achieve success on the previous data key in like Title & message thanks to google tutorial, so I just somehow copy paste and edit some code in it to make name submission work.

Now this look much better.

Here’s the example of how markers show up on my map:

Been working up on my database recently and touch up all the details from google maps tutorial to my own Green Unity Map.

Here’s the final table I edit and create in phpMyAdmin after adding slot for images where I need it to call out the images I receive from people and present it out.

these data are real data as my friends are supporting and submitting their plants/flowers on my map. 🙂

Crit 3 – Poster

26 Apr

This is my poster design.

My basic idea is using the markers to form a tree, in which each marker means a person planting a tree/flower, so when it accumulate, the power grows up and only then it will able to help and change the world.

Green Unity = When everyone unite together and planting trees, only then the main or the mother of natural can survive and continue to be a beautiful land on Earth.

Together everyone help protect the Earth.

Background as the maps, as in my website http://www.greenunitymap based on: Google Maps.

Poster A2

Critique 2 – Working Progress 6 – Receive Information and Transfer Information

20 Apr

This is one of the hardest steps I encounter in this FYP project on Google Maps API. Anyway, I’ve learn so many things in order to accomplish this project, which most of it I never touch it before. From html(only know some basic), java, css, php, mysql, xml, Google Maps API….many many.

It’s not easy, but at least I breakthrough each problem, one by one.

In this process, I consult many people, join Google Maps Group in Google Group to consult professional there, consult my friend Jack Tan since he knows php and mysql. Consult lecturer, and also consult my other friends study in IT. Beside asking people, Google is the silence tutor of mine. Every problem, just keep digging, there sure be a solution there, but for a beginner like me, scripting and debugging hardly find in Google as well, need to understand and debug by myself. Many steps to go on, and many try and fail.

So here’s the success process, the correct path:



Start from creating a databases in my Cpanel. Need a database to receive the data, ya, for sure.



A user in the database.

Learning from:



Following the tutorials in Google Maps API, change my submitting button on Google Maps (Previously on Share Your Green page). This is much more better as it is more user friendly and easier for people to work on.

After users key in their data and click submit, there’ll be a text stated that the location had successfully added:



And the database in my phpMyAdmin would receive the data and gather it in the table I create before:



Then follow the toturial, create a table with the information in it.

Just follow all the process in the tutorial below. Keep testing, some process hard to understand, some process keep fail, and at the end, succeed.

Then another tutorial to take all the information in my phpMyAdmin SQL data and transform it into XML file, and show it on Google Maps.


So here’s the master sources for most of the problems I face at this stage. Thanks for friends in Google Maps Group for the reply and sharing these links and guide to me. It really leads me to figure what’s the prob I’m having for the moment and what should I do next. Before this, I seriously blur where I’m lacking. It’s a big leap, like a lighting shine in the dark. 😀

From Info Windows to a Database: Saving User-Added Form Data

:Shows how to prompt users to fill out information in an infowindow, and then save that information back into a database.

Using PHP/MySQL with Google Maps

Shows how to use PHP/MySQL and the Google Maps API to create a map that polls data from a database and shows as markers.

Creating a User-Contributed Map with PHP and Google SpreadsheetsShows how to create a user-contributed map, where users can register, login, and add markers to a map, all using PHP + Google Spreadsheets for the backend.

*Google have most of the tutorials of how to do it, as long as I dig for the information, read and understand, do and try, test and debug, and it will eventually lead me to succeed.

Critique 2 – Working Progress 5 – Improvement on Main Page

17 Apr

Keep tweaking my Maps for a better one.

Adding and changing few important things here:

  • Add Facebook Like/Share button for Facebook Share
  • Add Tweet button for Twitter Share
  • Add Search Bar for my Google Maps
  • Change the primary landing latitude of my google maps.

Google Maps Landing Point:

Page Improve 1

Page Improve 1

I’ve change my landing page to higher point so it can view the exact whole Earth map. This is because my target audience is world wide, so it’s possible to receive submission from anywhere on Earth. =D

Below this is my previous landing point, which is zoom into city level.

Blog Design1

Blog Design1

Facebook Like, Twitter Tweet

This is a very important one, since I’m researching on utilizing the power of social media to spread the words and message and unity everyone together on planting green. Facebook and Twitter would be the priority share button here. Might add more, still thinking and planning on it.

Page Improve 2

Page Improve 2

Code for my Facebook Like:

<iframe src=”;layout=button_count&amp;show_faces=false&amp;width=100&amp;action=like&amp;font=arial&amp;colorscheme=light&amp;height=21&#8243; scrolling=”No” frameborder=”0″ style=”border:none; overflow:hidden; width:100px; height:21px;” allowtransparency=”true”></iframe>


Code for my Twitter Share:

<a href=”; data-count=”horizontal” data-via=”WongJiaJun”>Tweet</a>


Google Search Bar

This is another very important function that need to be put into my Google Maps, for easier surfing on the big map, and find the exact location of users’ place. Improve the speed of them location their position and faster submitting their information to the map. Improve user friendliness of the map. =D

Page Improve 3

Page Improve 3

Code for Google Search Bar:


*Insert into my Google Maps Code.