Einführung der Google Map API mit Schienen

Was können Sie mit dem Code auf dieser Seite tun?

• Integrieren Sie Google Map in Ihr Rails-Projekt und zeigen Sie es an. ・ Beim Öffnen der Seite werden die Karte und die Anfangswertmarkierung angezeigt. ・ Ein Eingabefeld und eine Suchschaltfläche stehen zur Verfügung.
• Geben Sie den Ort, den Sie suchen möchten, in das Eingabefeld ein und drücken Sie die Suchtaste, um die Karte dieses Ortes anzuzeigen.

Holen Sie sich Maps JavaScript API & Geocoding API

Vielen Dank für diese Artikel. (Aus Referenzen)

[Vor dem Schreiben von Code] (https://qiita.com/nagaseToya/items/e49977efb686ed05eadb) [Ich habe versucht, die Google Maps-API zu verwenden] (https://qiita.com/Haruka-Ogawa/items/997401a2edcd20e61037) Suchen und identifizieren Sie den Standort anhand des Google MAP-Namens [Original-App erstellen - Google Map-Nutzung mit Rails überprüfen-] (https://note.com/daddy0055/n/nddbe8da38bbc)

Code

Angenommen, Sie schreiben in Posts. @ post.location ist ein Beispiel. Geben Sie die für Ihre Anwendung geeigneten Anfangswerte ein.

html:posts/index.html.erb

<div id='target'></div>

<div class='map-btn'>
<input id="address" type="textbox" value="<%= @post.location %>">
<input type="button" value="Suche" onclick="codeAddress()">
<div>

<script src="https://maps.googleapis.com/maps/api/js?key=Mein API-Schlüssel&callback=initMap" async defer></script>

style.scss

#target {
  height: 300px;
  width: 300px;
}

Javascript Beschreibung

post.js

let map
let geocoder
let centerp = {lat: 33.60639, lng: 130.41806}

function initMap(){
  geocoder = new google.maps.Geocoder()

  map = new google.maps.Map(document.getElementById('target'), {
    center: centerp,
    zoom: 12,
  });

  marker = new google.maps.Marker({
    position: centerp,
    map: map
  });
}

function codeAddress(){
  let inputAddress = document.getElementById('address').value;

  geocoder.geocode( { 'address': inputAddress}, function(results, status) {
    if (status == 'OK') {
      map.setCenter(results[0].geometry.location);
      var marker = new google.maps.Marker({
          map: map,
          position: results[0].geometry.location
      });
    } else {
      alert('Es gab keine zutreffenden Ergebnisse:' + status);
    }
  });   
}

Verweise

Vielen Dank für all die Hilfe, die Sie mir gegeben haben. Vielen Dank.

Vor dem Schreiben des Codes [https://qiita.com/nagaseToya/items/e49977efb686ed05eadb]

Ich habe versucht, die Google Maps-API zu verwenden [https://qiita.com/Haruka-Ogawa/items/997401a2edcd20e61037]

Suchen und identifizieren Sie einen Standort anhand des Google MAP-Namens [https://qiita.com/yoshi_yast/items/521c1f36306a180f45dd]

Ursprüngliche Anwendungserstellung - Überprüfung der Google Map-Nutzung mit Rails- [https://note.com/daddy0055/n/nddbe8da38bbc]