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
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
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
8.) In that page write a litte bit of js supported by google
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
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'®ion=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%>);if you did everything properly things will work fine.
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);
}
}
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
Post a Comment