Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

like image 628
Erika Avatar asked Nov 17 '09 02:11

Erika


1 Answers

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);
}
}
like image 140
developer Avatar answered Oct 04 '22 17:10

developer