[RUBY] [Pour les débutants] Comment afficher des cartes et des champs de recherche à l'aide de l'API Javascript GoogleMap

Comment ajouter une carte sur votre application à l'aide de l'API googlemap.

En gros, cela peut être réalisé en écrivant [Official Document] 1 ~~ le long de la copie ~~, mais comme je suis un débutant en Javascript, il a fallu beaucoup de temps pour déchiffrer, donc je vais commencer la même chose Je vais le partager pour vous.

Ce que tu peux faire

・ Affichage de la carte ・ Affichage du champ de recherche ・ Décoration de la carte et du champ de recherche ezgif.com-gif-maker.gif

Avec une petite modification, Vous pouvez également le décorer. ezgif.com-gif-maker (1).gif

procédure

  1. Décrivez l'id dans le fichier html où vous souhaitez placer la carte
  2. Décrivez l'API Web dans le fichier javascript
  3. Jouez avec CSS pour décorer la carte

seulement ça.

Étape 1: écrivez l'identifiant dans le fichier html où vous souhaitez placer la carte

Ce qui suit est une citation du [Document officiel] 1. Le but est de décrire les bibliothèques = emplacements dans le script pour l'appel API. Cela vous permet de charger la bibliothèque qui bascule l'écran sur la position de recherche et de recherche.

sample.html


<!DOCTYPE html>
<html>
  <head>
    <title>Places Search Box</title>
    <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
    #"Clé=YOUR_Décrivez la clé API acquise dans la partie "API"
    #Cette fois, nous allons ajouter une fonction de recherche, donc nous utiliserons la bibliothèque Places, donc "bibliothèques=lieux "ajoutés
    #"V="Hebdomadaire" indique la fréquence de mise à jour de la carte elle-même. Si rien n'est décrit, elle sera mise à jour tous les trimestres, et avec cette description, elle sera mise à jour chaque semaine pour la maintenir à jour, vous n'avez donc pas besoin de la décrire séparément.
    <script
      src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initAutocomplete&libraries=places&v=weekly"
      defer
    ></script>
    <link rel="stylesheet" type="text/css" href="./style.css" />
    <script src="./index.js"></script>
  </head>
  <body>
  #La carte est affichée par javascript à l'identifiant spécifié ici.
    <input
      id="pac-input"
      class="controls"
      type="text"
      placeholder="Search Box"
    />
    <div id="map"></div>
  </body>
</html>

Si vous ouvrez le navigateur dans cet état, vous constaterez qu'il n'y a qu'un champ de recherche. Passons au suivant.

Étape 2: Décrivez l'API Web dans le fichier javascript

Ce qui suit est également une citation du [Document officiel] 1, mais il a fallu du temps pour savoir d'où venait la description. ..

Pour les débutants, je voudrais expliquer brièvement la description de js. const ~~ y définit une constante "~~". function ~~ est une fonction. google.maps est un objet qui spécifie la carte elle-même.

index.js


