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.

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 = [];

  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
  });

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]);
    });
  }