Colored Lines Do Not Work on Styled Google Maps

[schnuerle]

If you use Google's styled maps option (http://code.google.com/apis/maps/documentation/javascript/styling.html) and try to assign a leg color (legColors.usual[mti.ROADMAP] = '#444';), the colors don't work.

When you specify a style, you override a current Google style, like ROADMAP:

var mapOptions = {
mapTypeControlOptions: { mapTypeIds: [google.maps.MapTypeId.ROADMAP, 'custom_style_name'] }
};

So there should be some way to access this new style, but ROADMAP is not the way. Here is a test link. Click the orange marker to the right of the center marker.

http://www.yourmapper.com/mapV3.php?id=174&num=25&lat=38.23469126&lon=-85.7198380

The spiderfied lines should be blue with an orange highlight (as you can see in the Terrain view), but they are the default black with no highlight.

[jawj]

I think you've slightly misunderstood the map styling documentation. Your example code above doesn't override the ROADMAP style -- it just asks for a map control to toggle between ROADMAP and a custom style.

This is how you add custom styles to a map, and how you then change the line colour of the spider legs:

var gm = google.maps;

var map = new gm.Map(document.getElementById('map_canvas'), {
  mapTypeId: gm.MapTypeId.SATELLITE, center: new gm.LatLng(50, 0), zoom: 6
});

var sepiaStyles = [ { stylers: [ { gamma: 0.5 }, { saturation: -65 }, { hue: "#ffaa00" } ] },
    { elementType: "labels", stylers: [ { visibility: "off" } ] } ];

var sepiaMapType = new gm.StyledMapType(sepiaStyles, {name: "Sepia"});
map.mapTypes.set('sepia', sepiaMapType);
map.setMapTypeId('sepia');

var oms = new OverlappingMarkerSpiderfier(map);
oms.legColors.usual.sepia = '#f00';
oms.legColors.highlighted.sepia = '#ff0';

[schnuerle]

Thanks a lot for the quick reply. That did the trick. I did misunderstand the Google implementation, and I didn't try to call the custom style type correctly with oms.

[jawj]

No problem. Glad you got it sorted.