Invisible style on my Map

Question

I'm using Google Maps For Javascript. I reorganized all options and working true location. But when i add style and marker, I don't see the effects. How can I fix it?

    var locations = [
      ['MyLocation', 41.084951,29.016048],
    ];


    var waStyle = [
            {
                featureType: "all",
                stylers: [
                    { saturation: -100 }
                ]
            }
        ];

    var map = new google.maps.StyledMapType(waStyle,{name: "MyLoc"});

    var img = new google.maps.MarkerImage("/themes/bc/images/bc_pin.png");

    var map = new google.maps.Map(document.getElementById('map_detail'), {
      zoom: 10,
      center: new google.maps.LatLng(41.084951,29.016048),
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });

    var infowindow = new google.maps.InfoWindow();

    var marker, i;

    for (i = 0; i < locations.length; i++) {  
      marker = new google.maps.Marker({
        position: new google.maps.LatLng(locations[i][1], locations[i][2]),
        map: map
      });

      google.maps.event.addListener(marker, 'click', (function(marker, i) {
        return function() {
          infowindow.setContent(locations[i][0]);
          infowindow.open(map, marker);
        }
      })(marker, i));

    }

Answer 1

Using your code, I see the marker. The style isn't visible because you don't use it on the map.

documentation

To actually use the style (your code with some comments and added code from the documentation referenced above):

// Create a new StyledMapType object, passing it the array of styles,
// as well as the name to be displayed on the map type control.
var styledMap = new google.maps.StyledMapType(waStyle,{name: "MyLoc"});

var img = new google.maps.MarkerImage("mapIcons/marker1.png");

// Create a map object, and include the MapTypeId to add
// to the map type control.
map = new google.maps.Map(document.getElementById('map_canvas'), {
  zoom: 10,
  center: new google.maps.LatLng(41.084951,29.016048),
  mapTypeId: google.maps.MapTypeId.ROADMAP,
  mapTypeControlOptions: {
    mapTypeIds: [google.maps.MapTypeId.ROADMAP, 'map_style']
  }
});

//Associate the styled map with the MapTypeId and set it to display.
map.mapTypes.set('map_style', styledMap);
map.setMapTypeId('map_style');

To use the marker icon you have defined, include it in the google.maps.Marker constructor:

  marker = new google.maps.Marker({
    position: new google.maps.LatLng(locations[i][1], locations[i][2]),
    icon: img,
    map: map
  });

Note that if you have more than one marker, you are going to have issues with associating the infoWindow with the marker which can be fixed with function closure (a createMarker function) and is a FAQ.

working example based off your code