Карты Google не работают в приложении Rails - PullRequest
Новая
       48

Карты Google не работают в приложении Rails

0 голосов
/ 16 мая 2018

Я пытаюсь добавить Google Map в мое приложение Rails с

Rails 5.1.6 и Ruby 2.5.0, используя гем "gmaps4rails"

НоЯ вижу только СИНИЙ цвет на карте.

Map Image

Я выполнил все шаги, упомянутые в документации gem 'gmaps4rails', здесь

Главная страница 

<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 .

Я не уверенчто я делаю неправильно, я просмотрел документацию 3 раза, но ничего не нашел.

1 Ответ

0 голосов
/ 20 мая 2018

Мой плохой.

Я должен назначить Lat и Lan в функции Gmaps.build. 

<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>
...