-1

I jus started learn ruby on rails and currently I am creating my first rails app. And I ran into some problems. In my app, I would like to get user's position (latitude, longitude). So I can put the button "find me" and return user's locations. But I would like to load my page and show my position (latitude, longitude), don't press any buttons. And then use lat and lng in my controllers. How can I do this?

Iuliia
  • 31
  • 3

1 Answers1

0

Add the below script in your view page.You may go ahead and modify this as needed as to show/customise messages and buttons.Remember to have a dedicated div with id="map-canvas" to show you map on the page. I have used geocomplete.js to show map and allow user to enter places from search box .You may remove the scripts using geocomplete if not needed.

    <script type="text/javascript">
    // Enable the visual refresh
    // google.maps.visualRefresh = true;
    var map;
      var mapOptions = {
        zoom: 8,
        mapTypeId: google.maps.MapTypeId.ROADMAP
      };
    function initialize() {
      map = new google.maps.Map(document.getElementById('map-canvas'),
          mapOptions);
        // Try HTML5 geolocation
      if(navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(function(position) {
          var pos = new google.maps.LatLng(position.coords.latitude,
                                           position.coords.longitude);
          var infowindow = new google.maps.InfoWindow({
            map: map,
            position: pos,
            content: '<p>You are here!</p>'
          });
          map.setCenter(pos);
        }, function() {
          handleNoGeolocation(true);
        });
      } else {
        // Browser doesn't support Geolocation
        handleNoGeolocation(false);
      }
    }//initialize ends
    function handleNoGeolocation(errorFlag) {
      if (errorFlag) {
        var content = '<p>Unable to find the current location</p>';
      } else {
        var content = '<p Your browser doesn\'t support geolocation.</p>';
      }
      var options = {
        map: map,
         zoom: 5,
        position: new google.maps.LatLng(60, 105),
        content: content
      };
      var marker = new google.maps.Marker({
          position: new google.maps.LatLng(60, 105),
          map: map,
          animation: google.maps.Animation.DROP,
          title: 'Sorry,we were unable to find your location'
      });
    marker.setAnimation(google.maps.Animation.BOUNCE);
      var infowindow = new google.maps.InfoWindow(options);
        google.maps.event.addListener(marker, 'click', function() {
        infowindow.open(map,marker);
      });
         infowindow.open(map,marker);
      map.setCenter(options.position);
    }//handleNoGeolocation ends

    //load the page and execute above scripts
    $(document).ready(function(){
      $('#map-canvas').html("<p class='text-center text-alert'>Loading map...</p>").show(3000);
    //load the map after 2 seconds
    setTimeout('initialize()', 3000);
    // $("#geocomplete").geocomplete({
    //   map: ".map-canvas-guest"
    // });
    //you may use this or remove this section using geocomplete.js if not needed. 
    $("#geocomplete").geocomplete();
    $("#geocomplete").geocomplete(mapOptions).bind("geocode:result", function(event, result){ 
          console.log(result.formatted_address);
       //use this user entered address and you may call ajax here as well 
      })
    })//document ends
  </script>
Milind
  • 4,535
  • 2
  • 26
  • 58