I'm trying to add Google Map in my Rails app with
Rails 5.1.6 and Ruby 2.5.0 using the gem "gmaps4rails"
But I'm only seeing this BLUE color on the map.
I followed all the step mention at the documentation gem 'gmaps4rails', here
Index Page
<script src="//maps.google.com/maps/api/js?key=API_KEY" type="text/javascript"></script>
<script src="//cdn.rawgit.com/mahnunchik/markerclustererplus/master/dist/markerclusterer.min.js"></script>
<script src='//cdn.rawgit.com/printercu/google-maps-utility-library-v3-read-only/master/infobox/src/infobox_packed.js' type='text/javascript'></script>
<div class="jumbotron">
<div class="col-md-12">
<center><h3>Bus Detail</h3></center>
</div>
<div class="col-md-12">
<div style='width: 100%;'>
<div id="map" style='width: 100%; height: 400px;'></div>
</div>
</div>
</div>
<script type="text/javascript">
handler = Gmaps.build('Google');
handler.buildMap({ provider: {}, internal: {id: 'map'}}, function()
{
markers = handler.addMarkers([
{
"lat": 0,
"lng": 0,
"picture": {
"url": "http://icon- park.com/imagefiles/location_map_pin_yellow5.png",
"width": 32,
"height": 32
},
"infowindow": "hello!"
}
]);
handler.bounds.extendWith(markers);
handler.fitMapToBounds();
});
</script>
Application.js
//= require jquery
//= require rails-ujs
//= require turbolinks
//= require bootstrap-sprockets
//= require gmaps/google
//= require underscore
//= require_tree .
I'm not sure what I'm doing wrong, I have gone through the documentation 3 times but didn't found anything.
My bad.
I have to assign Lat and Lan in Gmaps.build function.
<script type="text/javascript">
handler = Gmaps.build('Google');
handler.buildMap({ provider: {}, internal: {id: 'map'}}, function(){
markers = handler.addMarkers([
{
"lat": 31.5204,
"lng": 74.3587,
"picture": {
"url": "http://icon-park.com/imagefiles/location_map_pin_yellow5.png",
"width": 32,
"height": 32
},
"infowindow": "hello!"
}
]);
handler.bounds.extendWith(markers);
handler.fitMapToBounds();
});
</script>