Hello everyone I am Ian, currently responsible for the front page of the web, every day work is dealing with a variety of issues ~~ (pm odd needs) ~ ~, by the way to share some of the relevant solutions.

Just recently focusing on the use of google map tools, you need to sprinkle a lot of data on google map, the information is also full of information, so that users click on the marker to open infowindow, too slow. So began to study the tool of the marker group concept, and also found that the Chinese document on the marker library is a little less, so it has been handwritten with the marker to extend the use of examples, you can also directly open the sample to see the code.

Divided into built-in google map tool operations, there are tools developed using the google map team to achieve more features.

google map general use example is as follows with built-in marker infowindow

First of all, the first to use the more commonly used features, multiple markers under google map, and then interact with the marker event, the following is the use of open infowindow.

Simply creating multiple latitude and longitude data shows the price of taxis to the location.

1
2
3
4
5
6
7
8
9
10
11
12
//just list important part. detail see codepen
var marker = new google.maps.Marker({
position: {lat: item.lat, lng: item.lng},
map: map,
title: item.name,
icon:image,
data:'Go to '+item.name + '<br/> Taxi price: ' +item.price
});
marker.addListener('click', function() {
infowindow.setContent( this.data );
infowindow.open(map, this);
});

The more special is the wording, adding data objects to each marker, allowing the marker to extend its operability.

The following picture actually calls the data printed by the marker. You can see the line where the data we just joined appears. This way you can use the marker to bring some data. For example, click the marker to call the function and then interact with it. This method changes. It is convenient and light.
Ps. You can use the specified marker markerArr[i].setOptions({data=”/change/image”}) to change the marker data.

google map marker console

Real Operation Example click open infowindow





### google map with library
Thanks google greatly, in fact, googlemap official github has organized many librariesgoogle map library,It is recommended to download and use, because there are 404…


This way we use markerwithlabel and markerclusterThese two libraries, markerwithlabel, allow us to design different markers more easily, for example, letting them take a custom image, and then focusing on the markercluster, which allows us to solve the problem of too many markers and overlaps.


The first one to deal with a single marker is MarkerWithLabel, originally called google.maps.Marker changed to MarkerWithLabel, and then get it, very fast and simple, he can use the event full, basically can handle the marker interaction, and even It can be set as an ordinary marker.
1
2
3
4
5
6
7
8
9
10
11
12
//More variables please click on the documentation, you can basically use class with css operation, or labelStyle handle icon icon style
var marker = new MarkerWithLabel({
draggable: false,
raiseOnDrag: false,
map: map,
labelContent: '<span>'+ item.name +'<br/>'+ item.price +'</span>',
labelAnchor: new google.maps.Point(40,32),
labelClass: "labels", // the CSS class for the label
labelStyle: {opacity: 1},
position: {lat: item.lat, lng: item.lng},
data:'Go to '+item.name + '<br/> Taxi price: ' +item.price
});


### Practical examples markerwithlabel

See the Pen google map marker cluster (markercluster & markerlabel) by ianchu (@chu1228) on CodePen.




The last is to use the markercluster tool, which currently has another version of markerclusterplus, which is used only for the general version.

The markercluster mainly processes the call function to render the picture after the marker is finished, quickly determines whether each marker is close to a certain degree, and creates an aggregate marker of the attribute. This is simply.
1
use marker -> markerArr.markercluster({})


Create Cluster method, this version can not bring in the className, need to open the .js file, directly in the style.push block to modify, here I have to modify the background-repeat: no-repeat.
1
2
3
4
5
6
7
8
//Arr is just the marker's array needs to be built into the rest of the built-in options
markerCluster = new MarkerClusterer(map, arr, {
gridSize: 50,
maxZoom: 15,
zoomOnClick: true,
styles: imgArr,
imagePath: 'https://googlemaps.github.io/js-marker-clusterer/images/m'
});


Here is the method of customizing the Cluster icon. This function will capture the marker contained in the established cluster and will be brought in with the array. At this time, we will run back and bring the data inside the marker out. The way you want to render, my side is calculating the average price (click event is written below this example, but I write directly into the codepen and can’t run).
1
2
3
4
5
6
7
8
9
10
11
12
13
14
// Slightly modify the file of cluster.js to make aggregation more customizable
MarkerClusterer.prototype.calculator_ = function(markers, numStyles) {
...
var price = 0;
for (var i = 0; i < markers.length; i++) {
price += Number(markers[i].dataPrice);
}
price = Math.floor(price/count);
...
return {
text: count + ' 筆<br/>A. NT' + price,
index: index
};
};


### Practical Examples markercluster

The above simple explanation of the google map marker excessive processing method, I did not expect the most troublesome is to write examples + to create false information is the most time-consuming, just after the end of the update to see the updated version…latest

We can directly try to see, look at the introduction of seemingly support call option directly modify the icon There is an increase in className, can directly bypass me above hard to change the cluster.js this section is the best, after all, change the lack of the most important front-end plug-in plugin.

Thank you for reading! ! Hope to solve the problem of the google map trouble marker,
Let’s use google map to use XD little by little.