I'm using geoJSON as a data source for Google Maps. I want to use custom markers from a sprite, changing only the iconOrigin.
map.data.setStyle(function(feature) {
var origin=null;
var iconUrl = 'library/css/marker-sprite.png';
var iconSize = new google.maps.Size(50, 50);
var iconAnchor = new google.maps.Point(25, 50);
var iconScaledSize = new google.maps.Size(150, 150);
if (feature.getProperty('origin')) {
origin = feature.getProperty('origin');
var iconOrigin = 'new google.maps.Point(' + origin + ')';
}
return ({
icon: {
url: iconUrl,
size: iconSize,
anchor: iconAnchor,
origin: iconOrigin,
scaledSize: iconScaledSize
}
});
});
The geoJSON (partial)
"properties": {
"id-intern": "123",
"title": "Marker Title",
"content": "lorem ipsum",
"origin": "0, 100"
},
Does somebody see an error in my approach?
Thanks.
Thanks @Craicerjack to show the track! This way it works.
map.data.setStyle(function(feature) {
var iconoriginx = null;
var iconoriginy = null;
var iconUrl = 'library/css/marker-sprite.png';
var iconSize = new google.maps.Size(50, 50);
var iconAnchor = new google.maps.Point(25, 50);
var iconScaledSize = new google.maps.Size(150, 150);
if (feature.getProperty('iconoriginy')) {
iconoriginy = feature.getProperty('iconoriginy');
iconoriginx = feature.getProperty('iconoriginx');
var iconOrigin = new google.maps.Point(iconoriginx,iconoriginy);
}
return ({
icon: {
url: iconUrl,
size: iconSize,
anchor: iconAnchor,
origin: iconOrigin,
scaledSize: iconScaledSize
}
});
});
and the geoJSON with two separated values (NUMBERS!).
"properties": {
"id-intern": "123",
"title": "Marker Title",
"content": "lorem ipsum",
"iconoriginx": 0,
"iconoriginy": 100
},