Develop Reference

Google Maps API: getFeatureById for feature collection not working - javascript

I try to change the style of a specific feature of a feature collection data overlay. This is a snippet of my json:
{
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"id": 1,
"properties": {
"name": "1 CBD - Bankenviertel",
"color": "transparent",
"isHovered": false,
"isActive": false
},
"geometry": {
"type": "Polygon",
"coordinates": [
[
[
8.67279430349,
50.1143807311
],
[
8.67280054398,
50.1143975981
]
]
]
}
}
and this is the relevant snippet from my map.js
map.data.loadGeoJson('some.json');
console.log(map.data.getFeatureById(1));
And I am always getting "undefined" in the console.
What am I doing wrong here?
Thanks,
Robert

You need to call map.data.getFeatureById(1) inside the callback function (so it doesn't execute before the GeoJson has loaded).
from the documentation:
loadGeoJson(url:string, options?:Data.GeoJsonOptions, callback?:function(Array<Data.Feature>))
Return Value: None
Loads GeoJS
proof of concept fiddle
code snippet:
var geocoder;
var map;
function initialize() {
var map = new google.maps.Map(
document.getElementById("map_canvas"), {
zoom: 4,
center: {
lat: -28,
lng: 137
},
mapTypeId: google.maps.MapTypeId.ROADMAP
});
// map.data.addGeoJson(geoJson);
map.data.loadGeoJson(
'https://api.myjson.com/bins/1teyu', {},
function(features) {
console.log(map.data.getFeatureById(1));
console.log(map.data.getFeatureById(1).getProperty("letter"));
});
}
google.maps.event.addDomListener(window, "load", initialize);
html,
body,
#map_canvas {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<div id="map_canvas"></div>

Related

I have a featurecollection of features with their corresponding IDs like this:
"type"=>"Feature",
"id"=>"test_1",
"properties"=>array("desc"=>...
and want to trigger a click event from a button on the document so that the infowindow opens.
var featId = 'test_1';
map.event.trigger(featId, 'click');
but I'm getting
Uncaught TypeError: Cannot read property 'trigger' of undefined
The infowindow opens when I click on the polygon on the map.
Here's a JS fiddle.
I've also added a code snippet using stackoverflow's editor.
var mygeojson={
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
'id':'test_2',
"properties": {},
"geometry": {
"type": "Polygon",
"coordinates": [
[
[
0.5767822265625,
46.437856895024204
],
[
0.560302734375,
46.160809861457125
],
[
0.9118652343749999,
46.10370875598026
],
[
1.42822265625,
46.22545288226939
],
[
0.9118652343749999,
46.581518465658014
],
[
0.5767822265625,
46.437856895024204
]
]
]
}
},
{
"type": "Feature",
'id':'test_1',
"properties": {},
"geometry": {
"type": "Polygon",
"coordinates": [
[
[
1.9335937499999998,
46.98774725646568
],
[
1.8841552734374998,
46.73233101286786
],
[
2.581787109375,
46.53619267489863
],
[
2.8784179687499996,
46.71350244599995
],
[
3.065185546875,
47.00647991252098
],
[
2.3785400390625,
47.18597932702905
],
[
2.1917724609375,
47.60986653003798
],
[
1.9335937499999998,
46.98774725646568
]
]
]
}
}
]
};
function openinfo(target_featId)
{
//map.event.trigger(featId, 'click');
google.maps.event.trigger(map, 'click');
}
initpage = function()
{
var selected_id = 0;
console.log('html loaded');
//center lat/lon
var latlng = new google.maps.LatLng(46.315,0.467);
//map configutations
var myOptions = {
zoom: 8,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP,
scrollwheel: true,
};
map = new google.maps.Map(document.getElementById("themap"), myOptions);
map.data.addGeoJson(mygeojson);
map.data.setStyle(function(feature) {
//var SD_NAME = feature.getProperty('SD_NAME');
//var color = feature.getProperty('boja');
var featId = feature.getId();
var color = 'gray';
if(selected_id == featId)
{
color='#009900';
console.log('setting green for '+featId)
} else
{
color = 'gray';
console.log('setting gray for '+featId)
}
return {
fillColor: color,
strokeColor: color,
strokeWeight: 1
}
});
var infowindow = new google.maps.InfoWindow();
map.data.addListener('click', function(event) {
//var feat_desc = event.feature.getProperty("desc");
var featId = event.feature.getId();
map.data.forEach(function(feature2) {
if(featId == selected_id) feature2.setProperty('color','gray');
});
selected_id = featId;
var color = '#009900';
infowindow.setContent("<div style='width:150px; color: #000;'> litttle test "+featId+"</div>");
// position the infowindow on the marker
infowindow.setPosition(event.feature.getGeometry().getAt(0).getAt(0));
infowindow.open(map);
});
}
html { height: 100% }
body { height: 100%; margin: 0px; padding: 0px; background: #fff; color: #bbb; font-size: 13px; font-family: Arial;}
#themap { height:100%; }
<html>
<head>
<script type="text/javascript" src="https://maps.google.com/maps/api/js"></script>
</head>
<body onload="initpage()">
Open poly 1
Open poly 2<br /><br />
<div id="themap">
</div>
</body>
</html>

I've successfully fixed this by using:
function openinfo(target_featId)
{
google.maps.event.trigger(map.data,'click',target_featId);
}
and then had a new issue with the addListener function. the event.feature was undefined, so I fixed it with:if(!event.feature) event.feature=event; inside map.data.addListener('click', function(event) {

I am trying to set the visibility of polylines based on a property. I use forEach to iterate over the features in the GeoJson data but when I try and call setMap on the array, I get type error: setMap is not a function. I have also tried pushing the resulting features into a new array with the same result.
map.data.loadGeoJson(
'data/trails2018.geojson', {},
function(features) {
console.log("loadGeoJson callback "+features.length);
map.data.forEach(function(feature) {
var skill = feature.getProperty('skill_leve');
if (skill == 'ADVANCED'){
feature.setMap(null);
}
});
});

You control the visibility of features on a Data Layer with the style property visible.
map.data.setStyle(function(feature) {
var visible = false;
if (feature.getProperty('skill_level')) {
var skill = feature.getProperty('skill_level');
if (skill == 'ADVANCED') {
visible = true;
}
}
return /** #type {google.maps.Data.StyleOptions} */ ({
strokeColor: "blue",
visible: visible
});
});
proof of concept fiddle
code snippet:
function initialize() {
var map = new google.maps.Map(
document.getElementById("map_canvas"), {
center: new google.maps.LatLng(-23.55865, -46.65953),
zoom: 5,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var features = map.data.addGeoJson(geoJson);
console.log("addGeoJson returns " + features.length);
map.data.forEach(function(feature) {
var skill = feature.getProperty('skill_level');
if (skill == 'ADVANCED') {
// feature.setMap(null);
}
});
map.data.setStyle(function(feature) {
var visible = false;
if (feature.getProperty('skill_level')) {
var skill = feature.getProperty('skill_level');
if (skill == 'ADVANCED') {
visible = true;
}
}
return /** #type {google.maps.Data.StyleOptions} */ ({
strokeColor: "blue",
visible: visible
});
});
}
google.maps.event.addDomListener(window, "load", initialize);
var geoJson = {
"type": "FeatureCollection",
"features": [{
"type": "Feature",
"properties": {
"id": 1,
"skill_level": "ADVANCED"
},
"geometry": {
"type": "LineString",
"coordinates": [
[-43.48283, -23.02487],
[-43.65903, -23.55888]
]
}
},
{
"type": "Feature",
"properties": {
"id": 2,
"skill_level": "BEGINNER"
},
"geometry": {
"type": "LineString",
"coordinates": [
[-46.65953, -23.02487],
[-46.65903, -23.55888]
]
}
}
]
}
html,
body,
#map_canvas {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map_canvas"></div>

I have already draw some trajectories in Google Maps Api. But I want to give a different color to each trajectory. The problem is that the color always is black even when strokeColor is not '#0000'. Any ideas about what is happening? Here is my code:
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Simple Polylines</title>
<style>
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#map {
height: 100%;
}
</style>
</head>
<body>
<div id="map"></div>
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 10,
center: {lat: -12, lng: -77},
mapTypeId: google.maps.MapTypeId.TERRAIN
});
var aristas = map.data.loadGeoJson('aristas.geojson');
var aristasPath = new google.maps.Polyline({
path: aristas,
geodesic: true,
strokeColor: '#FF0000',
strokeOpacity: 1.0,
strokeWeight: 2
});
aristasPath.setMap(map);
}
</script>

You are adding your polyline to the data layer with .loadGeoJson, that needs to be styled using the data layer styling methods, not as a normal google.maps.Polyline
// Set the stroke width, and fill color for each polyline/polygon
map.data.setStyle({
strokeColor: '#FF0000',
strokeOpacity: 1.0,
strokeWeight: 2
});
proof of concept fiddle
code snippet:
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 7,
center: {
lat: -12,
lng: -77
},
mapTypeId: google.maps.MapTypeId.TERRAIN
});
var aristas = map.data.addGeoJson(platesJson);
// Set the stroke width, and fill color for each polyline/polygon
map.data.setStyle({
strokeColor: '#FF0000',
strokeOpacity: 1.0,
strokeWeight: 2
});
}
google.maps.event.addDomListener(window, 'load', initMap);
var platesJson = {
"type": "FeatureCollection",
"crs": {
"type": "name",
"properties": {
"name": "urn:ogc:def:crs:OGC:1.3:CRS84"
}
},
"features": [{
"type": "Feature",
"properties": {
"strnum": 420,
"platecode": 201,
"datatype": "TR",
"dtnum": 1,
"refnum": 9921,
"appearance": 245.000000,
"disappeara": -999.000000,
"color": 7,
"geogdesc": "PERU-CHILE TRENCH"
},
"geometry": {
"type": "LineString",
"coordinates": [
[-81.8796, -5.0707],
[-81.876, -5.1257],
[-81.8735, -5.2358],
[-81.8737, -5.2473],
[-81.8806, -5.3778],
[-81.871, -5.4765],
[-81.8638, -5.5843],
[-81.8346, -5.736],
[-81.8182, -5.8416],
[-81.7953, -5.9634],
[-81.7765, -6.0598],
[-81.7624, -6.1654],
[-81.7437, -6.2687],
[-81.7293, -6.3536],
[-81.7064, -6.4775],
[-81.6682, -6.6405],
[-81.6263, -6.7213],
[-81.5982, -6.8087],
[-81.5294, -6.9219],
[-81.4834, -7.0347],
[-81.4483, -7.1152],
[-81.3914, -7.2533],
[-81.3679, -7.3427],
[-81.3469, -7.4436],
[-81.3323, -7.5191],
[-81.2998, -7.6201],
[-81.2756, -7.673],
[-81.2494, -7.7373],
[-81.2318, -7.7764],
[-81.2255, -7.8039],
[-81.1969, -7.866],
[-81.1661, -7.9327],
[-81.1379, -8.0129],
[-81.1037, -8.1434],
[-81.0577, -8.2559],
[-81.0115, -8.3547],
[-80.9587, -8.4649],
[-80.9126, -8.5682],
[-80.8997, -8.6139],
[-80.8439, -8.6855],
[-80.8132, -8.7611],
[-80.7695, -8.8688],
[-80.7301, -8.965],
[-80.6681, -9.0752],
[-80.6064, -9.1967],
[-80.5598, -9.2748],
[-80.5088, -9.3598],
[-80.4557, -9.4584],
[-80.4184, -9.5408],
[-80.3541, -9.6486],
[-80.2921, -9.7608],
[-80.2479, -9.8433],
[-80.201, -9.9053],
[-80.126, -10.0518],
[-80.0703, -10.1298],
[-80.0196, -10.2304],
[-79.9303, -10.3452],
[-79.8612, -10.4438],
[-79.817, -10.5261],
[-79.7463, -10.6608],
[-79.6729, -10.7684],
[-79.6218, -10.8507],
[-79.5865, -10.9169],
[-79.551, -10.9785],
[-79.5266, -11.0151],
[-79.4953, -11.0541],
[-79.4757, -11.1086],
[-79.4607, -11.1608],
[-79.4388, -11.2131],
[-79.3921, -11.2839],
[-79.3566, -11.341],
[-79.2965, -11.4323],
[-79.2206, -11.5306],
[-79.1829, -11.5899],
[-79.1426, -11.6403],
[-79.1004, -11.7064],
[-79.0628, -11.7724],
[-79.0273, -11.8293],
[-78.9893, -11.8773],
[-78.9271, -11.9752],
[-78.8806, -12.0594],
[-78.7889, -12.169],
[-78.7083, -12.2582],
[-78.6413, -12.3425],
[-78.5833, -12.42],
[-78.5209, -12.5088],
[-78.4454, -12.6269],
[-78.4124, -12.6948],
[-78.377, -12.7606],
[-78.3217, -12.858],
[-78.2665, -12.9622],
[-78.2089, -13.0619],
[-78.1528, -13.1189],
[-78.1058, -13.1713],
[-78.0453, -13.2373],
[-77.983, -13.3325],
[-77.952, -13.3868],
[-77.89, -13.4908],
[-77.7986, -13.62],
[-77.738, -13.677],
[-77.6595, -13.7566],
[-77.5585, -13.8589],
[-77.5113, -13.9045],
[-77.4488, -13.9837],
[-77.3997, -14.0471],
[-77.2988, -14.1516],
[-77.2249, -14.2354],
[-77.1801, -14.2831],
[-77.0858, -14.3761],
[-76.9742, -14.5207],
[-76.9026, -14.6066],
[-76.8151, -14.695],
[-76.7568, -14.7539],
[-76.6966, -14.8328],
[-76.6426, -14.8805],
[-76.6043, -14.9123],
[-76.5272, -14.9426],
[-76.5002, -14.9697],
[-76.4512, -15.0372],
[-76.3958, -15.1271],
[-76.3718, -15.1919],
[-76.2867, -15.2844],
[-76.1922, -15.366],
[-76.0885, -15.4455],
[-75.9892, -15.5137],
[-75.8835, -15.6065],
[-75.8343, -15.6605],
[-75.7868, -15.688],
[-75.7211, -15.7223],
[-75.6718, -15.7764],
[-75.6115, -15.8527],
[-75.5537, -15.9378],
[-75.4955, -16.003],
[-75.4324, -16.0527],
[-75.3538, -16.1271],
[-75.2975, -16.1723],
[-75.2206, -16.2134],
[-75.173, -16.2363],
[-75.0938, -16.2819],
[-75.0286, -16.3404],
[-74.959, -16.4035],
[-74.8848, -16.471],
[-74.8082, -16.5297],
[-74.788, -16.5499],
[-74.6751, -16.6268],
[-74.6052, -16.6766],
[-74.4517, -16.7784],
[-74.3209, -16.8732],
[-74.1941, -16.9415],
[-74.0948, -17.0092],
[-74.0022, -17.0658],
[-73.8987, -17.1534],
[-73.7904, -17.23],
[-73.6974, -17.2712],
[-73.5977, -17.3169],
[-73.4981, -17.3713],
[-73.4422, -17.436],
[-73.3863, -17.5006],
[-73.3189, -17.5654],
[-73.2204, -17.6746],
[-73.1355, -17.7746],
[-72.9596, -17.9025],
[-72.8495, -18.0051],
[-72.7776, -18.072],
[-72.6854, -18.1523],
[-72.6089, -18.2127],
[-72.5661, -18.2484],
[-72.4901, -18.3392],
[-72.4277, -18.4211],
[-72.352, -18.5271],
[-72.2618, -18.5963],
[-72.1823, -18.6217],
[-72.1168, -18.6642],
[-72.0611, -18.7371],
[-72.0148, -18.825],
[-71.8849, -18.9687],
[-71.8676, -19.0169],
[-71.8187, -19.0895],
[-71.7944, -19.1355],
[-71.7453, -19.1972],
[-71.687, -19.259],
[-71.6264, -19.3144],
[-71.5974, -19.3539],
[-71.5595, -19.4023],
[-71.5149, -19.4595],
[-71.4862, -19.512],
[-71.4531, -19.5755],
[-71.4317, -19.6538],
[-71.3991, -19.741],
[-71.3665, -19.826],
[-71.3143, -19.9653],
[-71.2905, -20.0327],
[-71.2605, -20.1369],
[-71.2512, -20.2472],
[-71.2303, -20.3489],
[-71.2043, -20.4226],
[-71.1895, -20.4854],
[-71.1863, -20.5565],
[-71.186, -20.7739],
[-71.1786, -20.8643],
[-71.1853, -20.9737],
[-71.1805, -21.079],
[-71.1729, -21.1563],
[-71.1613, -21.268],
[-71.1497, -21.3753],
[-71.1377, -21.4612],
[-71.1416, -21.5445],
[-71.1457, -21.6364],
[-71.1538, -21.7004],
[-71.1544, -21.7303],
[-71.1794, -21.843],
[-71.1858, -21.9326],
[-71.1875, -22.02],
[-71.1892, -22.1094],
[-71.1845, -22.216],
[-71.1851, -22.3607],
[-71.181, -22.5031],
[-71.1939, -22.5794],
[-71.2321, -22.7739],
[-71.2546, -22.871],
[-71.2778, -23.004],
[-71.2961, -23.1222],
[-71.2834, -23.2873],
[-71.2969, -23.3926],
[-71.2989, -23.4917],
[-71.2851, -23.6057],
[-71.3027, -23.6855],
[-71.3118, -23.7969],
[-71.3184, -23.8977],
[-71.328, -24.0383],
[-71.3413, -24.1304],
[-71.3664, -24.2412],
[-71.3866, -24.3372],
[-71.3787, -24.5132],
[-71.3796, -24.6721],
[-71.379, -24.7577],
[-71.3746, -24.8809],
[-71.3893, -25.0432],
[-71.4122, -25.1552],
[-71.4473, -25.3085],
[-71.4826, -25.4741],
[-71.4918, -25.588],
[-71.4655, -25.6465],
[-71.4655, -25.6465],
[-71.4651, -25.7397],
[-71.4719, -25.8493],
[-71.4735, -25.9279],
[-71.4806, -26.0538],
[-71.4965, -26.1609],
[-71.5245, -26.3006],
[-71.5664, -26.4482],
[-71.5889, -26.5445],
[-71.6372, -26.6732],
[-71.6522, -26.8474],
[-71.6607, -26.9272],
[-71.6882, -27.0415],
[-71.7346, -27.188],
[-71.7597, -27.2939],
[-71.7892, -27.3955],
[-71.8165, -27.5011],
[-71.8336, -27.5559],
[-71.8689, -27.6001],
[-71.8882, -27.6527],
[-71.9121, -27.7012],
[-71.9463, -27.8064],
[-71.9406, -27.8654],
[-71.9393, -27.9142],
[-71.9527, -28.0053]
]
}
}, {
"type": "Feature",
"properties": {
"strnum": 444,
"platecode": 291,
"datatype": "TR",
"dtnum": 1,
"refnum": 9921,
"appearance": 245.000000,
"disappeara": -999.000000,
"color": 1,
"geogdesc": "CHILE TRENCH"
},
"geometry": {
"type": "LineString",
"coordinates": [
[-71.9527, -28.0053],
[-71.9851, -28.1366],
[-72.0072, -28.2112],
[-72.049, -28.3522],
[-72.1035, -28.5534],
[-72.1591, -28.7018],
[-72.1887, -28.8041],
[-72.2016, -28.8763],
[-72.2217, -28.9645],
[-72.2224, -28.9966],
[-72.2242, -29.083],
[-72.2368, -29.139],
[-72.2514, -29.1829],
[-72.2853, -29.2726],
[-72.3071, -29.3284],
[-72.305, -29.4486],
[-72.3238, -29.5823],
[-72.3395, -29.6779],
[-72.3671, -29.7932],
[-72.4251, -29.9397],
[-72.4341, -30.0431],
[-72.4545, -30.1441],
[-72.4674, -30.2134],
[-72.4695, -30.3126],
[-72.4508, -30.4002],
[-72.446, -30.4973],
[-72.4499, -30.5725],
[-72.4656, -30.6671],
[-72.4835, -30.7597],
[-72.4951, -30.872],
[-72.4934, -31.1143],
[-72.5261, -31.2572],
[-72.5313, -31.3926],
[-72.5351, -31.465],
[-72.5439, -31.555],
[-72.55, -31.6234],
[-72.5487, -31.6723],
[-72.5293, -31.7254],
[-72.5256, -31.7684],
[-72.5245, -31.8231],
[-72.5325, -31.8738],
[-72.5518, -31.9242],
[-72.5717, -31.9979],
[-72.5779, -32.0738],
[-72.5789, -32.1205],
[-72.5824, -32.1749],
[-72.5832, -32.2118],
[-72.5811, -32.2196],
[-72.5679, -32.247],
[-72.539, -32.2824],
[-72.5237, -32.3157],
[-72.5313, -32.3486],
[-72.5503, -32.3851],
[-72.5814, -32.4467],
[-72.6154, -32.5373],
[-72.6348, -32.5892],
[-72.6401, -32.6259],
[-72.6602, -32.7068],
[-72.6663, -32.7782],
[-72.6677, -32.8419],
[-72.6664, -32.8882],
[-72.6607, -32.9423],
[-72.6531, -33.0118],
[-72.6538, -33.0426],
[-72.6551, -33.1023],
[-72.6627, -33.1387],
[-72.6772, -33.175],
[-72.6909, -33.2767],
[-72.741, -33.3757],
[-72.7447, -33.4389],
[-72.7695, -33.5267],
[-72.7801, -33.5954],
[-72.7779, -33.5974],
[-72.7787, -33.6337],
[-72.8056, -33.7136],
[-72.844, -33.797],
[-72.8591, -33.8597],
[-72.8884, -33.9432],
[-72.9127, -34.0114],
[-72.953, -34.0774],
[-73.0047, -34.1393],
[-73.0723, -34.1991],
[-73.1331, -34.2609],
[-73.1892, -34.315],
[-73.2542, -34.3615],
[-73.2915, -34.3912],
[-73.3522, -34.449],
[-73.3993, -34.5127],
[-73.4605, -34.5912],
[-73.5054, -34.6567],
[-73.5739, -34.7557],
[-73.6333, -34.8585],
[-73.6578, -34.9297],
[-73.6772, -34.9803],
[-73.704, -35.0532],
[-73.7327, -35.1129],
[-73.7596, -35.1895],
[-73.7817, -35.2586],
[-73.7949, -35.3353],
[-73.7988, -35.4082],
[-73.7928, -35.4476],
[-73.7942, -35.5074],
[-73.8133, -35.5445],
[-73.8284, -35.6078],
[-73.9549, -35.8464],
[-74.0473, -35.9901],
[-74.0809, -36.0583],
[-74.1119, -36.1154],
[-74.1667, -36.2147],
[-74.2074, -36.2937],
[-74.2436, -36.3764],
[-74.2817, -36.4442],
[-74.3294, -36.534],
[-74.3493, -36.6019],
[-74.4045, -36.719],
[-74.4342, -36.816],
[-74.4744, -36.977],
[-74.5134, -37.081],
[-74.5509, -37.2213],
[-74.5626, -37.3344],
[-74.5716, -37.4273],
[-74.5808, -37.5274],
[-74.5841, -37.5711],
[-74.5954, -37.6673],
[-74.6012, -37.7199],
[-74.6033, -37.8106],
[-74.6044, -37.8577],
[-74.6129, -37.9301],
[-74.6214, -38.0023],
[-74.6304, -38.0926],
[-74.6311, -38.1215],
[-74.6372, -38.19],
[-74.6335, -38.228],
[-74.6413, -38.2657],
[-74.6769, -38.3247],
[-74.7377, -38.3796],
[-74.7829, -38.4581],
[-74.8232, -38.5204],
[-74.8643, -38.6149],
[-74.8795, -38.6775],
[-74.8896, -38.7167],
[-74.8837, -38.758],
[-74.878, -38.8082],
[-74.8814, -38.8564]
]
}
}, {
"type": "Feature",
"properties": {
"strnum": 445,
"platecode": 292,
"datatype": "TR",
"dtnum": 1,
"refnum": 9921,
"appearance": 245.000000,
"disappeara": -999.000000,
"color": 7,
"geogdesc": "CHILE TRENCH"
},
"geometry": {
"type": "LineString",
"coordinates": [
[-74.8814, -38.8564],
[-74.9212, -38.897],
[-74.9545, -38.9501],
[-74.9628, -39.0142],
[-74.9619, -39.073],
[-74.9672, -39.1033],
[-74.9822, -39.1582],
[-75.0043, -39.222],
[-75.0197, -39.2911],
[-75.0335, -39.3956],
[-75.0417, -39.4523],
[-75.0439, -39.5443],
[-75.0456, -39.6168],
[-75.0474, -39.6893],
[-75.0467, -39.7599],
[-75.0489, -39.8516],
[-75.0503, -39.9114],
[-75.0486, -39.9343],
[-75.0458, -40.0065],
[-75.0037, -40.0086],
[-74.9999, -40.0368],
[-75.003, -40.0614],
[-75.0127, -40.0806],
[-75.0175, -40.0893],
[-75.034, -40.1048],
[-75.0692, -40.1323],
[-75.093, -40.1635],
[-75.1242, -40.2122],
[-75.1412, -40.2435],
[-75.1542, -40.2959],
[-75.165, -40.35],
[-75.1709, -40.3954],
[-75.1819, -40.4565],
[-75.1901, -40.5001],
[-75.1987, -40.5576],
[-75.2067, -40.5958],
[-75.2124, -40.6324],
[-75.2182, -40.6759],
[-75.2195, -40.7177],
[-75.2137, -40.7544],
[-75.2101, -40.7858],
[-75.2017, -40.8103],
[-75.1936, -40.847],
[-75.1924, -40.8835],
[-75.2003, -40.9181],
[-75.2151, -40.9508],
[-75.2485, -40.9954],
[-75.2723, -41.0262],
[-75.2919, -41.0675],
[-75.3087, -41.0949],
[-75.3331, -41.143],
[-75.356, -41.2187]
]
}
}]
};
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
#map {
height: 100%;
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map"></div>

