Google Maps: Display custom marker multiple times on wide map

Question

I've got a wide map with a very small zoom so parts of the earth appear multiple times. If I add a normal marker, it gets multiplied so that every place in the viewport has that same marker on it:

var marker = new google.maps.Marker({
    position: myLatlng,
    map: map,
    title: 'Hello World!'
});

https://jsfiddle.net/L50thpqr/

However, when I use a custom marker with a path, it only shows up once in the middle:

var marker = new google.maps.Marker({
    position: myLatlng,
    map: map,
    title: 'Hello World!',
    icon: {
        fillOpacity: .75,
        scale: 1,
        strokeColor: 'black',
        strokeWeight: 1,
        scale: .8,
        fillColor: "#fffb70",
        path: "M 0,-8.55 -8.55,8.55 8.55,8.55 Z"
    }
});

https://jsfiddle.net/q14s2rLk/

My question is how I can get the same behavior for the custom marker so it shows up multiple times, too.

Answer 1

One approach at simplification is to render markers on the server. Google provides two services built into the API that make this easy to achieve: FusionTablesLayer and KmlLayer. Creating a custom overlay from imagery that is pre-rendered, or rendered on the fly.

Another useful optimization technique involves viewport marker management: restricting the markers rendered on the map into only those that exist within the viewable area.

If you still want to display many markers on the map, consider creating a custom overlay that displays markers with minimal functionality. This approach may garner performance improvements over standard markers provided by the API.

Clustering simplifies your data visualization by consolidating data that are nearby each other on the map in an aggregate form.

you can use Grid-vased Clustering or Distance-based Clustering. Grid-based clustering works by dividing the map into squares of a certain size (the size changes at each zoom) and then grouping the markers into each grid square. Distance-based clustering is similar to grid-based clustering, except instead of creating clusters of fixed square bounds, clusters are created based on the distance between the marker and a cluster centroid. Cluster centroids are generally specified algorithmically through iteration of the existing marker locations.

Or you can add custom marker to a Google map using an array, check this: Adding multiple custom markers to a google map using an array