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

Décrivez l'id dans le fichier html où vous souhaitez placer la carte
Décrivez l'API Web dans le fichier javascript
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.

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