I have this map and displaying pointers based on users long and lat. now i have a problem with OverlappingMarkerSpiderfier. when there are more than 1 users with same long and lat. for example: 5 people live in the same building. i need OverlappingMarkerSpiderfier to show the count and then on click to sipderfy it. by default, OverlappingMarkerSpiderfier doesnt work that way.
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(52, 8),
zoom: 4
};
map = new google.maps.Map(document.getElementById('map'), mapOptions);
var oms = new OverlappingMarkerSpiderfier(map,{markersWontMove: true, markersWontHide: true, keepSpiderfied: true});
markerClusterer.setMap(map);
here is the jsfiddle http://jsfiddle.net/gL3L7zso/62/
as you can see, when i click the battefield 3. its showing 1 pointer behind it hiding 3. i need it to be the same but, display the count of pointers hiding behind.
appreciate any solution for this.
update: to make the question more clear.
updated fiddle: http://jsfiddle.net/gL3L7zso/68

One option would be to put a label on each marker in the "cluster", and put the highest labeled marker on top.
oms.addMarker(marker);
var markersNear = oms.markersNearMarker(marker, false);
marker.setLabel("" + (markersNear.length + 1));
marker.setOptions({
zIndex: markersNear.length
});
proof of concept fiddle
code snippet:
var geoJson = {
"type": "FeatureCollection",
"features": [{
"type": "Feature",
"properties": {
"name": "Bielefeld"
},
"geometry": {
"type": "Point",
"coordinates": [8.528849, 52.030656]
}
}, {
"type": "Feature",
"properties": {
"name": "Bielefeld2"
},
"geometry": {
"type": "Point",
"coordinates": [8.528849, 52.030656]
}
}, {
"type": "Feature",
"properties": {
"name": "Bielefeld3"
},
"geometry": {
"type": "Point",
"coordinates": [8.528849, 52.030656]
}
}, {
"type": "Feature",
"properties": {
"name": "Herford"
},
"geometry": {
"type": "Point",
"coordinates": [8.676780, 52.118003]
}
}, {
"type": "Feature",
"properties": {
"name": "Guetersloh"
},
"geometry": {
"type": "Point",
"coordinates": [8.383353, 51.902917]
}
}, {
"type": "Feature",
"properties": {
"name": "Guetersloh2"
},
"geometry": {
"type": "Point",
"coordinates": [8.38, 51.9]
}
}]
};
var map = null;
var bounds = new google.maps.LatLngBounds();
var boxText = document.createElement("div");
boxText.style.cssText = "border: 1px solid black; margin-top: 8px; background: yellow; padding: 5px;";
var infobox = new InfoBox({
content: boxText,
disableAutoPan: false,
maxWidth: 0,
pixelOffset: new google.maps.Size(-140, 0),
zIndex: null,
boxStyle: {
background: "url('tipbox.gif') no-repeat",
opacity: 0.75,
width: "280px"
},
closeBoxMargin: "10px 2px 2px 2px",
closeBoxURL: "http://www.google.com/intl/en_us/mapfiles/close.gif",
infoBoxClearance: new google.maps.Size(1, 1),
isHidden: false,
pane: "floatPane",
enableEventPropagation: false
});
var markerClusterer = new MarkerClusterer(map, [], {imagePath: "https://cdn.rawgit.com/googlemaps/v3-utility-library/master/markerclustererplus/images/m"});
minClusterZoom = 14;
markerClusterer.setMaxZoom(minClusterZoom);
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(52.030656,8.528849),
zoom: 14
};
map = new google.maps.Map(document.getElementById('map'), mapOptions);
google.maps.event.addListenerOnce(map, 'idle', function() {
var oms = new OverlappingMarkerSpiderfier(map, {
markersWontMove: true,
markersWontHide: true,
keepSpiderfied: true
});
oms.addListener('unspiderfy', function(spidered, unspidered) {
for (var i = 0; i < spidered.length; i++) {
spidered[i].setLabel("" + (i + 1));
spidered[i].setOptions({
zIndex: i
});
}
});
markerClusterer.setMap(map);
google.maps.event.addListener(map.data, 'addfeature', function(e) {
if (e.feature.getGeometry().getType() === 'Point') {
var marker = new google.maps.Marker({
position: e.feature.getGeometry().get(),
title: e.feature.getProperty('name'),
map: map
});
google.maps.event.addListener(marker, 'click', function(marker, e) {
return function() {
var myHTML = e.feature.getProperty('name');
boxText.innerHTML = "<div style='text-align: center;'><b>" + myHTML + "</b></div>";
infobox.setPosition(e.feature.getGeometry().get());
infobox.setOptions({
pixelOffset: new google.maps.Size(0, 0)
});
infobox.open(map);
};
}(marker, e));
markerClusterer.addMarker(marker);
oms.addMarker(marker);
google.maps.event.addListener(map, 'idle', function() {
var markersNear = oms.markersNearMarker(marker, false);
marker.setLabel("" + (markersNear.length + 1));
marker.setOptions({
zIndex: markersNear.length
});
});
}
});
layer = map.data.addGeoJson(geoJson);
map.data.setMap(null);
google.maps.event.addListener(map, "click", function() {
infobox.close();
});
});
}
google.maps.event.addDomListener(window, 'load', initialize);
html,
body,
#map {
width: 100%;
height: 100%;
}
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<script src="https://unpkg.com/#google/markerclustererplus#4.0.1/dist/markerclustererplus.min.js"></script>
<script src="https://jawj.github.io/OverlappingMarkerSpiderfier/bin/oms.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/google-maps-utility-library-v3-infobox#1.1.14/dist/infobox.min.js"></script>
<div id="map"></div>

