谷歌地圖API v3沒有被程式化

我試過尋找一段時間，我似乎無法找到答案。我在自己的網站上實施了Google Maps API v3，但是，當我嘗試將其風格化（簡單地去飽和）時，它似乎不起作用。我嘗試了一堆不同的教程，無濟於事。我使用的是Twitter Bootstrap，爲了節省一些CSS的工作，如果這會影響任何東西？該網站可以看到here。谷歌地圖API v3沒有被程式化

下面是地圖中的腳本：

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

就像我上面說的，地圖上顯示出來，但造型不起作用。請讓我知道你是否可以得到任何幫助。我真的很感激！

來源

2013-02-27 Zack

你創造你的風格，但你有沒有它們應用到你的地圖...

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

};

來源

2013-02-27 18:10:25 Sparky

解決了它。非常感謝你！每次我看文檔時，我都必須錯過這一點......菜鳥的錯誤。我欠你一塊餅乾。 – Zack 2013-02-27 18:51:08

@Zack，而不是一個cookie，我會採取「最高票數」（點擊向上箭頭）。謝謝。 – Sparky 2013-02-27 19:19:24

我早些時候嘗試過，但我不能，因爲我沒有足夠高的聲望。對不起...必須要爲這個餅乾解決不幸的。 – Zack 2013-02-27 22:19:11

你需要設置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/

來源

2013-02-27 18:09:47 dmk

謝謝！ Cookie也適合你！我不知道我是怎麼錯過的...... – Zack 2013-02-27 18:51:45

谷歌地圖API v3沒有被程式化

回答

相關問題