Search code examples
javascriptruby-on-railsruby-on-rails-3google-mapsgmaps4rails

Ruby on Rails - Gmap4Rails popup for a bigger map


I'm a rails beginner and am using rails 3.2.3.

In my app I'm using the awesome Google-Maps-for-Rails by apneadiving (it's just awesome)

Everything works wonderfully but I have got an issue and didn't find any answers here and there for what I want to do.

Basically I'm displaying a small map and wanted to have a button bellow it and when users clicked it, a bigger map would be displayed of that location. (basically it would be the same map, only with a bigger size)

Something like this:

<input type="button" onclick="myFunction()" value="Show a bigger map" />

Bu my question is what to put inside that javascript function and how do I say a bigger map with @gmaps values should be displayed?

Create a new id with bigger With and Height in the gmaps css? How to provide the JS the data from my @gmaps?

Any tips?

Sorry if this is a naive question, I'm still getting used to RoR and the Gmaps4Rails gem. Thanks in advance for your time.

Regards


Solution

  • I'm not quite sure of what you want to do, but I'd say it's really easy to copy the parameters of one map to another.

    Indeed, the whole code needed to create a map is visible in your html, simply reproduce the steps.

    The gmaps_helper will do the job for your little map. Basically, it follows the following steps:

    Gmaps.map = new Gmaps4RailsGoogle();
    //mandatory
    Gmaps.map.initialize();
    // then some code depending on your options
    Gmaps.map.markers = some_array;
    Gmaps.map.create_markers();
    

    Whenever you want to duplicate the map, you should simply follow the same steps:

    Gmaps.bigmap = new Gmaps4RailsGoogle();
    //mandatory to have the map created in the proper place
    Gmaps.bigmap.map_options.id = the_id_of_your_html_div;
    //still mandatory
    Gmaps.bigmap.initialize();
    
    //copy the specific parameters from the other map
    Gmaps.bigmap.markers = Gmaps.map.markers;
    Gmaps.bigmap.create_markers();