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

-5

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

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

出典

2011-10-27 13:41:14

+0

リンクは機能しませんか？ – HAWKES08

+0

あなたの答えに関連する説明をリンクまたは投稿してください。 – Sparky

+0

[固定リンクはこちら]（http://code.google.com/intl/pt-BR/apis/maps/documentation/javascript/controls.html）彼はちょうど "htm"の最後に "L"を見逃した。 – RASG

13

時間を過ぎて検索したところ、解決策が見つかりましたあなたのAPI IDを置き換えてください。お楽しみください！

<!DOCTYPE html> 
<html> 
    <head> 
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> 
    <style type="text/css"> 
     html { height: 100% } 
     body { height: 100%; margin: 0; padding: 0 } 
     #map-canvas { height: 60%; width:60%; margin:20px auto; border:1px solid; padding-left:100px; } 
    </style> 
    <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>

出典

2013-06-03 04:33:40

+0

カスタムPegmanボタンを追加することは可能ですか？ – Anuket

+0

@Antonio Almeidaありがとうございます –

3

私は、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;

独自の調整を行います。

ATTENTION

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

出典

2014-02-11 18:54:17 PAdrian

+0

非常に良い！私のために完璧に動作します！ – SquareCat

+2

これは、GoogleマップのUIで指定された構造が同じであれば機能します。目標を達成するためにハードコードされたルールに決して頼るべきではありません。 – torresomar

18

私はパーティーに遅れましたが、ここに私の2セントです。

あなたは基本的に2つのオプションがあります。

オプション1：あなたはその後、絶対位置または類似の手段を使用して正しい位置にマップの上に置くことができ、HTML/CSSを自分で使用してコントロールを作成のどちらかを。これは本番環境でも動作しますが、要素のHTML/CSSが地図が表示されるのと同時にロードされないため、私はこれが気に入らないのです。また、異なるページで同じマップを再利用するのが難しいように、コントロールのHTML/CSSコードを分離しています。例えば「コントロールを追加するのを忘れましたか？」

オプション2：あなたが好きズームコントローラを見て、感じてa custom controlを作成します。以下は実際にこれに関するコードです。要するに

には、最初に呼び出すことで、通常の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();

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

ライブ、それを表示するには：Here is working jsfiddle example

乾杯を。

出典

2014-08-08 09:44:30

+2

それは素晴らしいです。 –

+1

ありがとうございます。 –

+0

これは素晴らしい作品です、ありがとうございます！小さな改良点として、 'controlWrapper.setAttribute（" class "、" custom-zoom-wrapper "）;'などのズームコントロールのクラス名を挙げることができます。これは、jsの代わりにCSSでスタイルを追加できるため、よりクリーンなコードになり、メディアクエリ、つまり小さな画面の小さいボタンが可能になります。 – Davey

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

答えて

関連する問題