

Ruby on Railsで開発をしています。  
GoogleMapを表示させたいんですが、マップが表示されなくて、困っています。  
viewコードとjsファイルのコードを書いておきますのでどう修正すればいいのか教えていただきたいです。

map.html.slimファイル

[code]

    doctype html
    html
      head
        meta charset="utf-8"
        title ポリゴン
        sass:
          html, body
          　height: 100%
          　margin: 0
          　padding: 0
    
          div
            display: inline-block
            &#map
              height: 100%
              width:  640px
              margin: 0 auto
      body
        #map
    
      script src="/assets/admin/polygon.js"
      script src="https://maps.googleapis.com/maps/api/js?callback=init" async="async" defer="defer"
    
[/code]

app/assets/javascripts/admin/polygon.jsファイル

[code]

    var map;
    var markers = [];
    var polygons = [];
    function init() {
      map = new google.maps.Map(document.getElementById('map'), {
          center: {lat: 35.783530, lng: 139.696165},
          zoom: 15,
          mapTypeId: google.maps.MapTypeId.ROADMAP,
          mapTypeControl: false,
      });
      google.maps.event.addListener(map, 'click', setMarker);
    }
    
    function setMarker(event){
      var latlng = createGmapLatLng(event.latLng.lat(),event.latLng.lng());
      mk = new google.maps.Marker({
          map:map,
          position: latlng,
      });
      mk.setMap(map);
      markers.push(latlng);
    }
    
    function createGmapLatLng(lat,lng){
      var latlng = new google.maps.LatLng(lat,lng);
      return latlng
    }
    
[/code]


CC BY-SA 3.0
2016-01-27T09:23:39.027
21380
2019-12-13T18:44:06.460
2016-01-28T00:09:28.803
10710
10710
question
javascript ruby-on-rails google-maps
RailsでGoogleMapを表示させたいです。


html, body に対しての css が効いていないので、表示されていないのでは？

[code]

    html, body
    height: 100%
    margin: 0
    padding: 0
    
[/code]

ではなく、

[code]

    html, body
      height: 100%
      margin: 0
      padding: 0
    
[/code]

かと思います。

普通に表示すれば出てくるので

[code]

    html, body {
      height: 100%;
      margin: 0;
      padding: 0;
    }
    #map {
      height: 100%;
    }
[/code]

[code]

    <div id="map"></div>
    <script>
      var map;
      function init() {
        map = new google.maps.Map(document.getElementById('map'), {
          center: {lat: 35.783530, lng: 139.696165},
          zoom: 15,
          mapTypeId: google.maps.MapTypeId.ROADMAP,
          mapTypeControl: false,
        });
      }
    </script>
    <script async defer src="https://maps.googleapis.com/maps/api/js?callback=init"></script>
[/code]

# 追記

エラーが出ているのではありませんか？少なくとも私は出ました。

[![画像の説明をここに入力](https://i.stack.imgur.com/Pp3Z4.png)](https://i.stack.imgur.com/Pp3Z4.png)

sass のコードの中に、全角空白が含まれていますよ？


CC BY-SA 4.0
2016-01-27T13:53:07.067
21396
2019-12-13T18:44:06.460
2019-12-13T18:44:06.460
32986
7471
21380
answer


単純にAPIキーが指定されてないからではないですか？  
公式サイトではscriptタグのクエリストリングにAPIキーが指定されています。  
<https://developers.google.com/maps/documentation/javascript/tutorial>


CC BY-SA 3.0
2016-02-28T02:57:57.913
22613
2016-02-28T02:57:57.913
7232
21380
answer