Display multiple markers on Google Map

Record what you searched for because you wanted to display the target store and nearby stores on Google Map. Since this article is mainly about Javascript description, the description about Google Map API key acquisition etc. is omitted. The conditions are as follows.

・ The target store is displayed in the center of the map. (Set a marker) -Display markers at stores within a radius of 5 km centered on the target store. ・ The target store and surrounding stores have different marker colors. ・ When you click the marker of a nearby store, a balloon will be displayed. ・ The balloon contains the store name, and clicking the store name will take you to the details page of the store.

Gif.gif

Development environment

ruby 2.6.5 Ruby on Rails 6.0.3.3 OS: macOS Catalina

Introduction

This article about how to use GoogleMapApi is summarized in an easy-to-understand manner and I used it as a reference. How to use Google Maps API

Implementation code

The code is below.


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

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

  //Place a marker in the initial position
  mainMarker = new google.maps.Marker({
    map: map,
    position: latlng
  });

  //Place a marker at a nearby store
  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'];
    //Create latitude / longitude data
    let markerLatLng = new google.maps.LatLng({lat: markerData[i]['latitude'], lng: markerData[i]['longitude']});
    //Add marker
    marker[i] = new google.maps.Marker({
      position: markerLatLng,
      map: map,
      icon: image,
    });

    //Add a callout
    infoWindow[i] = new google.maps.InfoWindow({
    //Added a link to the store details page in the balloon
    content: `<a href=/laundries/${id}>${markerData[i]['name']}</a>`
    });

    markerEvent(i); 
  }

  //Display a balloon when a marker is clicked
  function markerEvent(i) {
    marker[i].addListener('click', function() {
      infoWindow[i].open(map, marker[i]);
    });
  }
}

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

Let's look at each one. 1. Definition of variables 

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

I prepared two variables because I wanted to separate the markers of the target store and the surrounding stores. Since marker contains multiple information on nearby stores, it is arranged in an array. Similarly, infoWindow is also arranged because we want to add balloons to the markers of each store.

2. Creating a map ~ Setting a marker 

  let markerData = gon.places;
  let latlng = {lat: gon.latitude, lng: gon.longitude};
  //Specifying the initial position
  map = new google.maps.Map(document.getElementById('map'), {
  center: latlng,
  zoom: 14
  });

  //Place a marker in the initial position
  mainMarker = new google.maps.Marker({
    map: map,
    position: latlng
  });

A variable called latlng is defined to specify the latitude and longitude of the store. gon is one of the gems that converts variables defined in rails into variables that can be used in javascript. (https://github.com/gazay/gon) Create a new map by doing new google.maps.Map and optionally specify the center and zoom level. For map creation, see Let's Programming and Maps JavaScript API Documentation. maps / documentation / javascript / overview? hl = ja # zoom-levels) was used as a reference.

Next, I will put a marker on the created map. You can also set a marker by creating a marker with new google.maps.Marker and specifying which map to place the marker on and where to place the marker.

3. Place a marker on nearby stores + add a balloon 


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'];
    //Create latitude / longitude data
    let markerLatLng = new google.maps.LatLng({lat: markerData[i]['latitude'], lng: markerData[i]['longitude']});
    //Add marker
    marker[i] = new google.maps.Marker({
      position: markerLatLng,
      map: map,
      icon: image,
    });

    //Add a callout
    infoWindow[i] = new google.maps.InfoWindow({
    //Added a link to the store details page in the balloon
    content: `<a href=/laundries/${id}>${markerData[i]['name']}</a>`
    });

    markerEvent(i); 
  }

  //Display a balloon when a marker is clicked
  function markerEvent(i) {
    marker[i].addListener('click', function() {
      infoWindow[i].open(map, marker[i]);
    });
  }

What we are doing is taking out the values of the variables defined in ``` let markerData = gon.places;` one by one and adding markers and callouts. And because I wanted to change the color of the marker, I defined an icon in the constant imageand used the icon defined in icon: image. new google.maps.LatLng({lat: markerData[i]['latitude'], lng: markerData[i]['longitude']});`` Specifies that a marker should be set for the latitude and longitude of each element.

Then add a callout. You can specify the characters to put in the balloon with content. This time, I used the a tag because I wanted to move to the details page by displaying + clicking each store name. Since it is not displayed just by creating the balloon at the end, I used addListener to open the balloon when the marker is clicked.

This is how to display multiple markers on Google Map.

Recommended Posts