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