Afficher plusieurs marqueurs sur Google Map

Enregistrez votre recherche car vous vouliez afficher le magasin cible et les magasins à proximité sur Google Map. Étant donné que cet article porte principalement sur la description Javascript, la description de l'acquisition de clé API Google Map, etc. est omise. Les conditions sont les suivantes.

・ Le magasin cible est affiché au centre de la carte. (Mettre en place un marqueur) ・ Les marqueurs seront également affichés dans les magasins dans un rayon de 5 km centré sur le magasin cible. ・ Le magasin cible et les magasins environnants ont des couleurs de marqueurs différentes. ・ Lorsque vous cliquez sur le marqueur d'un magasin à proximité, une bulle s'affiche. ・ Le nom du magasin est inclus dans la bulle et en cliquant sur le nom du magasin, vous accédez à la page de détails du magasin.

Gif.gif

Environnement de développement

ruby 2.6.5 Ruby on Rails 6.0.3.3 OS: macOS Catalina

introduction

Cet article sur l'utilisation de GoogleMapApi est résumé de manière simple à comprendre et a servi de référence. Comment utiliser l'API Google Maps

Code d'implémentation

Le code est ci-dessous.


  let map;
  let mainMarker;
  let marker =[];
  let infoWindow = [];

function initMap(){
  let markerData = gon.places;
  let latlng = {lat: gon.latitude, lng: gon.longitude};
  //Spécifier la position initiale
  map = new google.maps.Map(document.getElementById('map'), {
  center: latlng,
  zoom: 14
  });

  //Placez un marqueur dans la position initiale
  mainMarker = new google.maps.Marker({
    map: map,
    position: latlng
  });

  //Placez un marqueur sur un magasin à proximité
  for (var i = 0; i < markerData.length; i++) {
    const image = "https://maps.google.com/mapfiles/ms/icons/yellow-dot.png ";
    const id = markerData[i]['id'];
    //Créer des données de latitude et de longitude
    let markerLatLng = new google.maps.LatLng({lat: markerData[i]['latitude'], lng: markerData[i]['longitude']});
    //Ajouter un marqueur
    marker[i] = new google.maps.Marker({
      position: markerLatLng,
      map: map,
      icon: image,
    });

    //Ajouter un ballon
    infoWindow[i] = new google.maps.InfoWindow({
    //Ajout d'un lien vers la page des détails du magasin dans la bulle
    content: `<a href=/laundries/${id}>${markerData[i]['name']}</a>`
    });

    markerEvent(i); 
  }

  //Afficher une bulle lorsqu'un marqueur est cliqué
  function markerEvent(i) {
    marker[i].addListener('click', function() {
      infoWindow[i].open(map, marker[i]);
    });
  }
}

document.addEventListener('turbolinks:load', function(){
  initMap();
});

Regardons chacun d'eux. 1. Définition des variables

 let map;
 let mainMarker;
 let marker =[];
 let infoWindow = [];

J'ai préparé deux variables car je voulais séparer les marqueurs du magasin cible et des magasins environnants. Puisque marker contient plusieurs informations sur les magasins à proximité, il est organisé dans un tableau. De même, `` infoWindow '' est également organisé car nous souhaitons ajouter une bulle au marqueur de chaque magasin.

2. Créer un ensemble de cartes un marqueur

  let markerData = gon.places;
  let latlng = {lat: gon.latitude, lng: gon.longitude};
  //Spécifier la position initiale
  map = new google.maps.Map(document.getElementById('map'), {
  center: latlng,
  zoom: 14
  });

  //Placez un marqueur dans la position initiale
  mainMarker = new google.maps.Marker({
    map: map,
    position: latlng
  });

Une variable appelée latlng est définie pour spécifier la latitude et la longitude du magasin. gon est l'un des joyaux qui convertit les variables définies dans les rails en variables utilisables en javascript. (https://github.com/gazay/gon) Créez une nouvelle carte avec `` new google.maps.Map '' et spécifiez éventuellement le centre et le niveau de zoom. Pour la création de cartes, consultez Let's Programming et Maps JavaScript API Documentation. maps / documentation / javascript / overview? hl = ja # zoom-levels) a été utilisé comme référence.

Ensuite, définissez des marqueurs sur la carte créée. Vous pouvez également définir un marqueur en créant un marqueur avec `` new google.maps.Marker '' et en spécifiant sur quelle carte placer le marqueur et où placer le marqueur.

3. Placez un marqueur sur les magasins à proximité + ajoutez une bulle


for (var i = 0; i < markerData.length; i++) {
    const image = "https://maps.google.com/mapfiles/ms/icons/yellow-dot.png ";
    const id = markerData[i]['id'];
    //Créer des données de latitude et de longitude
    let markerLatLng = new google.maps.LatLng({lat: markerData[i]['latitude'], lng: markerData[i]['longitude']});
    //Ajouter un marqueur
    marker[i] = new google.maps.Marker({
      position: markerLatLng,
      map: map,
      icon: image,
    });

    //Ajouter un ballon
    infoWindow[i] = new google.maps.InfoWindow({
    //Ajout d'un lien vers la page des détails du magasin dans la bulle
    content: `<a href=/laundries/${id}>${markerData[i]['name']}</a>`
    });

    markerEvent(i); 
  }

  //Afficher une bulle lorsqu'un marqueur est cliqué
  function markerEvent(i) {
    marker[i].addListener('click', function() {
      infoWindow[i].open(map, marker[i]);
    });
  }

Ce que nous faisons, c'est retirer les valeurs des variables définies dans let markerData = gon.places; '' une par une et ajouter des marqueurs et des bulles. Et parce que je voulais changer la couleur du marqueur, j'ai défini une icône dans la constante image '' et utilisé l'icône définie dans icône: image ''.new google.maps.LatLng({lat: markerData[i]['latitude'], lng: markerData[i]['longitude']});`` Spécifie qu'un marqueur doit être défini pour la latitude et la longitude de chaque élément.

Ajoutez ensuite un ballon. Vous pouvez spécifier les caractères à mettre dans la bulle avec contenu ''. Cette fois, j'ai utilisé la balise a parce que je voulais passer à la page de détails en affichant + en cliquant sur le nom de chaque magasin. Comme il ne s'affiche pas simplement en créant le ballon à la fin, j'ai utilisé addListener '' pour ouvrir le ballon lorsque le marqueur est cliqué.

Voici comment afficher plusieurs marqueurs sur Google Map.

Recommended Posts