Adding geometries to data layer - how to set feature styles during add? - google-maps

Question

I'm building a school layer. For each school, I will assign a different icon depending on its properties.
This is my current solution. I first insert all the schools into a data layer, and then run a forEach function to change each point's icon. This is not optimal, because I am adding the schools, then immediately editing the schools.
// Current solution. It is WORKING but it is not optimal
schools = (a list of google.maps.Data.Point objects)
for (school in schools) {
schoolLayer.add({
geometry: school,
});
}
schoolLayer.forEach(function(feature) {
schoolLayer.overrideStyle(feature, {
if (some condition) {
icon: ...
} else {
icon: ...
}
}
}
The optimal solution would be to add styles to the school while it is added, so that no editing is required afterwards. Something like this:
// The solution I am trying to achieve. The `StyleOptions` property is made up to represent what I am trying to achieve. I want to add styles to the school as it is being inserted into the data layer
for (school in schools) {
schoolLayer.add({
geometry: school,
StyleOptions: {
if (some condition) {
icon: ...
} else {
icon: ...
}
}
});
}
The above code does not work. Is there something I'm missing from the documentation that allows me to achieve that?

Answer 1

I would suggest creating a list of google.maps.Data.Feature objects instead of the google.maps.Data.Point objects. Data.Feature can include geometry that is an instance of google.maps.Data.Point in your case, id that can be string or number and properties where you can put name-value pairs.
https://developers.google.com/maps/documentation/javascript/reference/3/data#Data.Feature
The presence of properties in a feature makes a trick. You can apply a styling function for your data layer that reads property of the feature (icon in your case) and returns corresponding style. The styling function will be applied when you add a feature to the data layer.
Have a look at the following code sample, the schoolLayer.setStyle() is the most relevant part
var map;
function initMap() {
var schools = [
new google.maps.Data.Feature({
geometry: new google.maps.Data.Point({lat: 41.384301, lng: 2.173792}),
id: 1,
properties: {
"icon": "http://maps.google.com/mapfiles/kml/paddle/blu-blank.png"
}
}),
new google.maps.Data.Feature({
geometry: new google.maps.Data.Point({lat: 41.384897, lng: 2.176656}),
id: 2,
properties: {
"icon": "http://maps.google.com/mapfiles/kml/paddle/pink-blank.png"
}
}),
new google.maps.Data.Feature({
geometry: new google.maps.Data.Point({lat: 41.386756, lng: 2.175268}),
id: 3,
properties: {
"icon": "https://maps.gstatic.com/mapfiles/place_api/icons/geocode-71.png"
}
})
];
map = new google.maps.Map(document.getElementById('map'), {
zoom: 17,
center: {lat: 41.385064, lng: 2.173403}
});
var schoolLayer = map.data;
schoolLayer.setStyle(function(feature){
return {
icon: feature.getProperty("icon"),
title: "" + feature.getId()
};
});
for (school of schools) {
schoolLayer.add(school);
}
}
#map {
height: 100%;
}
html, body {
height: 100%;
margin: 0;
padding: 0;
}
<div id="map"></div>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDztlrk_3CnzGHo7CFvLFqE_2bUKEq1JEU&callback=initMap">
You can also find this example on jsfiddle: https://jsfiddle.net/xomena/tLsjkowp/
I hope this helps!

Answer 2

#xonema - Great answer.
Just adding that I set the properties locally in this manner:
new google.maps.Data.Feature({
geometry: new google.maps.Data.Point(gaugeLatLng),
properties: {
title: gaugeDetail.gaugeId,
icon: {
path: google.maps.SymbolPath.CIRCLE,
scale: 6,
},
}
})