Présentation de l'API Google Map avec rails

Que pouvez-vous faire avec le code sur cette page

-Intégrer Google Map dans votre projet de rails et l'afficher. ・ Lorsque la page est ouverte, la carte et le marqueur de valeur initiale s'affichent. ・ Une zone de saisie et un bouton de recherche sont disponibles. -Entrez l'emplacement à rechercher dans la zone de saisie et appuyez sur le bouton de recherche pour afficher la carte de cet emplacement.

Obtenez l'API Maps JavaScript et l'API de géocodage

Merci pour ces articles. (À partir de références)

[Avant d'écrire le code] (https://qiita.com/nagaseToya/items/e49977efb686ed05eadb) [J'ai essayé d'utiliser l'API Google Maps] (https://qiita.com/Haruka-Ogawa/items/997401a2edcd20e61037) Recherchez et identifiez l'emplacement par nom Google MAP [Créer une application d'origine - Vérifier l'utilisation de Google Map avec Rails-] (https://note.com/daddy0055/n/nddbe8da38bbc)

code

Supposons que vous écriviez dans des messages. @ post.location en est un exemple. Saisissez les valeurs initiales adaptées à votre application.

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="Chercher" onclick="codeAddress()">
<div>

<script src="https://maps.googleapis.com/maps/api/js?key=Ma clé API&callback=initMap" async defer></script>

style.scss

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

Description Javascript

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('Il n'y avait aucun résultat applicable:' + status);
    }
  });   
}

Les références

Merci pour toute l'aide que vous m'avez apportée. Merci.

Avant d'écrire le code [https://qiita.com/nagaseToya/items/e49977efb686ed05eadb]

J'ai essayé d'utiliser l'API Google Maps [https://qiita.com/Haruka-Ogawa/items/997401a2edcd20e61037]

Rechercher et identifier un emplacement par nom Google MAP [https://qiita.com/yoshi_yast/items/521c1f36306a180f45dd]

Création de l'application d'origine - vérification de l'utilisation de Google Map avec Rails- [https://note.com/daddy0055/n/nddbe8da38bbc]