title: styling Google Maps API inside accordion
body: <p>I finally got maps api implemented into jquery accordion, mainly by changing </p>
  
  <pre><code>var map;
  var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions); 
  </code></pre>
  
  <p>to </p>
  
  <pre><code>var map = null;  
  return new google.maps.Map($('#map_canvas')[0], myOptions);
  </code></pre>
  
  <p><br /></p>
  
  <p>it's functional, however the styling of map and the marker are not visible.</p>
  
  <pre><code>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' &amp;&amp; !map)
          {
              map = initializeMap();
          }
      });
  });
  </code></pre>
  
  <p>does anyone know of the correct way these styles in?</p>