I'm using GeoJSON as a data source for Google Maps. I'm using v3 of the API to create a data layer as follows:
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
<script>
var map;
function initialize() {
//Initialise the map
var myLatLng = new google.maps.LatLng(53.231472,-0.539783);
map = new google.maps.Map(document.getElementById('map-canvas'), {
zoom: 17,
center: myLatLng,
scrollwheel: false,
panControl: false,
zoomControl: false,
scaleControl: true,
disableDefaultUI: true
});
//Initialise base folder for icons
var iconBase = '/static/images/icons/';
//Load the JSON to show places
map.data.loadGeoJson('/api/geo');
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
<div id="map-canvas"></div>
The source of my GeoJSON data is as follows:
{
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"geometry": {
"type": "Point",
"icon": "/static/images/icons/map-marker-do.png",
"coordinates": [
-0.53743,
53.23437
]
},
"properties": {
"name": "Cathedral",
"description": "One of Europe’s finest Gothic buildings, once the tallest building in the world that dominates Lincoln's skyline.",
"icon": "/static/images/icons/map-marker-do.png"
}
}
]
}
What I'm trying to do is make the marker icon on the map come from the "icon" property in the JSON, but cannot figure out how to get the data to change the default marker. Can anyone offer any advice? Thanks.

Use a styling-function(styling-functions enable you to apply styles based on a specific feature)
map.data.setStyle(function(feature) {
return {icon:feature.getProperty('icon')};
});