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

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

View the generated source code in internet explorer with a bookmarklet

internet explorer sucksAs all knows, in browser like Firefox, in order to view the generated source code of a page (that is the final HTML which the browser display into the window, so it includes JS generated nodes and SSI inclusions) we have simply to select all (ctr+A or command+A on a Mac) and choose “View selection source”. Internet Explorer instead doesn’t offers the ability to view the generated source but only the basic HTML code (whic doesn’t include dynamic generated content). To have such feature, I’ve used the innerHTML property to get the final content of <html> tag, and I’ve realized a bookmarklet to call after the loading of the page. The bookmarklet opens an 800×600 resizable popup with a textarea that shows the HTML code.

This is the code of the bookmarklet:
to use it, simply copy and paste into the ie address bar and press enter ;-)

Associate custom file extensions to the default Aptana’s text editor


In a project which I’m working on, the team make an intensive use of text file to include with SSI, and these files are named conventionally┬á .inc, Aptana by default opens these custom extensions with the default system’s editor (notepad on windows). We can tell Aptana to open the .inc or whatever extension we want with the Aptana’s text editor by simply doing the following: Choose window/preferences/Aptana/Editors/Generic Text, click add and then type our desired extension (in my case *.inc). Now if we double click over a .inc file in the project tree view, it will be opened inside Aptana.
ps. The path to the settings panel may change according to the version of Aptana/Eclipse installed (I’m using the Aptana plugin for Eclipse 3.4.1)

CSS tip: if you can’t remove the evil, you can imprison it!

prisonYesterday a colleague asked me to help her in debugging a crazy behavior of internet explorer 6 (all the others browsers worked fine!), which caused the wrong display of the boxes inside the page. The bug was caused by the rendering of a jQuery powered div, ie one of those things like:


In somehow the jQuery’s function used, annoyed ie6 due to the CSS styles that it applied to the div. After a couple of minutes of debugging, I realized that we should have needed to spend a full day or more to fix the problem at the root (due to the complexity of the page content). So I decided to isolate the problem by using the CSS positioning technique. Fundamentally I put the div (“#myDivID”) into another div with relative position and set the first with an absolute position, in this way:

<div style="position: relative; width: Npx; height: Npx;">
    <div id="myDivID" style="position: absolute; top: 0; left: 0;"></div>

With this expedient “myDivID” is now “trapped” into the parent div and it can’t influence the others page elements.

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

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