CODEWITHSUNDEEP
javascriptruby-on-railsgoogle-maps
Erika
Erika

Reputation: 2065

Google Maps Add a Marker to Map, then Store Latitude and Longitude in Ruby on Rails

I've had a look at the previous questions asked but i cannot quite seem to fit this in so here it is:

Basically, I have a Ruby on Rails project and i would like to have a page where the user pin points his location on a google map by adding a marker (only 1 should be permitted) and then store the longitude and latitude within the Ruby on Rails project i am working on.

I would like to know what would be the best approach to this (add map with Javascript?) but then how would i retrieve the latitude and longitude when the user hits a button within ruby on rails?

I would really appreciate any tips / links to relevant sites etc, as working in a ruby on rails environment is pretty new to me and i'm not sure how to go about doing the above.

Thanks a lot in advanced

Upvotes: 5

Views: 7300

Answers (5)

nick
nick

Reputation: 61

Cartographer plugin supports Rails 3+ ,

It has been re-written to work for huge numbe of markers and clusters

it supports painless integration of google maps v3 in rails , http://grati.la/cartorbflw

Upvotes: 0

mdemmitt
mdemmitt

Reputation: 157

If you are trying to use the Google Maps API in one of your Rails projects, then I would highly recommend using the YM4R plugin. The plugin provides a nice ruby-friendly object encapsulation of the Google Maps API. The README in the Rdoc has great exmample code for how to get started displaying the map and displaying one or more markers.

The big advantage of using the plugin is that the plugin abstracts the entire GMaps API behind ruby objects so that you can create and add to the map using only Ruby code. You won't have to write any Javascript...unless you want to ;)

Upvotes: 0

developer
developer

Reputation: 112

Here is a short example:

your_page.html

<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=xxx;hl=en" type='text/javascript'></script>

<script type='text/javascript'>       
       var draggable_marker = null;

       $(document).ready(function() {
          if (GBrowserIsCompatible()) {
            map = new GMap2(document.getElementById('map_div'));
            map.addControl(new GSmallMapControl());

            draggable_marker = new GMarker(new GLatLng(42.6976489, 23.3221545), {draggable : true,title : "Place this marker to your location");

           GEvent.addListener(draggable_marker, 'dragend', function() {  
              RubyGmap.setPosition(draggable_marker); 
           });
           GEvent.addListener(map, 'click', function(overlay, latlng, overlaylatlng){  
              RubyGmap.setMarkerPosition(draggable_marker, latlng); 
           });
          }
       });
</script>



<div id="map_div" style="width:690px;height:340px;" ></div>

ruby_gmap.js

RubyGmap = {    
setPosition: function(marker) {
    $('#latitude_field').val(marker.getLatLng().lat());
    $('#longitude_field').val(marker.getLatLng().lng());
},
setMarkerPosition: function(marker, latlng) {
    SELECTED = true;
    map.addOverlay(marker);
    marker.setLatLng(latlng);
    RubyGmap.setPosition(marker);
}
}

Upvotes: 4

Andy Gaskell
Andy Gaskell

Reputation: 31761

I think the first step would be to get your views working without a map. Enter lat/long manually so you know your views and controllers are working. Once you reach that point, take a look at the Google Maps API documentation. Add a map to your view, figure out how to add a marker. When you add/remove a marker you can update your lat/long inputs with JavaScript (I would use jQuery personally). At this point you could make the lat/long inputs hidden or read-only - unless there's a reason for your users to update the lat/long manually.

FYI - Google might suggest using V3 of the Maps API but when I tried using it there were too many missing pieces. I'd stick with V2.

Upvotes: 3

Garrett
Garrett

Reputation: 8070

I don't know the specifics, but I would check out the Google Maps API for a callback function that is called when a user drops a marker. I am sure there is one. When that callback function is called, it will be passed with the latitude and longitude. With that you can update your form attributes with the correct values.

Just to help you get in the right direction.

Upvotes: 0

Related Questions