function initAutocomplete() {
  //Il s'agit du paramètre par défaut de la carte.
  const map = new google.maps.Map(document.getElementById("map"), {
    center: { lat: -33.8688, lng: 151.2195 },
    zoom: 13,
    mapTypeId: "roadmap",
  });
  const input = document.getElementById("pac-input");
  const searchBox = new google.maps.places.SearchBox(input);
 ////"Classe SearchBox"Est une méthode de la bibliothèque Places. L'argument est entré(Il y a un inputField sur le document)。
 ////[https://developers.google.com/maps/documentation/javascript/reference/places-widget#SearchBox]
  
  map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);
  ////"ControlPosition"La classe positionne le contrôleur.
  ////https://lab.syncer.jp/Web/API/Google_Maps/JavaScript/ControlPosition/
  ////https://developers.google.com/maps/documentation/javascript/examples/control-positioning
  
  map.addListener("bounds_changed", () => {
    searchBox.setBounds(map.getBounds());
  });
  ////"bound_changed"L'événement est(S'enclenche quand il y a un changement dans le port carte / vue de la plage visible)
  ////https://lab.syncer.jp/Web/API/Google_Maps/JavaScript/Map/bounds_changed/ 
  ////"getBounds"La méthode obtient la limite de la fenêtre. Méthode de classe de carte.
  ////https://lab.syncer.jp/Web/API/Google_Maps/JavaScript/Map/getBounds/
  
  let markers = [];
  searchBox.addListener("places_changed", () => {
  ////"place_chaged"L'événement est un événement de la classe AutoComplete.
  ////https://developers.google.com/maps/documentation/javascript/reference/places-widget#Autocomplete.place_changed
  
    const places = searchBox.getPlaces();
    ////"getPlaces"La méthode est une requête(Mot-clé de recherche)Organiser(PlaceResult)Revenez avec.
    ////https://developers.google.com/maps/documentation/javascript/reference/places-widget#Autocomplete.place_changed

    if (places.length == 0) {
      return;
    }
    // Clear out the old markers.
    markers.forEach((marker) => {
      //"forEach"La méthode est la clé de l'objet Map de la fonction dans l'argument/Attribuez des valeurs dans l'ordre et exécutez les fonctions.
        //Objet de la carte:
          //https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Map
      marker.setMap(null);
      ////La méthode setMap est Marker(Polyline,Cercle etc.)Méthode de classe. Placez le marqueur dans la position spécifiée. Si l'argument est nul, il sera supprimé de la carte.
    });
    markers = [];
    // For each place, get the icon, name and location.
    const bounds = new google.maps.LatLngBounds();
    ////"LatLngBounds"La classe crée un instrument qui crée des limites. Les arguments sont les coordonnées en bas à gauche et en haut à droite.
    ////https://lab.syncer.jp/Web/API/Google_Maps/JavaScript/LatLngBounds/#:~:text=LatLngBounds%E3%82%AF%E3%83%A9%E3%82%B9%E3%81%AF%E5%A2%83%E7%95%8C(Bounding,%E4%BD%9C%E3%82%8B%E3%81%93%E3%81%A8%E3%82%82%E3%81%A7%E3%81%8D%E3%81%BE%E3%81%99%E3%80%82
    places.forEach((place) => {
      if (!place.geometry) {
        ////"geometry"Est une méthode de la bibliothèque d'espace.
        
        console.log("Returned place contains no geometry");
        return;
      }
      const icon = {
        url: place.icon,
        ////"icon"Est un objet qui représente une icône. Lorsque vous souhaitez faire du marqueur une image originale.
        ////https://lab.syncer.jp/Web/API/Google_Maps/JavaScript/Icon/
        size: new google.maps.Size(71, 71),
        origin: new google.maps.Point(0, 0),
        anchor: new google.maps.Point(17, 34),
        ////"Point"La classe est une méthode d'instance qui détermine la position des étiquettes de marqueur et autres.
        ////https://lab.syncer.jp/Web/API/Google_Maps/JavaScript/Point/
        
        scaledSize: new google.maps.Size(25, 25),
      };
      // Create a marker for each place.
      markers.push(
        new google.maps.Marker({
          map,
          icon,
          title: place.name,
          position: place.geometry.location,
        })
      );

      if (place.geometry.viewport) {
        ////viewport"Méthode
        // Only geocodes have viewport.
        bounds.union(place.geometry.viewport);
        ////"union"La méthode est une méthode de la classe LatLngBounds. Incorpore la limite spécifiée dans sa propre limite et la synthétise.
        ////https://lab.syncer.jp/Web/API/Google_Maps/JavaScript/LatLngBounds/union/
      } else {
        bounds.extend(place.geometry.location);
        ////"extend"La méthode est une méthode de la classe LatLngBounds. Ajoutez de nouvelles coordonnées de position à vos limites.
        ////https://lab.syncer.jp/Web/API/Google_Maps/JavaScript/LatLngBounds/extend/
      }
    });
    map.fitBounds(bounds);
    ////"fitBounds"La méthode est une méthode de la classe map. Modifiez la fenêtre afin que la limite spécifiée soit facilement visible.
    ////https://lab.syncer.jp/Web/API/Google_Maps/JavaScript/Map/fitBounds/#:~:text=Map.fitBounds()%E3%81%AFMap,%E5%A4%89%E6%9B%B4%E3%81%97%E3%81%A6%E3%81%8F%E3%82%8C%E3%81%BE%E3%81%99%E3%80%82

  });
}

style.css


#map {
  height: 100%;
}

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

