This blog embraces totally the foundamentals of the Open Source Spirit and Soul. Hence all material founded here is free and the user may read, copy, manipulate, reproduce it all, without limitations of any kind, no copyright allowed here!
Nevertheless the author will appreciate if the user will cite him, when using his scripts, as a recognition of his work.
Knowledge is the prime right of umanity and has to be protected and shared with every possible means.
abidibo.

Thursday, November 26, 2009

Hi,
today I'll post here the code of a class useful to obtain a conversion of a string address into geographical coordinates latitude and longitude.
Maybe sometimes you have to represent some points (i.e. hotels) on a map, dinamically, that is getting datas from a database. That means that you need to insert the hotel geographical coordinates in the database, as it's surely better to make the conversion before inserting data in the DB than on the fly when showing the map, that because the conversion can take a bit of time, or even fail.
So the situation I considered is the following one: we have a form with some fields like address, cap and city, and two fields hidden or readonly that contains the latitude and longitude values. The action of this form inserts this values in the DB, so these latitude and longitude are the same that will be used to generate the map in the public view (soon another post about that).
So the html part of the form could be something like

Now the goal was to write a javascript class that shows a map with a marker in the position associated to the address already inserted in the form (that is make the conversion), make the marker draggable and insert the latitude and longitude values into the 'lat' and 'lng' input fields, so that when submitting the form they could be written in the database.
So here goes my javascript class that clearly requires mootools, I omit here mootools inclusion.

element: the DOM element or its id of the referer, the element from which we inject the map into the document, taking care of some options explained below.

latField: the DOM element or its id of the input field we want to write the latitude to

lngField: the DOM element or its id of the input field we want to write the longitude to

address: (string) the address to convert

options: some options in the form {'opt1':'val1', 'opt2':'val2'...}

OPTIONS

(string) canvasPosition : inside | over, default over. Is the position of the map object we create. inside: the map container is inserted into the element defined in the constructor. over: the map container is positioned absolutely, its top left corner in the same position as the top left corner of element

(string) canvasW: default '400px'. The style width of the map (i.e. 400px, 100%) . The % values are allowed only for canvasPosition='inside'.

(string) canvasH: default '300px'. The style height of the map.

(int) zoom: default '13'. The zoom value when a result is found

(int) noResZoom: default '7'. The zoom when no result is found (with the conversion)

(float) dftLat: default: '45'. The default latitude of the center of the map when no result is found

(float) dftLng: default '7'. The default longitude of the center of the map when no result is found

The conversion may give a result or not. If not the map is centered in a point defined by (dftLat, dftLng) and with zoom = noResZoom.
In this case but even if the conversion is not exactly what we expect, we may drag the marker in order to positioning it in the desired position. Than click on the button convert and the computed point will be the point represented by the marker new position.

That was the class code, let's we see now an example about its usage, always considering our form written above

The map is generated when clicking the "convert" button, first the google library is charged, passing a reference to our function as callback. In our function convert() the object is constructed and the method showMap is invocated. The map is shown. To dispose it it's enough to click outside the map object.
That's all for now, soon a class to show a map with many markers and info windows.