カスタムGoogleマップAPI V3ズームボタン

どのように私は自分のイメージにGoogleマップのAPI(v3のJavaScript)のズームボタンをカスタマイズすることができます。

13

4 答え

私はパーティーで遅いですが、ここに私の2セントです。

基本的に2つの選択肢があります:

Option 1: You either create the controls using HTML/CSS yourself, which you can then place over the map to the correct position using position absolute or similar means. Even though this works in production, I don't like this, because your HTML/CSS for the element doesn't load at the same time than the map is displayed. Also you are separating your HTML/CSS code for the controls so it is harder to reuse the same map at different pages. e.g. "Did I forgot to add the controls?"

Option 2: You create a custom control which looks and feels the zoom controllers you like. Below is an code about this in practice.

要するに、最初に通常のUIコントローラを無効にする必要があります:

var mapOptions = {
    zoom: 12,
    center: chicago,
    /* Disabling default UI widgets */
    disableDefaultUI: true//<-- see this line
}

コントローラを作成して使用するだけです。

HTML:

... 
<div id="map-canvas"></div>
...

CSS:

html, body, #map-canvas {
    height: 100%;
    margin: 0px;
    padding: 0px;
}

JavaScript:

var map;
var chicago = new google.maps.LatLng(41.850033, -87.6500523);

/**
 * The ZoomControl adds +/- button for the map
 *
 */
function ZoomControl(controlDiv, map) {

 //Creating divs & styles for custom zoom control
  controlDiv.style.padding = '5px';

 //Set CSS for the control wrapper
  var controlWrapper = document.createElement('div');
  controlWrapper.style.backgroundColor = 'white';
  controlWrapper.style.borderStyle = 'solid';
  controlWrapper.style.borderColor = 'gray';
  controlWrapper.style.borderWidth = '1px';
  controlWrapper.style.cursor = 'pointer';
  controlWrapper.style.textAlign = 'center';
  controlWrapper.style.width = '32px'; 
  controlWrapper.style.height = '64px';
  controlDiv.appendChild(controlWrapper);

 //Set CSS for the zoomIn
  var zoomInButton = document.createElement('div');
  zoomInButton.style.width = '32px'; 
  zoomInButton.style.height = '32px';
  /* Change this to be the .png image you want to use */
  zoomInButton.style.backgroundImage = 'url("http://placehold.it/32/00ff00")';
  controlWrapper.appendChild(zoomInButton);

 //Set CSS for the zoomOut
  var zoomOutButton = document.createElement('div');
  zoomOutButton.style.width = '32px'; 
  zoomOutButton.style.height = '32px';
  /* Change this to be the .png image you want to use */
  zoomOutButton.style.backgroundImage = 'url("http://placehold.it/32/0000ff")';
  controlWrapper.appendChild(zoomOutButton);

 //Setup the click event listener - zoomIn
  google.maps.event.addDomListener(zoomInButton, 'click', function() {
    map.setZoom(map.getZoom() + 1);
  });

 //Setup the click event listener - zoomOut
  google.maps.event.addDomListener(zoomOutButton, 'click', function() {
    map.setZoom(map.getZoom() - 1);
  });  

}

function initialize() {
  var mapDiv = document.getElementById('map-canvas');

  var mapOptions = {
    zoom: 12,
    center: chicago,
    /* Disabling default UI widgets */
    disableDefaultUI: true
  }

  map = new google.maps.Map(mapDiv, mapOptions);

 //Create the DIV to hold the control and call the ZoomControl() constructor
 //passing in this DIV.
  var zoomControlDiv = document.createElement('div');
  var zoomControl = new ZoomControl(zoomControlDiv, map);

  zoomControlDiv.index = 1;
  map.controls[google.maps.ControlPosition.TOP_LEFT].push(zoomControlDiv);
}

initialize();

注:このコードには空想的なアイコンなどはなく、プレースホルダだけが含まれています。したがって、ニーズに合わせてチューニングする必要があるかもしれません。さらに、HTML5の通常のタグを追加して、Googleマップのapi v3 javascript用のスクリプトインクルードを忘れないようにしてください。体の残りの部分が必要であることはかなり明白なので、 <div id = "map-canvas"> </div>

To see it live: Here is working jsfiddle example

乾杯。

