CODEWITHSUNDEEP
ruby-on-railsrubygoogle-maps
banditKing
banditKing

Reputation: 9579

Adding a google map in my rails app- need help getting started without using a Gem - would like to write custom code

I have a rails app with a database of listings:addresses with coordinates in it. Currently Im showing the listings on the homepage as the app loads using the index method:

<h1>Listings</h1>

<table>
  <tr>
    <th>id</th>
    <th>Name</th>
    <th>Phone Number</th>
    <th>Latitude</th>
    <th>Longitude</th>
    <th>Cuisine</th>
  </tr>

<% count = 0 %>
<% @listings.each do |listing| %>

 <!--<%count = count.to_i + 1 %> -->
  <tr>
    <td><%= listing.id %></td>
    <td><%= listing.name %></td>
    <td><%= listing.telephone %></td>
    <td><%= listing.latitude %></td>
    <td><%= listing.longitude %></td>
    <td><%= listing.cuisine %></td>
    <td><%= link_to 'Details', listing %></td>
    <td><%= link_to 'Edit', edit_listing_path(listing) %></td>
    <td><%= link_to 'Delete', listing, confirm: 'Are you sure?', method: :delete %></td>
    <td><%= link_to 'Around', around_listings_path(:latitude => listing.latitude, :longitude => listing.longitude) %></td>
    <td><%= link_to 'Menus', %></td>
    </tr>
<% end %>
</table>


<br />

<%= link_to 'New Listing', new_listing_path %>


<br/>
    <%= debug(params) if Rails.env.development? %>
    <br/>

What Id like to do is add a new page which shows the listings on a map. Any suggestions on where to start? I'm not very familiar with Javascript, which I think I might have to know right?

Upvotes: 2

Views: 2456

Answers (2)

RadBrad
RadBrad

Reputation: 7304

Using gmaps4rails, it's pretty straight forward:

In a controller:

def yourmap
  @json = YourModel.all.to_gmaps4rails
end

In your view:

<%= gmaps({"markers" => {"data" => @json , "auto_adjust"=>false, }}} ) %>

There's a bit more to it than what I've shown, but just to illustrate the basic concept of using gmaps4rails! YourModel will have to have lat and lon attributes added.

Upvotes: 1

shime
shime

Reputation: 9018

First of all, why are you using latitude and longitude? I would not have a good opinion of a page on which I would have to enter those details about my listings.

That said, let me explain the simplest way of using Google Maps.

Just use the image tag with this link as a src

https://maps.googleapis.com/maps/api/staticmap?center=#{address}&zoom=14&size=300x300&markers=#{address}&sensor=false

Where address is 51+Wall+St, NY, or whichever it is. You just have to substitute spaces to pluses in the address. Note that I'm also using markers, with &markers=, to mark the position of the marker.

Now about that javascript, you probably want to change the image when address changes (or latitude or longitude).

That's simple to accomplish with jQuery.

Let's say your map image is this <img id="map_image" src="https://maps.googleapis.com/maps/api/staticmap?center=51+Wall+Street,NY&zoom=14&size=300x300&sensor=false"/>.

Just change the src of img if some text input for address changes

$('input#listing_address').live('change',function(){
address = $(this).val().replace(/ /g,"+");
$('#map_image').attr("src","https://maps.googleapis.com/maps/api/staticmap?center=" + address + "&zoom=14&size=300x200&sensor=false");
});

Upvotes: 5

Related Questions