Integrate Google Map Events with Flex and Rails

I was exploring the way to integrate GoogleMap on Flex with Rails as backend. My main focus was to detect the user events happening on Google Map using Flex, and then display the data sent by Rails to Flex. So, lets see what i did.
If you want to quickly know see the demo of my work, please click http://gmap-flex-rails.heroku.com/

Integrating Google Maps with Flex is so simple as Goolgle provides API for flash which allows Flex developers embed Google Maps in Flash applications.

Go to http://code.google.com/apis/maps/signup.html and get the api key .
Download the Google Maps API for Flash from the url http://code.google.com/apis/maps/documentation/flash/
I used trial version of Flash builder to build this flex apps
For Setting Up Your FlexBuilder Environment along with Google Map, please check the link “http://code.google.com/apis/maps/documentation/flash/tutorial-flexbuilder.html”
Now you start the application you will find the google maps working properly if you would have properly followed the steps in the above url.
Now, I simply created some place marks (balloons) with the latitude and longitude co-ordinates to for India,United States, Indonesia and China. (see demo).
When the map is ready googleMap_mapReady method will be called, in that, create a new ClientGeocoder and add success and failure event listeners for the geocoder.
This is how the flex code looks like.
[source language=”xml”]



[/source]
On success, geocoder_geocodingSuccess method will be called and there we create “placemark” with some lat long, create a marker, add that marker to the googlemap.
The below code show how it has been done .
[source language=”javascript”]
var India:LatLng = new LatLng(35.86166, 104.195397);
var marker1:Marker = new Marker(India);
googleMap.addOverlay(marker1);
markerOnClick(marker1);
private function markerOnClick(marker:Marker):void
{
marker.addEventListener(MapMouseEvent.CLICK,googleMap_clickevent);
}
[/source]
When the marker is clicked googleMap_clickevent method will be called and am checking the lat-long of the clicked location with my local data. If it matches, then call the corresponding HTTPService for that location and load the data for that location, the flex code looks like this
[source language=”xml”]
private function googleMap_clickevent(event:MapMouseEvent):void
{
location=check(event.latLng.toString())
//httpservice call
srv.send();
}
[/source]
the Httpservice will look like this
[source language=”xml”]

[/source]
By default the location is assigned to some name like location =”china” , the http service will be called in the init() method like “service.send();”
and when the user clicks on some marker the location will be reassigned and the call is made to the server.
The Rails backend will simply looks like..
[source language=”ruby”]
def show_by_name
@country = Country.find_all_by_name(params[:name])
respond_to do |format|
format.html # show.html.erb
format.xml { render :xml => @country}
end
end
[/source]
In the Flex side, read the result data and update the related panel.
[source language=”xml”]







[/source]
Hope, you will like it. We will soon publish the source code in GITHub.