2

Im trying to use geocoder for displaying a location based on an address.

My question is, what do I put in the view to show an interactive map once I got the Lat and Long from the address the user inserted in the database?

my address model

 belongs_to <another model>
 attr_accessible <all addresses attributes including latitude and longitude>

 geocoded_by :address

 after_validation :geocode, :if => :address_changed?

The fields Latitude and Longitude are automatically calculated after I insert the address.

I've followed Ryan's Rail Cast tutorial but at the end, instead of displaying a static image I want to display a map, google maps interactive style. How can I achieve this?

If've taken a look at Google-Maps-for-Rails but couldn't understand how very well like how to get a single map on location in the show view.

3
  • If you have the lat/long, you don't necessarily need the GMFR gem. You could just use the standard Google maps api: developers.google.com/maps
    – stewart715
    Commented May 10, 2012 at 18:11
  • I have the lat and long beacause Geocoder calculates this when I enter and submit an address. Therefore, don't I need to like, "call" the map api in the view with the coords providade by geocoder?
    – Silver
    Commented May 10, 2012 at 18:15
  • I understand. But you can use the standard Google Maps JavaScript API snippet for that, no special gem required.
    – stewart715
    Commented May 10, 2012 at 18:18

2 Answers 2

2

Take a closer look at Google-Maps-for-Rails. That gem makes it trivial, and the instructions on how to get the interactive map in your view are quite clear:

(I'll presume your Address model belongs_to a User model. Change names as appropriate.)

If you just want the one specific user on the map, of course you could change the controller:

@json = User.find(params[:id]).address.to_gmaps4rails

In your view:

<%= gmaps4rails(@json) %>
2
  • I can't believe this. I actually was doing that very same code, but nothing was displaying...I can't believe all that was missing was *= require gmaps4rails in the application.css file. Thank you
    – Silver
    Commented May 11, 2012 at 9:17
  • @Silver Nice. Love those “doh!” moments.
    – ghoppe
    Commented May 11, 2012 at 15:25
2

There are many helpful examples for the Google Maps API available here. In the simplest case, you can do something like this:

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
  var lat = <%= @model.latitude %>, 
      lon = <%= @model.longitude %>,
      map;
  function initialize() {
    var myOptions = {
      center: new google.maps.LatLng(lat, lon)
    };
    map = new google.maps.Map(document.getElementById('map_canvas'),
        myOptions);
  }

  google.maps.event.addDomListener(window, 'load', initialize);
</script>
<div id="map_canvas"></div>

Just replace @model.latitude and @model.longitude with the corresponding geocoded fields in your model.

1
  • It seems to be a simple good idea, but when I try it all I get is a grey box where the map was supposed to be. And yes, i've replaced the @model.latitute/longitude for mine. I've also declared #map_canvas in css setting a height and width. Sorry for these questions im new at this :/
    – Silver
    Commented May 10, 2012 at 18:32

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.