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

Highcharts with grouped categories

Completely Uninstall and Install Rubymine on ubuntu