I would like to see GoogleMap on Rails.

I am developing it at Ruby on Rails.
I want to display GoogleMap, but I'm having trouble because I can't see the map.
I will write down the view code and the code of the js file, so please let me know how to correct it.

map.html.slim file

doctype html
html
  head
    meta charset="utf-8"
    title polygon
    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"

app/assets/javascripts/admin/polygon.js file

varmap;
varmarksers=[];
varpolygons=[];
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
}

javascript ruby-on-rails google-maps

2022-09-30 19:19

2 Answers

The css for html, body is not working, so isn't it displayed?

html, body
height —100%
margin —0
padding: 0

instead of

html, body
  height —100%
  margin —0
  padding: 0

I think so.

If you display it normally, it will come out.

html,body{
  height —100%;
  margin:0;
  padding:0;
}
#map{
  height —100%;
}

<divid="map"></div>
<script>
  varmap;
  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 prefer src="https://maps.googleapis.com/maps/api/js?callback=init"></script>

Isn't there an error?At least I came out.

The sass code contains a full-width blank, right?

2022-09-30 19:19

Is it simply because the API key is not specified?
The official site specifies the API key in the script tag query string.
https://developers.google.com/maps/documentation/javascript/tutorial

2022-09-30 19:19

If you have any answers or tips

Popular Tags

python x 4647

android x 1593

java x 1494

javascript x 1427

c x 927

c++ x 878

ruby-on-rails x 696

php x 692

python3 x 685

html x 656