#description {
  font-family: Roboto;
  font-size: 15px;
  font-weight: 300;
}

#infowindow-content .title {
  font-weight: bold;
}

#infowindow-content {
  display: none;
}

#map #infowindow-content {
  display: inline;
}

.pac-card {
  margin: 10px 10px 0 0;
  border-radius: 2px 0 0 2px;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  outline: none;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
  background-color: #fff;
  font-family: Roboto;
}

#pac-container {
  padding-bottom: 12px;
  margin-right: 12px;
}

.pac-controls {
  display: inline-block;
  padding: 5px 11px;
}

.pac-controls label {
  font-family: Roboto;
  font-size: 13px;
  font-weight: 300;
}

#pac-input {
  background-color: #fff;
  font-family: Roboto;
  font-size: 15px;
  font-weight: 300;
  margin-left: 12px;
  padding: 0 11px 0 13px;
  text-overflow: ellipsis;
  width: 400px;
}

#pac-input:focus {
  border-color: #4d90fe;
}

#title {
  color: #fff;
  background-color: #4d90fe;
  font-size: 25px;
  font-weight: 500;
  padding: 6px 12px;
}

#target {
  width: 345px;
}

Vous devriez maintenant voir la carte et la zone de recherche.

N'hésitez pas à jouer avec le CSS à votre guise.

Si vous écrivez une constante ou une fonction portant le même nom séparément, cela ne fonctionnera pas correctement. Veuillez vérifier en cas d'erreur.

Étape 3: Jouez avec CSS pour décorer la carte

Si vous quittez l'étape 2, la zone de recherche sera dans une position peu sophistiquée, alors décorez la boîte.

du fichier js

  map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);

La position du champ de recherche a été placée dans TOP_LEFT avec.

Puisque javascript est chargé après le chargement de css, Il sera spécifié en écrasant la description de css.

Supprimez cette ligne et décorez l'id et la classe de la balise d'entrée avec CSS comme vous le souhaitez.

Jouez au style de carte avec snazzy

Ce site appelé [snazzy] [4] vous permet d'éditer intuitivement comme vous le souhaitez. Le style sélectionné ou modifié ici peut copier les données JSON, vous pouvez donc modifier le style comme vous le souhaitez en le collant dans JS tel quel.

Le simple fait de jouer avec snazzy est amusant, alors jetez un œil. [4]:https://snazzymaps.com/editor/customize/21

À propos, le style de carte violet collé au début de l'article est le suivant.

input.js


