I want my browser to display the Google Maps implemented in the rails app.

Challenges

The rails app is implementing Google Maps, but it does not appear in the browser.
I want to be able to display it somehow.

Problems/errors encountered

I can't see the google map in my browser.
src=
I checked the console of Google Developer Tool and found the following error:
src=

Source Code

~~~(omitted)~~~~~~~~~~~~~~~~~~~~~~~~~~~~
      <divid="map" style="height:400px;width:100%;">/div>%#Show google map here %>
      <%=f.hidden_field:latitude%>
      <%=f.hidden_field:longitude%>

      <div class="text-center">
        <%=f.submit "Post", class: "btn btn-primary" %>
      </div>
    <%end%>
  </div>
</div>

<%=javascript_pack_tag "googlemap"%>

<!DOCTYPE html>
<html lang="ja">
  <head>
    <metacharset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>Nanitabeta</title>
    <%=csrf_meta_tags%>
    <%=csp_meta_tag%>

    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
    

    <%=include_gon%>
    <%=stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload'%>
    <%=javascript_pack_tag 'application', 'data-turbolinks-track': 'reload'%>
  </head>

  <body>
    <%=render'layouts/header'%>
    <%=render "layouts/alert"%>

    <%=yield%><%#View other pages%>
    <%=render "layouts/footer"%>
    
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
    <scriptdefer src="https://use.fontawesome.com/releases/v5.7.2/js/all.js"></script>
    
    <%#Script %> for Google Maps
    <script type="text/javascript"src="https://maps.googleapis.com/maps/api/js?key=<%=ENV['GOOGLE_MAP_KEY']%>&callback=initMap"async prefer></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>

    <%#Script %> for gem "gmaps4rails"
    <script src='//cdn.jsdelivr.net/gmaps4rails/2.1.2/gmaps4rails.js'></script>
    <script src='//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore.js'></script>
  </body>
</html>

var marker
varmap_lat
varmap_lng
varmap_result
let myLatLng
let map
let geocoder

function initMap(){
  geocoder=new google.maps.Geocoder()
  if( document.getElementById('map')){// Map to display in new post
    myLatLng = {lat:35.676192, lng:139.650311}
    map_lat= document.getElementById('micropost_latitude')
    map_lng = document.getElementById('micropost_longitude')

    map = new google.maps.Map( document.getElementById('map'), {
      center —myLatLng,
      zoom:15,
    });
    marker = new google.maps.Marker();

google.maps.event.addListener(map, 'click', mylistener); // Action performed when clicking a map

function mylistener(event) {// What to do when clicking a map
  marker.setPosition(newgoogle.maps.LatLng(event.latLng.lat(), event.latLng.lng()));
  marker.setMap(map);
  console.log(event.latLng.lat(), event.latLng.lng();
  map_lat.value = event.latLng.lat(); // Set the latitude of the clicked location to a value for database storage
  map_lng.value=event.latLng.lng(); // Set the longitude of the clicked location to a value for database storage
}

  } else {// Map to display with post details
    myLatLng = {lat:gon.lat, lng:gon.lng} // Database latitude and longitude
    map = new google.maps.Map( document.getElementById('show_map'), {
      center —myLatLng,
      zoom:15,
    });
    marker = new google.maps.Marker({// Display marker only)
      position: myLatLng, // database latitude and longitude
      map —map
    });
  }
}

function deleteMarker() {// Delete Marker
  marker.setMap(null);
  map_lat.value="";
  map_lng.value="";
}

function codeAddress(){
  geocoder=new google.maps.Geocoder()
  let inputAddress= document.getElementById('address').value;
  geocoder.geocode({
    'address': inputAddress,
    US>'region': 'jp'
  }, function(results, status){
    if(status=='OK'){
      map.setCenter(results[0].geometry.location); // centered on the location you clicked
      map_result=results[0].geometry.location;
      map_lat.value=map_result.lat();
      map_lng.value=map_result.lng();
      marker.setPosition(newgoogle.maps.LatLng(map_result.lat(),map_result.lng()));
      marker.setMap(map);
      console.log(map_lat.value, map_lng.value);
    } else {
      alert('There were no applicable results');
      initMap();
    }
  });
}

Tried

g Are there any defects in Google API settings?
→ API validation, payment linkage, API key restriction, HTTP referrals, etc. have been confirmed

m Is the description of style missing in the part where the map of microposts/new.html.erb is displayed?
→Confirmed

.The environment variable in the .env file is not printed, so the Google Map script may not be working.
→Confirmed

$bin/railsc
Loading development environment (Rails 6.0.4.1)
[1] pry(main)>ENV['GOOGLE_MAP_KEY']
=>"AIzaSyDXXXXXXXXX"
[2] pry(main)>ENV["GOOGLE_MAP_KEY"]
=>"AIzaSyDXXXXXXXXXX"

I am expecting errors in the order of the scripts, but there is not much information when I search for them, and I am troubled because nothing changes when I try to replace them.
If anyone knows the cause of the error, could you please help me?
I look forward to your kind cooperation.

javascript ruby-on-rails google-maps

2022-09-30 15:55

1 Answers

Resolved

After referring to the advice you gave me and the articles I searched, I managed to successfully display Google Maps!
There is still an error on the console, but I would like to ask you another question!
Thank you!

[What I did]
·Copy all the descriptions in the js file to the view file to verify the operation
·The script for Google Maps has also been moved to the view file.Place below copied js description
·Comment out require("turbolinks").start()

2022-09-30 15:55

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