19
追加された
これは素晴らしい作品です、ありがとう!小さな改良点は、 controlWrapper.setAttribute( "class"、 "custom-zoom-wrapper"); などのズームコントロールクラス名を与えることです。これは、jsの代わりにCSSでスタイルを追加できるため、よりクリーンなコードになり、メディアクエリ、つまり小さな画面の小さいボタンが可能になります。
追加された 著者 Davey,
これはありがとうございます。
追加された 著者 Barlas Apaydin,
それはすごいね。
追加された 著者 Andrew Swift,

数時間の検索の後、私は解決策を見つけた あなたのAPI IDを置き換えてください! 楽しい!

<!DOCTYPE HTML>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    
    <script type="text/javascript"
      src="https://maps.googleapis.com/maps/api/js?key=YOUR-MAP_API-ID&sensor=false&region=AU">
    </script>



<script type="text/javascript">

function HomeControl(controlDiv, map) {

 google.maps.event.addDomListener(zoomout, 'click', function() {
   var currentZoomLevel = map.getZoom();
   if(currentZoomLevel != 0){
     map.setZoom(currentZoomLevel - 1);}     
  });

   google.maps.event.addDomListener(zoomin, 'click', function() {
   var currentZoomLevel = map.getZoom();
   if(currentZoomLevel != 21){
     map.setZoom(currentZoomLevel + 1);}
  });

}

var map;
var markersArray = [];


function initialize() {

  var mapDiv = document.getElementById('map-canvas');
  var myLatlng = new google.maps.LatLng(-33.90224, 151.20215);
  var mapOptions = {
    zoom: 15,
    center: myLatlng,
    Marker: true,
    panControl: false,
    zoomControl: false,
    streetViewControl: false,
    overviewMapControl: false,
     mapTypeControl: false,
     mapTypeControl: false,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  }

  map = new google.maps.Map(mapDiv, mapOptions);
  var marker = new google.maps.Marker({
      position: myLatlng,
      map: map,
      title:"Hello World!"
  });

 //Create the DIV to hold the control and
 //call the HomeControl() constructor passing
 //in this DIV.
  var homeControlDiv = document.createElement('div');
  var homeControl = new HomeControl(homeControlDiv, map);

}

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

</script>

</head>




  <body>
    <div id="map-canvas"></div>
    <div id="zoomout" style="border:1px solid; width:150px; cursor:pointer; margin-bottom:20px;">ZOOM ME OUT</div>
    <div id="zoomin" style="border:1px solid; width:150px; cursor:pointer; ">ZOOM ME IN</div>
  </body>
</html>
14
追加された

これは不可能です。あらかじめ定義されたオプションパラメータを使用して外観を微調整することも、ズームコントロールと同じ機能を提供するカスタムマップコントロールを実装することもできます。 詳細については、このページをご覧ください。

UPDATED:リンクが修正されました。フィードバックをお寄せいただきありがとうございます!

4
追加された
あなたの答えに関連する説明をリンクまたは投稿してください。
追加された 著者 Sparky,
ここの固定リンク彼はちょうど "htm"の最後に "L"を見逃した。
追加された 著者 RASG,
みんなありがとう!リンクを修正!
追加された 著者 Stefan Kovachev,
リンクdoesnt仕事ですか?
追加された 著者 HAWKES08,

私はCSSの方法でそれをやった:

#map-container .gm-style > .gmnoprint > .gmnoprint { background: url(/images/map-zoom-controls.png) no-repeat center center !important; width: 42px !important; height: 68px !important; }
#map-container .gm-style > .gmnoprint > .gmnoprint > div > img { display: none !important; }
#map-container .gm-style > .gmnoprint > .gmnoprint div[title="Zoom in"] { top: 2px !important; left: 2px !important; width: 38px !important; height: 31px !important; }
#map-container .gm-style > .gmnoprint > .gmnoprint div[title="Zoom out"] { top: 35px !important; left: 2px !important; width: 38px !important; height: 30px !important; }

これは次のようなイメージです。 幅:42px; 高さ:68px;

あなた自身の調整をしてください。

注意

これはタイトル属性のため英語版を使用している場合にのみ適用されます。

3
追加された
結構!私のために完璧に動作します!
追加された 著者 SquareCat,
これは、GoogleマップのUIで与えられた構造が同じであれば機能します。目標を達成するためにハードコーディングされたルールに決して頼るべきではありません。
追加された 著者 torresomar,
JavaScript - 日本のコミュニティ
JavaScript - 日本のコミュニティ
2 参加者の

日本人コミュニティのjavascript