將自定義樣式應用於地圖

-3

首先，我想說我不是程序員。
問題是，我查看了所有網絡，以瞭解如何自定義您的Google地圖。
所以我發現你可以使用API v3來做到這一點。爲了找到合適的代碼，我用從谷歌風格的地圖，並得到了代碼將自定義樣式應用於地圖

[ 
    { 
    featureType: "all", 
    elementType: "labels", 
    stylers: [ 
     { visibility: "off" } 
    ] 
    } 
]

但我不知道如何使用它。我有一個.html文件與此代碼（沒有頭部，身體，什麼都沒有）：

<iframe width="640" height="640" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.de/maps?hl=de&amp;ie=UTF8&amp;t=m&amp;ll=53.070843,8.800274&amp;spn=0.002256,0.00456&amp;z=17&amp;output=embed"></iframe><br /><small><a href="https://maps.google.de/maps?hl=de&amp;ie=UTF8&amp;t=m&amp;ll=53.070843,8.800274&amp;spn=0.002256,0.00456&amp;z=17&amp;source=embed" style="color:#0000FF;text-align:left">Größere Kartenansicht</a></small>

如何合併的代碼，所以我得到我想要的風格的地圖嗎？
我還需要在記事本中額外寫些什麼，所以地圖樣式才適用？

來源

2013-01-02 Helga

首先我會給你一個鏈接到JavaScript谷歌地圖的API文檔。 Google做了很好的工作，使他們的文檔很容易理解，即使對於非程序員也是如此。

https://developers.google.com/maps/documentation/javascript/tutorial

對於造型使用看一看這之前的響應：

https://stackoverflow.com/a/11686763/1911676

這裏是使用谷歌的的JavaScript API與您發佈的風格的例子網頁。它是直接從設在這裏

http://code.google.com/p/gmaps-samples-v3/source/browse/trunk/devfest-2010/manila/talk/maps/template.html?r=193&spec=svn197

與你一些細微的變化谷歌地圖樣本模板複製。

<!DOCTYPE html> 
<html> 
    <head> 
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/> 
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no"/> 
    <style type="text/css"> 

/*you can change the map size here*/ 
    #map { 
    height: 640px; 
    width: 640px; 
    } 

</style> 

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> 

<script type="text/javascript"> 
    function init() { 
    var map = new google.maps.Map(document.getElementById('map'), { 



//change map settings (origin, zoom amount, type...) 
     zoom: 17, 
     center: new google.maps.LatLng(53.070843, 8.800274), 
     mapTypeId: google.maps.MapTypeId.ROADMAP 



    }); 
    } 
    google.maps.event.addDomListener(window, 'load', init); 



//Here is where you put your styles 
var styles = [ 
    { 
    featureType: "all", 
    elementType: "labels", 
    stylers: [ 
    { visibility: "off" } 
    ] 
    } 
]; 

/*this sets the style*/ 
map.setOptions({styles: styles}); 

</script> 


</head> 

<body> 
Other content 
<!--this is where your map is. This replaces the iframe--> 
<div id="map"></div> 
Other content 
</body> 
</html>

你可以看到它在這裏工作：

http://jsfiddle.net/sP7m5/1/

我希望這有助於。

來源

2013-01-02 06:14:43 Enigmadan

將自定義樣式應用於地圖

回答

相關問題