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.
ruby 2.6.5 Ruby on Rails 6.0.3.3 OS: macOS Catalina
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
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