Search code examples
javascriptgoogle-mapsgoogle-maps-api-3google-maps-markersgeojson

Custom Marker with Sprite from Geojson in Google Maps


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.


Solution

  • 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
                        },