Google Maps not working in Rails App

Question

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.

Answer 1

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>