const map = new google.maps.Map(document.getElementById("map"), opts);
var opts = {
    zoom: 15,
    center: { lat: -33.8688, lng: 151.2195 },
    styles: [
      //Masquer toutes les étiquettes
      {
        featureType: 'all',
        elementType: 'labels',
        stylers: [
          {visibility: 'off'},
        ],
      },
      {
        featureType: 'transit',
        elementType: 'labels',
        stylers: [
          {visibility: 'on'},
        ],
      },
      //poi=Ne réafficher que l'icône "Sites touristiques, installations, etc."
      {
        featureType: 'poi',
        elementType: 'labels.icon',
        stylers: [
          {visibility: 'inherit'},
        ],
      },
      //Personnalisez la couleur de toute la carte
      //Couleur de base unifiée au rouge+Désaturer
      {
        featureType: 'all',
        elementType: 'all',
        stylers: [
          {hue: '#5f0285'},
          {saturation : -50},
        ],
      }
    ]

c'est tout. Si cela ne fonctionne pas, veuillez suivre la documentation officielle.

Recommended Posts

[Pour les débutants] Comment afficher des cartes et des champs de recherche à l'aide de l'API Javascript GoogleMap
[Affichage de la carte] Affichez une carte à partir de l'adresse enregistrée par l'utilisateur à l'aide de l'API JavaScript de Google Maps et de l'API de géocodage!
[Rails] google maps api Comment publier et afficher des informations cartographiques
Comment afficher la carte à l'aide de l'API Google Map (Android)
Pour le moment en utilisant FastAPI, je veux montrer comment utiliser l'API comme ça dans swagger
Python # Comment vérifier le type et le type pour les super débutants
Méthode d'apprentissage TensorFlow pour les professionnels des arts libéraux et les débutants en Python
[Pour les débutants] J'ai essayé d'utiliser l'API Tensorflow Object Detection
Comment exécuter la commande sed plusieurs fois à l'aide de l'instruction for
Comment utiliser l'API Bing Search
Comment afficher les octets de la même manière en Java et Python
Comment étudier pour le test G de Deep Learning Association (pour les débutants) [version 2020]
[Python] Comment spécifier la position d'affichage de la fenêtre et la taille de matplotlib
Comment diviser et traiter une trame de données à l'aide de la fonction groupby
Recherchez des mots-clés Twitter avec tweepy et écrivez les résultats dans Excel
Comment rechercher à l'aide de l'Astroquery de Python et obtenir des images ajustées avec Skyview
Comment afficher la barre de progression (tqdm)
Implémentation et description à l'aide de XGBoost pour les débutants
[Rails] Comment calculer la latitude et la longitude avec une grande précision à l'aide de l'API Geocoding et l'afficher sur Google Map
Comment utiliser OAuth et API de compte de service avec le client API Google pour python
Le moyen le plus rapide pour les débutants de maîtriser Python
J'ai recherché dans la bibliothèque l'utilisation de l'API Gracenote
Raisonnement causal et recherche causale par Python (pour les débutants)
[Python] Comment changer le format de la date (format d'affichage)
Afficher l'API Google Maps avec Rails et affichage des broches
Comment utiliser les outils d'analyse de données pour les débutants
Comment utiliser l'API Google Cloud Translation
Comment utiliser l'API du guide des programmes NHK
Comment obtenir des données d'article à l'aide de l'API Qiita
Comment rechercher des données HTML à l'aide de Beautiful Soup
Comment rendre le Python des débutants plus rapide [numpy]
[Pour les débutants] Comment étudier la programmation Mémo privé
Comment trouver la corrélation pour les variables catégorielles
Conseils aux débutants en Python pour utiliser l'exemple Scikit-image pour eux-mêmes 7 Comment créer un module
J'ai essayé de notifier la mise à jour de "Devenir romancier" en utilisant "IFTTT" et "Devenir un romancier API"
Comment utiliser la commande grep pour rechercher de manière récursive des répertoires et des fichiers à une profondeur spécifiée
[Pour les débutants] Analyse du langage à l'aide de l'outil de traitement du langage naturel "GiNZA" (de l'analyse morphologique à la vectorisation)
J'ai essayé de noter la syntaxe trop humoristique et humoristique en utilisant l'API COTOHA.
Une histoire sur un débutant Python essayant d'obtenir des résultats de recherche Google à l'aide de l'API
Comment confirmer le théorème de Persival en utilisant matplotlib et la transformée de Fourier de Scipy (FFT)
Comment savoir quel processus utilise le port localhost et l'arrêter
[Rails] Comment obtenir des informations de localisation à l'aide de l'API de géolocalisation
[BigQuery] Comment utiliser l'API de BigQuery pour Python -Création de table-
Comment écrire une interface graphique à l'aide de la commande maya
Comment convertir le type Python # pour les super débutants de Python: str
[Pour les débutants] Comment étudier le test d'analyse de données Python3
Comment utiliser la commande grep et des exemples fréquents
Envoyez et recevez Gmail via l'API Gmail en utilisant Python
Publiez sur votre compte en utilisant l'API sur Twitter
Comment utiliser argparse et la différence entre optparse
Comment analyser avec Google Colaboratory à l'aide de l'API Kaggle
[Introduction à Python] Comment arrêter la boucle en utilisant break?
Utiliser l'API de recherche de la Bibliothèque du Parlement national en Python
Comment publier un ticket depuis l'API Shogun
[Introduction à Python] Comment écrire des instructions répétitives à l'aide d'instructions for
[Pour ceux qui veulent utiliser TPU] J'ai essayé d'utiliser l'API de détection d'objets Tensorflow 2
[Super facile! ] Comment afficher le contenu des dictionnaires et des listes incluant le japonais en Python
Comment obtenir les données météorologiques actuelles et les afficher sur l'interface graphique tout en la mettant à jour automatiquement
[Sakura Rental Server] (Pour les débutants) Comment créer un environnement pour Python, pyenv et Flask. | Pour csh