Friday, February 11, 2011

SHARE - TruliaMap integration

One of my client want add TruliaMap to one page for each his community site.
Each community have info about country, state/province, city, zipcode/postal code.

We can use this info for search it on google map.

What you need to make it work are latitude, langitude and zipcode for the place we want to search

add this to your controller

require 'open-uri'
require 'openssl'

url = "http://maps.googleapis.com/maps/api/geocode/xml?address=#{((community.name.to_s+' ')+(community.city.name.to_s+' ' if community.city)+(community.state.code.to_s+' ' if community.state)+(community.zipcode.zip.to_s if community.zipcode)).gsub(' ', '+')}&sensor=true"
xml = open(url).read
hash = Hash.from_xml(xml)
if hash['GeocodeResponse'] and hash['GeocodeResponse']['result'] and hash['GeocodeResponse']['result']['geometry'] and hash['GeocodeResponse']['result']['geometry']['location']
@lat= hash['GeocodeResponse']['result']['geometry']['location']['lat'] if hash['GeocodeResponse']['result']['geometry']['location']['lat']
@lng= hash['GeocodeResponse']['result']['geometry']['location']['lng'] if hash['GeocodeResponse']['result']['geometry']['location']['lng']
end


add this to your view

<div class='show-safety'>
<br/>
<div id="truliamap" style="font-family:arial,verdana;text-align:center; width:350px; height:380px; background-color:B5CF5A;">
<!--<div id="truliamap_header" style="color:;font-weight:bold;font-size:14px;padding:1px;height:16px;">Distinctive Properties</div>-->
<p style="margin:0px;padding:0px;line-height:0px;">
<iframe style="border:none; padding:0px; width:340px; height:329px;" frameborder="0" width="340" height="329" scrolling="no"
src="http://truliamap.trulia.com/truliamapapi/?a=5fa9ac&u=fd63b6&sid=&cv=&v=map&d=source&lat=<%= @lat -%>&lng=<%= @lng -%>&s=large&r=&city=&state=&uid=&zip=<%= community.zipcode.zip.to_s -%>">your browser not compatible</iframe>
</p>
<div style="margin-left:5px;margin-right:5px;text-align:left;font-size:11px;">
<div style="float:left;width:100px;">
<a id="map_signup" href="http://www.trulia.com/tools/map/" target="_blank" style="color:;">Get your own TruliaMap</a></div>
<div id="map_logo" style="float:right;width:79px;cursor:pointer;">
<a href="http://www.trulia.com/" target="_blank">
<img name="mmlogo" id="mmlogo" style="padding:0px; margin:0px;border-width:0px;" src="http://static.trulia-cdn.com/images/map/mm/logo-grn.gif" border="0" alt="Real Estate Search">
</a>
</div>
</div>
</div>
</div>

You can generate the code here http://www.trulia.com/tools/map/

No comments:

Post a Comment