Issue displaying more than one map

[mixellent]

I am using version 1.5.2 of your gem. In the following case, I am trying to display two maps dynamically using the below-mentioned JS code. I am able to display the first map only (the second map is not being displayed, I can only see its div wrapper with the correct id "second_map")

I have followed indications from the following two pages : 1- https://github.com/apneadiving/Google-Maps-for-Rails/wiki/Javascript-goodies 2- https://github.com/apneadiving/Google-Maps-for-Rails/wiki/%28Multiple%29-Maps

Here is the relevant code from my view:

<section class="map">
    <%= gmaps(:last_map => false, 
              :map_options => { "auto_zoom" => false, "zoom" => 16, :raw => "{scrollwheel: false, zoomControl: false, draggable: false}"}) 
    %>
    <%= gmaps(:map_options => { "id" => "second_map", "auto_zoom" => false, "zoom" => 16, :raw => "{scrollwheel: false, zoomControl: false, draggable: false}" }, :scripts => :none) 
    %>
</section>

And here is the code in my js file:

// Display both maps on page
Gmaps.map = new Gmaps4RailsGoogle();
Gmaps.second_map = new Gmaps4RailsGoogle();
Gmaps.load_map = function() {
    Gmaps.map.map_options.auto_zoom = false;
    Gmaps.map.map_options.zoom = 16;
    Gmaps.map.map_options.raw = {scrollwheel: false, zoomControl: false, draggable: false};
    Gmaps.map.initialize();
    Gmaps.map.create_markers();
    Gmaps.map.adjustMapToBounds();
    Gmaps.map.callback();
};
Gmaps.load_second_map = function() {
    Gmaps.second_map.map_options.auto_zoom = false;
    Gmaps.second_map.map_options.zoom = 16;
    Gmaps.second_map.map_options.raw = {scrollwheel: false, zoomControl: false, draggable: false};
    Gmaps.second_map.initialize();
    Gmaps.second_map.create_markers();
    Gmaps.second_map.adjustMapToBounds();
    Gmaps.second_map.callback();
};
Gmaps.loadMaps();

I believe something is wrong/missing in the JS code.

Thanks for this wonderful gem!

[apneadiving]

Sorry, just tried with 1.5.5 and it works fine: https://skitch.com/apneadiving/emjwx/dummy

Are you sure it's not some css issue? Do you have any error in your js console?

[mixellent]

Thanks for the quick answer,

I can confirm I cannot see any error in firebug console. Let me try to update to 1.5.5 now and see if it makes any difference.

Will report right away!

[mixellent]

Updated to 1.5.5, but I am still having the same issue.

Here is what I am getting: https://www.evernote.com/shard/s189/sh/cbda59d6-8c60-4607-a8ae-de56d35f60b0/0655e15f0744739028afbda365c021a9

Do I need to update the gmaps4rails base and google js files for the update from 1.5.2 to 1.5.5?

I am pretty sure it's JS related. Are you sure the way I am performing my JS code above is correct?

[apneadiving]

I copy/pasted your code to get the maps in my screenshot, so your code is correct.

Try to update the js but I can't see anything else to do...

What's your browser?

[mixellent]

Ouch, that is very strange..

I copied the latest coffeescript files to my assets and tried it again in both Chrome and Safari, but still no luck.. I get the first map displayed correctly, but no map on the second box.

Maybe something to do with the fact that I am loading the above view page from a JS function dynamically (using jquery's load function)? The js code mentioned above is then called upon my $.load callback.

[mixellent]

So I just tested my assumption above by moving the following code to my main view which is not loaded dynamically, and I was able to see both maps displayed correctly.

<section class="map">
    <%= gmaps(:last_map => false, 
              :map_options => { "auto_zoom" => false, "zoom" => 16, :raw => "{scrollwheel: false, zoomControl: false, draggable: false}"}) 
    %>
    <%= gmaps(:map_options => { "id" => "second_map", "auto_zoom" => false, "zoom" => 16, :raw => "{scrollwheel: false, zoomControl: false, draggable: false}" }, :scripts => :none) 
    %>
</section>

This leaves me to wonder how I can get more than 1 map displayed correctly on dynamically loaded page.

Here is my flow better explained: 1) User goes through index action of my controller, and lands on the index view 2) When user presses the more info link on an item, a jQuery overlay (type of popup) is being called 3) In the beforeLoad() function of this overlay I am performing a $.load call to the 'show' action of the same controller, which injects the <%= gmaps .. %> code from my 'show' view into the overlay box. 4) In the callback of this $.load function, I am performing the whole JS block of code mentioned above (Gmaps.map...)

--> end result: only first map displayed

[apneadiving]

This should not be a problem. I'd:

• add the js dependencies (google's + gem's js files) in the main page
• the partial you add to the map should not reload these dependencies, so add: scripts: :none to the gmaps options
• in your callback, you should only trigger: Gmaps.loadMaps();

[mixellent]

This is actually what I did.

1) In my main index I have the following:

<% content_for :footer do %>
  <% javascript_include_tag '//maps.google.com/maps/api/js?v=3.8&sensor=false&key=&libraries=geometry&language=&hl=&region=' %>
