стилизация Google Maps API внутри аккордеона - PullRequest
Новая
       8

стилизация Google Maps API внутри аккордеона

0 голосов
/ 01 апреля 2012

Я наконец-то реализовал API карт в jquery accordion, в основном, изменив 

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

до 

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


это функционально, однако стилизация карты и маркера не видны. 

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();
        }
    });
});

Кто-нибудь знает, как правильно эти стили?

1 Ответ

1 голос
/ 01 апреля 2012

return выйдет из функции, поэтому все после 

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

... будет игнорироваться.

Изменить порядок: 

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;
...