Nov 16 2009

goog.ui.TabPane: Create tabs with Google Closure

Category: google closure — Davide Zanotti @ 4:08 pm

Hi everyone,
by starting with this post I would like to begin a series of posts dedicated to the new javascript library released by Google: Closure!
Today I will focus my attention on tabs creation, since this is maybe the most common user interface component in a web application.
In order to create Closure tabs, we need to import the base js file (/goog/base.js) and then require the class goog.ui.TabPane. Inside our head (or body) we will get the following:

1
2
3
4
<script src="closure/goog/base.js"></script>
<script type="text/javascript">
    goog.require('goog.ui.TabPane.TabPage');
</script>

Continue reading “goog.ui.TabPane: Create tabs with Google Closure”

Tags: , ,

Nov 26 2008

Playing with Google maps API – part three: Geocoding and custom overlay

Category: javascript — Davide Zanotti @ 1:45 pm

The main feature provided by the Google maps API, is the ability to convert an human readable location, such “Milan, Italy” to a geographic location represented by latitude and longitude, this process is called geocoding. The GClientGeocoder is the class which provide this service, through the method getLatLng() which accepts two arguments: a string representing an address and a callback function that will be called once the coordinates are retrieved. If the address will be successful located, the callback function will be invoked by passing a GLatLng object as argument, otherwise the function will receive a null. GLatLng is an object which represents a geographic location (latitude and longitude).

To request a geolocation for a given address we use a similar code:

Continue reading “Playing with Google maps API – part three: Geocoding and custom overlay”

Tags: , , , , , , , , , , ,

Nov 17 2008

Playing with Google maps API – part two: Create custom controls

Category: javascript — Davide Zanotti @ 2:11 pm

Today we are going to see how to realize custom controls to add to our Google maps powered map.

The only concept that should be clear, in order to achive the goal, is what prototype is and why we must use it.

Javascript is not a really object oriented language, so we can’t really talk about classes and subclassing (using extends like in Java or Actionscript), but however we can create functions that act as constructor for new js objects, and we can inherit properties from an object to another by using the prototyping technique.

Continue reading “Playing with Google maps API – part two: Create custom controls”

Tags: , , , , , , , ,

Nov 14 2008

Playing with Google maps API – Part one

Category: javascript — Davide Zanotti @ 12:00 pm

Ok, as announced in the previous post, let’s start to analyze how to work with Google maps (Javascript) API.
Preface: while I was writing I have been a little too verbose, so I won’t respect the previously declared steps, but I will add/modify them while posting.

Continue reading “Playing with Google maps API – Part one”

Tags: , , , , , , ,

Nov 13 2008

Playing with Google maps API

Category: javascript — Davide Zanotti @ 9:38 pm

worldIn my spare time, these days I’m looking at Google maps (Javascript) API, because relatively soon, I will have to realize a web site in which include a custom and interactive map.
In detail the site will be the official web page of an Italian bikers group, which will attempt to enter in the World Records Guinness as the largest bike aggregation of the same model (and I’ll be one of those crazy men! :-)))
The user will be able to subscribe to the event indicating his city and some other details.
And is here that the interactive map comes into play! It will shows the Italian map sprinkled by colored labels anchored to the main cities and indicating the total of subscribers in that city.
The label’s color will vary due to that number (green = few bikers, yellow = so so, red = many bikers).

Continue reading “Playing with Google maps API”

Tags: , , , , ,