-4

最初に言っておきますが、私はプログラマーではありません。
問題は何ですか。Google マップをカスタマイズする方法を見つけるために、ウェブ全体を調べました。
したがって、API v3 を使用してこれを行うことができることがわかりました。適切なコードを見つけるために、Google の Styled Maps を使用してコードを取得しました

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

しかし、私はそれを使用する方法がわかりません。このコードを含む.htmlファイルがあります（HEAD、BODY、何もありません）：

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

コードを組み合わせて、必要なスタイルのマップを取得するにはどうすればよいですか?
マップ スタイルを適用するには、メモ帳に追加で何を書く必要がありますか?

4

1 に答える 1

2

まず、javascript googleMapsAPIドキュメントへのリンクを示します。Googleは、プログラマーでなくても、ドキュメントを非常に理解しやすいものにするという非常に優れた仕事をしています。

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

スタイリングの使用法については、この前の応答を見てください。

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

そして、これはあなたが投稿したスタイルでグーグルのjavascriptAPIを使用したウェブページの例です。ここにあるグーグルマップのサンプルテンプレートから直接コピーされます

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-02T06:14:43.657 に答える