<% end %>

and in my application.js file I have:

//= require gmaps4rails/gmaps4rails.base
//= require gmaps4rails/gmaps4rails.googlemaps

2) My second gmaps object already contains a ":scripts => :none" option. Note, I tried applying this option to both gmaps object or just the first one but all leads to the same result.

3) In the JS callback, I am triggering the whole js code I mentioned at the top. (calling only Gmaps.loadMaps() means neither maps would be displayed)

[apneadiving]

Sorry I didn't give news since last time. I must admit I'm stuck here: I can't see why one map is displayed and not the other. Moreover without any js error...

I should see code to have a little grasp on it (a dummy app you' d set up). Without it I can't do anything :(

[mixellent]

Thanks for getting back to me about this Ben. I ended up using Google's direct js api for this:

// This function will load the Pickup and Dropoff location maps and also add a marker to each map
function displayMaps(pickupLat, pickupLng, dropoffLat, dropoffLng){
    // Logic for pickup address map
    pickupLatLng = new google.maps.LatLng(pickupLat, pickupLng);
    var mapOptions = {
      center: pickupLatLng,
      zoom: 16,
      autozoom: false,
      scrollwheel: false, 
      zoomControl: false, 
      draggable: false,
      mapTypeId: google.maps.MapTypeId.ROADMAP,
      mapTypeControl: false
    };
    var map = new google.maps.Map(document.getElementById("pickup-map-canvas"),
        mapOptions);

    // Add a marker to the map
    var marker = new google.maps.Marker({
      position: pickupLatLng,
      map: map,
      title:"Pickup location"
    });

    dropoffLatLng = new google.maps.LatLng(dropoffLat, dropoffLng);
    // Logic for dropoff address map
    var mapOptions2 = {
      center: dropoffLatLng,
      autozoom: false,
      zoom: 16,
      scrollwheel: false, 
      zoomControl: false, 
      draggable: false,
      mapTypeId: google.maps.MapTypeId.ROADMAP,
      mapTypeControl: false
    };
    var map2 = new google.maps.Map(document.getElementById("dropoff-map-canvas"),
        mapOptions2);

    // Add a marker to the map
    var marker = new google.maps.Marker({
      position: dropoffLatLng,
      map: map2,
      title:"Dropoff location"
    });
}

And calling the above JS method from my Rails view:

<section class="maps clearfix">
    <ul class="clearfix">
        <li>
            <div id="pickup-map-canvas"></div>
        </li>
        <li>
            <div id="dropoff-map-canvas"></div>
        </li>
    </ul>
</section>

<script>
    displayMaps(<%=@pickup_location.latitude%>,<%=@pickup_location.longitude%>,<%=@dropoff_location.latitude%>,<%=@dropoff_location.longitude%>);
</script>

It works quite well by displaying both maps in my popup dynamically. Still not sure how your method did not get to display both maps in my specific case, but I am happy with this solution for what I am trying to do here. I'd be happy to provide a sample app code for my scenario if you want, I could find some time this weekend.

[apneadiving]

Glad you found a solution, sorry the gem couldn't maje things easier :)

Sent from my iPhone

On 16 août 2012, at 15:11, Michael Hollander notifications@github.com wrote:

Thanks for getting back to me about this Ben. I ended up using Google's direct js api for this:

// This function will load the Pickup and Dropoff location maps and also add a marker to each map function displayParcelMaps(pickupLat, pickupLng, dropoffLat, dropoffLng){ // Logic for pickup address map pickupLatLng = new google.maps.LatLng(pickupLat, pickupLng); var mapOptions = { center: pickupLatLng, zoom: 16, autozoom: false, scrollwheel: false, zoomControl: false, draggable: false, mapTypeId: google.maps.MapTypeId.ROADMAP, mapTypeControl: false }; var map = new google.maps.Map(document.getElementById("pickup-map-canvas"), mapOptions);

// Add a marker to the map
var marker = new google.maps.Marker({
  position: pickupLatLng,
  map: map,
  title:"Pickup location"
});

dropoffLatLng = new google.maps.LatLng(dropoffLat, dropoffLng);
// Logic for dropoff address map
var mapOptions2 = {
  center: dropoffLatLng,
  autozoom: false,
  zoom: 16,
  scrollwheel: false, 
  zoomControl: false, 
  draggable: false,
  mapTypeId: google.maps.MapTypeId.ROADMAP,
  mapTypeControl: false
};
var map2 = new google.maps.Map(document.getElementById("dropoff-map-canvas"),
    mapOptions2);

// Add a marker to the map
var marker = new google.maps.Marker({
  position: dropoffLatLng,
  map: map2,
  title:"Dropoff location"
});

} And calling the above JS method from my Rails view:

It works quite well by displaying both maps in my popup dynamically. Still not sure how your method did not get to display both maps in my specific case, but I am happy with this solution for what I am trying to do here. I'd be happy to provide a sample app code for my scenario if you want, I could find some time this weekend.

— Reply to this email directly or view it on GitHub.

[mixellent]

No worries, thanks for maintaining this gem! Made me learn a bit about Google's maps JS API :)