Google Map API v3 не стилизован

Question

Я пробовал искать какое-то время, и я не могу найти ответ. Я реализовал API Карт Google v3 на своем веб-сайте, который работает. Однако, когда я пытаюсь стилизовать его (просто обесцветить), он, похоже, не работает. Я пробовал кучу разных учебников, но безрезультатно. Я тоже использую Twitter Bootstrap, чтобы немного поработать с CSS, если это повлияет на что-нибудь? На веб-сайте можно увидеть пчелу here.

Вот сценарий для карты:

<script type="text/javascript"> 
    function initialize() { 
    var styles = [ 
     { 
     featureType: "all", elementType: "all", stylers: [ { saturation: -100 } 
     ] 
     } 
    ]; 

    var mapOptions = { 
     center: new google.maps.LatLng(42.29900, -71.26232), 
     zoom: 17, 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    }; 

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

    }; 
</script> 

Это, как я положил его в мой HTML дальше вниз страницы:

<div class="bg-blue"> 
    <div id="map_canvas" style="width: 100%; height: 250px;"></div> 
</div> 

Как я уже говорил выше, карта показывает, но стилизация не вступает в силу. Пожалуйста, дайте мне знать, если вы можете помочь. Я был бы очень признателен!

Answer 1

Вы создали свои стили, но вы не использовали их на карту ...

https://developers.google.com/maps/documentation/javascript/styling#styling_the_default_map

function initialize() { 

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

    var mapOptions = { 
     center: new google.maps.LatLng(42.29900, -71.26232), 
     zoom: 17, 
     mapTypeId: google.maps.MapTypeId.ROADMAP, 
     styles: styles // <-- add this 
    }; 

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

}; 

Answer 2

Вы должны установить styles свойство в вашем mapOptions объекта:

var mapOptions = { 
    center: new google.maps.LatLng(42.29900, -71.26232), 
    zoom: 17, 
    mapTypeId: google.maps.MapTypeId.ROADMAP, 
    styles: styles 
}; 

http://jsfiddle.net/bTZcS/