[Kartenanzeige] Zeigen Sie eine Karte anhand der vom Benutzer registrierten Adresse mit der JavaScript-API und der Geokodierungs-API von Google Maps an!

Überblick

Ein Memorandum wird aufgezeichnet, wenn die Karte auf der Seite mit den Postdetails von der Adresse aus angezeigt wird, die der Benutzer mithilfe der Google Maps JavaScript-API und der Geokodierungs-API registriert hat.

Umgebung

・ Ruby '2.5.7' ・ Schienen '5.2.3'

Annahme

・ Sie haben den API-Schlüssel für Google Maps bereits erhalten. -Das Post-Modell (hier das Datespot-Modell) hat eine Adressspalte.

【Referenz】 API-Schlüssel für Google Maps abrufen

Prozess

1. Erstellen einer Post-Detailseite

Bitte erstellen Sie die Seite mit den Post-Details gemäß Ihren eigenen Spezifikationen.

views/show.html.erb

<div class="container">
  <div class="row">
　　(Kürzung)
    <div class="col-md-8">
      <h2 class="datespot-name"><%= @datespot.name %></h2>
      <div class="datespot-info">
　　　　(Kürzung)
        <h4 id="address">【Adresse】<%= @datespot.address %></h4>
　　　　(Kürzung)
      </div>
    </div>
  </div>
</div>
<%= render "map-show" %>

2. Erstellen Sie eine Ansicht, um die Karte anzuzeigen

Erstellen Sie eine Ansicht, in der die Karte angezeigt wird.

views/_map-show.html.erb

<div class="map-container">
  <div class="map_wrapper">
    <div id="map" class="map"></div>
  </div>
</div>
<script src="https://maps.googleapis.com/maps/api/js?key=<%= ENV['GOOGLE_MAP_API_KEY']%>&callback=initMap"></script>

Fügen wir den erhaltenen API-Schlüssel in die Umgebungsvariable ein.

stylesheets/custom.scss

#map{
  height: 310px;
  width: 550px;
}

Wenn Sie die Größe der Karte nicht explizit angeben, wird sie nicht angezeigt. Geben Sie sie daher unbedingt an.

3. Definieren Sie eine Rückruffunktion

Definieren Sie die in 2 beschriebene Rückruffunktion.

javascripts/map-show.js

function initMap() {
  //Weisen Sie das Objekt des div-Elements des Bereichs zu, um die Karte der Variablen anzuzeigen
  var target = document.getElementById('map');
  //Markertitel
  var title = $('.datespot-name').text();
  //Erhalten der in HTML beschriebenen Adresse
  var address = document.getElementById('address').textContent;
  //Generieren einer Geokodierungsinstanz
  var geocoder = new google.maps.Geocoder();

  //geocoder.geocode()Übergeben Sie die Adresse an und schreiben Sie eine Rückruffunktion zur Verarbeitung
  geocoder.geocode({ address: address }, function(results, status){
  //Status ist OK und Ergebnisse[0]Generieren Sie eine Karte, falls vorhanden
    if (status === 'OK' && results[0]){
      //Weisen Sie einer Variablen eine Instanz der Karte zu
      var map = new google.maps.Map(target, {
      //results[0].geometry.Der Standort enthält Breiten- / Längengradobjekte
        center: results[0].geometry.location,
        zoom: 15
      });
      //Markergenerierung
      var marker = new google.maps.Marker({
        position: results[0].geometry.location,
        map: map,
        animation: google.maps.Animation.DROP
      });
      //Generierung erfasster Koordinaten
      var latlng = new google.maps.LatLng(results[0].geometry.location.lat(), results[0].geometry.location.lng());
      //Erstellen Sie Inhalte, die im Infofenster angezeigt werden sollen
      var content = '<div id="map_content"><p>' + title + '<br/>' + address + '<br/><a href="https://maps.google.co.jp/maps?q=' + latlng + '&iwloc=J" target="_blank" rel="noopener noreferrer">Auf Google Maps anzeigen</a></p></div>';
      //Erstellen Sie eine Instanz des Infofensters
      var infowindow = new google.maps.InfoWindow({
        content: content,
      });
      //Klicken Sie auf die Markierung, um das Informationsfenster anzuzeigen(Hörerregistrierung)
      google.maps.event.addListener(marker, 'click', function() {
        //Assoziieren Sie, indem Sie im zweiten Argument einen Marker angeben
        infowindow.open(map, marker);
      });
    }else{
    //Wenn der Status nicht OK oder Ergebnisse ist[0]Ist dies nicht der Fall, wird eine Warnung angezeigt und die Verarbeitung unterbrochen.
      alert("Der Standort konnte nicht von der Adresse abgerufen werden.: " + status);
      return;
    }
  });
}

var target = document.getElementById ('map'); ist Es bezieht sich auf die <div id = "map" class = "map"> </ div> in views / map-show.html.erb.

var title = $ ('.datespot-name'). text (); ist Es bezieht sich auf <h2 class = "Datespot-Name"> <% = @ datesspot.name%> </ h2> in views / show.html.erb.

var address = document.getElementById ('address'). TextContent; Es bezieht sich auf <h4 id = "address"> [address] <% = @ datesspot.address%> </ h4> in views / show.html.erb.

Ergebnis

Sie können die Karte jetzt auf der Seite mit den Beitragsdetails von der vom Benutzer registrierten Adresse aus anzeigen!

Referenz

Verwendung und Verwendung der Google Maps-API Verwenden wir Google Maps