Jump to content

The ultimate community for Ruby on Rails developers.


Photo

Google Maps API - multiple maps on one page

rails4 google maps

  • Please log in to reply
8 replies to this topic

#1 ricsrock

ricsrock

    Passenger

  • Members
  • 4 posts

Posted 14 August 2013 - 08:24 PM

I am working on an an app that includes mapping of addresses. I've used various google maps gems in the past and have chosen to work with the google maps API directly for this app... just because I'd like to learn it, mostly.

 

I am doing the geolocation client side in this case.

 

A company can have many addresses. I need to display (potentially) multiple addresses on the page and I'm not sure how to call for multiple maps with what I have so far. The following code only shows a map for the first address. How do I implement this to show a single map for each address?

#companies/show.html.erb
@company.addresses.each do |address| %>
  <ul class='no-bullet'>
    <li><em><%= address.kind %></em></li>
    <li><%= address.address1 %></li>
    <li><%= address.city %>, <%= address.state %>  <%= address.zip %></li>
    <li id="address" data-address="<%= address.full_street_address %>" data-address-id="<%= address.id.to_s %>"></li>
  </ul>
			
  <div id="map-address-<%= address.id.to_s %>"></div>				
end

Then, I have this js:

$(function() {
  address_data = $("#address").data('address');
  address_id = $("#address").data('address-id');
  geocoder.geocode({address: address_data}, function(results, status) {
	centre = results[0].geometry.location;
	var mapOptions = {
      	zoom: 8,
      	center: centre,
      	mapTypeId: google.maps.MapTypeId.ROADMAP
    };
  	map = new google.maps.Map(document.getElementById('map-address-'+ address_id), mapOptions);
  	var marker = new google.maps.Marker({
		map: map,
		position: results[0].geometry.location,
		title: 'The Address',
  	});
  });
});

I'm not sure how to get that js function to loop over each address that it finds and display a separate map for each one... or even if that's the right question.

 

Thanks for any help. And thanks for your effort in getting this forum up and going again.



#2 mtmcfarl

mtmcfarl

    Passenger

  • Members
  • 2 posts

Posted 14 August 2013 - 08:44 PM

Presonally I would setup an ajax method and pass to it the ids of the addresses you'd want to encode.  Then in the success block of the ajax call populate the div for the map.

 

Here's a link to a railscasts that shows how to pass data to javascript.  You'll need to do that to geocode your maps from the addresses.

 

http://railscasts.co...?view=asciicast



#3 Kelli Shaver

Kelli Shaver

    Inspector

  • Administrators
  • 75 posts
  • LocationKentucky

Posted 14 August 2013 - 08:59 PM

Off the top of my head, assuming each address has a class 'address,' you could probably do something like this:

$(function() {
  addresses = $(".address");
  $(addresses).each(function() {
    var map_elem = this;
    var address_data = map_elem.data('address');
    geocoder.geocode({address: address_data}, function(results, status) {
      centre = results[0].geometry.location;
      var mapOptions = {
        zoom: 8,
        center: centre,
        mapTypeId: google.maps.MapTypeId.ROADMAP
      };
      var map = new google.maps.Map(map_elem, mapOptions);
      var marker = new google.maps.Marker({
        map: map,
        position: results[0].geometry.location,
        title: 'The Address',
      });
    });
  }
});


#4 ricsrock

ricsrock

    Passenger

  • Members
  • 4 posts

Posted 14 August 2013 - 09:28 PM

Thanks for your reply.

 

I'm getting this error:

 

TypeError: map_elem.data is not a function

 

  var address_data = map_elem.data('address');

 

Any idea where to from here?



#5 Kelli Shaver

Kelli Shaver

    Inspector

  • Administrators
  • 75 posts
  • LocationKentucky

Posted 14 August 2013 - 09:29 PM

Sorry, change it to:

var map_elem = $(this);

when you define map_elem ... line 4.

 

Also this:

<li id="address" data-address="<%= address.full_street_address %>" data-address-id="<%= address.id.to_s %>"></li>

should be:

<li id="class" data-address="<%= address.full_street_address %>" data-address-id="<%= address.id.to_s %>"></li>

And here, I kind of misread your markup...

$(function() {
  addresses = $(".address");
  $(addresses).each(function() {
    var addr_elem = this;
    var address_data = addr_elem.data('address');
    geocoder.geocode({address: address_data}, function(results, status) {
      centre = results[0].geometry.location;
      var mapOptions = {
        zoom: 8,
        center: centre,
        mapTypeId: google.maps.MapTypeId.ROADMAP
      };
      var map = new google.maps.Map(addr_elem, mapOptions);
      var marker = new google.maps.Marker({
        map: map,
        position: results[0].geometry.location,
        title: 'The Address',
      });
    });
  }
});


#6 ricsrock

ricsrock

    Passenger

  • Members
  • 4 posts

Posted 14 August 2013 - 09:53 PM

Now I have this:

$(function() {
  addresses = $('.address');
  $(addresses).each(function() {
	var map_elem = $(this);
    var address_data = map_elem.data('address');
    geocoder.geocode({address: address_data}, function(results, status) {
      centre = results[0].geometry.location;
      var mapOptions = {
        zoom: 8,
        center: centre,
        mapTypeId: google.maps.MapTypeId.ROADMAP
      };
      var map = new google.maps.Map(map_elem, mapOptions);
      var marker = new google.maps.Marker({
        map: map,
        position: results[0].geometry.location,
        title: 'The Address',
      });
    });
  });
});

And this for each address in the html:

<div class='address' data-address="<%= address.full_street_address %>"></div>

And I'm getting this error:

NS_ERROR_FAILURE: Component returned failure code: 0x80004005 (NS_ERROR_FAILURE) [nsIDOMWindow.getComputedStyle]

Scary-looking. 



#7 Kelli Shaver

Kelli Shaver

    Inspector

  • Administrators
  • 75 posts
  • LocationKentucky

Posted 14 August 2013 - 10:43 PM

Ah, here we go, this may help: http://stackoverflow...-chosen-address

 

In short, it looks like we need to pass the DOM object and not the jQuery object. Soooo...

<div class='address' data-address="<%= address.full_street_address %>" id="address-<%-adress.id.to_s%>"></div>

and then

var map = new google.maps.Map(document.getElementById('address-' + map_elem.data('address-id')), mapOptions);

Sorry, it's been a while since I've worked with the Google Maps API



#8 ricsrock

ricsrock

    Passenger

  • Members
  • 4 posts

Posted 15 August 2013 - 05:01 PM

Thank you very much.

 

I was also able to...

.get(0)

on the jQuery object to return the actual DOM object that the jQuery object refers to. So, this works, too...


var map = new google.maps.Map(map_elem.get(0), mapOptions);

Thanks again.



#9 Kelli Shaver

Kelli Shaver

    Inspector

  • Administrators
  • 75 posts
  • LocationKentucky

Posted 15 August 2013 - 05:09 PM

Oh, nice. That's a lot cleaner (though maybe not as descriptive).

 

Glad you got it working. :)







Also tagged with one or more of these keywords: rails4, google maps

0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users