application.html.erb
<head>
<title>Wedding Rooms</title>
<%= stylesheet_link_tag "application", media: "all", "data-turbolinks-track" => true %>
<%= javascript_include_tag "application", "data-turbolinks-track" => true %>
<%= csrf_meta_tags %>
</head>
_form.html.erb :-
<script src="https://maps.googleapis.com/maps/api/js?key=
AIzaSyAvuPSxdugPS2FJQibo-i78wVZHWgmKemk"
></script>
<link href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" rel="Stylesheet"></link>
<script src='https://cdn.rawgit.com/pguso/jquery-plugin-circliful/master/js/jquery.circliful.min.js'></script>
<script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js" ></script>
<div class="field">
<%= f.label :address %><br>
<%= f.text_field :address, id: "gmaps-input-address", class: "form-control" %>
<br>
<div id="gmaps-canvas"></div>
<div id="gmaps-error"></div>
<%= f.hidden_field :latitude, id: "location_latitude" %>
<%= f.hidden_field :longitude, id: "location_longitude" %>
</div>
show.htmlerb
<% if @product.address.present? %>
<p>
<strong>Address:</strong>
<%= @product.address %>
<div id="map"></div>
</p>
<% else %>
<% end %>
<script type="text/javascript">
setTimeout(function(){
$(document).ready(function(){
$('.bxslider').bxSlider({
auto: true,
autoControls: true,
stopAutoOnClick: true,
pager: true,
slideWidth: 200
});
});
}, 2000);
</script>
<style>
#map {
height: 400px;
width: 100%;
}
</style>
<script>
function initMap() {
var lat1 = <%= @product.latitude %>;
var long1 = <%= @product.longitude %>;
var uluru = {lat: lat1, lng: long1};
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 15,
center: uluru
});
var marker = new google.maps.Marker({
position: uluru,
map: map
});
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAvuPSxdugPS2FJQibo-i78wVZHWgmKemk&callback=initMap">
</script>
Migration :-
add_column :products, :latitude, :decimal, {:precision=>10, :scale=>6}
add_column :products, :longitude, :decimal, {:precision=>10, :scale=>6}
