Integrating google maps in rails without gmap4rails gem

 To Integrate google maps in rails application without gem

1.) Go to the google maps https://developers.google.com/maps/web/

2.) Click Get a key




3.) Go to the page where you want to show the google maps and add this tag


<script src="https://maps.googleapis.com/maps/api/js?v=3&key='YOURAPIKEY'&region=US" type="text/javascript"></script>

4.) Create a div for map
  
        <div id="map-container" style='width: 360px; height: 400px;'>
           <div id="map-canvas"></div>
        </div>

5.) Now  what you need is latitude and longitude for the marker to show for that in rails you need to use a gem "Gecoder" (https://github.com/alexreisner/geocoder)

6.) In your Model here is School
  geocoded_by :address
  after_validation :geocode
  attr_accessor :address, :latitude, :longitude
 
7.)  Follow the steps and get lat and long from the address of your model or by some other way as @lat and @long now
  geo = Geocoder.search(@school.serialized_options[:address])
  @lat = geo.first.data['geometry']['location']['lat']
 @long = geo.first.data['geometry']['location']['lng']

8.) In that page write a litte bit of js supported by google

  var myLatlng = new google.maps.LatLng(<%= @lat %>, <%= @long%>);
    var mapOptions = {
        zoom: 13,
        center: myLatlng,
        mapTypeId: google.maps.MapTypeId.HYBRID
    };
    var map = new google.maps.Map(document.getElementById("map-canvas"),
            mapOptions);

    var marker = new google.maps.Marker({
        position: myLatlng,
        map: map,
        title: '<%= @school.name %>',
        animation: google.maps.Animation.BOUNCE
    });
    marker.addListener('click', toggleBounce);

    function toggleBounce() {
        if (marker.getAnimation() !== null) {
            marker.setAnimation(null);
        } else {
            marker.setAnimation(google.maps.Animation.BOUNCE);
        }
    }
if you did everything properly  things will work fine.
for more Information about google map api go to the this link: (https://developers.google.com/maps/documentation/javascript/)

Or can ask for help at any time thanks

Comments

Popular posts from this blog

Installing Wowza Streaming Engine on ubuntu

Fresh Server Setup with Nginx, Passenger and Rails

Upload a file in S3 without any form