Question

I finally got maps api implemented into jquery accordion, mainly by changing

var map;
var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions); 

to

var map = null;  
return new google.maps.Map($('#map_canvas')[0], myOptions);

it’s functional, however the styling of map and the marker are not visible.

var map = null;  

var latlng = new google.maps.LatLng(40.744098,-73.95348);

function initializeMap() {

    var myOptions = {
        zoom: 15,
        center: latlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };

     var styles = [ {
                       featureType: "all",
                       stylers: [ { saturation: -100 }, { invert_lightness: true }, { lightness: 2 }, { gamma: 1.29 } ]
                     }];

    return new google.maps.Map($('#map_canvas')[0], myOptions); map.setOptions({styles:styles});

    var marker = new google.maps.Marker({
                    position: latlng,
                    map: map,
                });
}



$(document).ready(function() {
    $("#accordion").accordion();

    $("#accordion").bind('accordionchange', function(event, ui) {
        if (ui.newContent.attr('id') == 'tabThree' && !map)
        {
            map = initializeMap();
        }
    });
});

does anyone know of the correct way these styles in?

Answer 1

return will leave a function, so everything after

return new google.maps.Map($('#mapCanvas')[0], myOptions);

…will be ignored.

Change the order:

var styles = [{
               featureType: "all",
               stylers:     [ { saturation: -100 }, 
                              { invert_lightness: true }, 
                              { lightness: 2 }, 
                              { gamma: 1.29 } 
                            ]
                     }];

var map= new google.maps.Map($('#mapCanvas')[0], myOptions); 
map.setOptions({styles:styles});

var marker = new google.maps.Marker({
                    position: latlng,
                    map: map
                });

return map;