Google지도 v3의 기본 위치 오프셋 오프셋

Question

Google지도 v3 기본 컨트롤 위치를 '위쪽, 왼쪽'으로 설정하고 싶지만 300px로 유지하고 싶습니다. API를 사용하여이를 수행하는 방법을 찾지 못했습니까? 내가 div를 잡아 원시 javascript/jQuery로 만들 필요가 있다고 생각한다.

미리 감사드립니다.

Answer 1

훨씬 간단한 해결책이 있습니다. 나는 다음과 같은 기능 요청 Allow exact control position using pixels (당신이 투표 할 수있는)에 대한 설명에서 아이디어를 얻었습니다.

자바 스크립트 :

var emptyDiv = document.createElement('div'); 
emptyDiv.className = 'empty'; 
emptyDiv.index = 0; 
map.controls[google.maps.ControlPosition.TOP_LEFT].push(emptyDiv); 

CSS :

.empty { 
    width: 300px; 
} 

를 그리고 여기의 JSFiddle있어 여기에 구현입니다. 당신이 psxls 예제를 사용하여, 수직 상단 여백을 설정하려면

Answer 2

이상하지 않을 수도 있지만 jQuery를 사용하여 해결했습니다.

여기 DOM의 고유 한 요소를 잡고 주 컨트롤러 div로 버블 링하여 컨트롤 div 래퍼를 잡아 내고 있습니다. 그런 다음 나중에 참조 용으로 저장된 사용자 정의 div로 마무리합니다. 처음에는 컨트롤 div 래퍼를 옮겼지만 왼쪽으로 다시 이동했습니다 : 0 번 위로 이동합니다. 사용자 정의 div로 래핑하고 큰 효과가있는 오프셋 및 새 div 래핑을 나중에 사용할 수 있습니다.

var $controls = {}, _loaded = false; 
// define the control wrapper for use later, map hasn't loaded yet 

google.maps.event.addListener(map, 'idle', function(event) { 
// map is idle 

    if(!_loaded){ _loaded = true; 
    // only runs on first idle 

     var control_move = setInterval(function(){ 
     // look for loaded controller 

      var img = 'img[src="http://maps.gstatic.com/mapfiles/mapcontrols3d7.png"]'; 

      if($(img).size() == 5){ 
      // loaded controller found 

       clearInterval(control_move); 
       // stop looking for loaded controller 

       $(img+':first').parent().parent().parent().parent() 
        .wrap('<div id="control-offset" style="position: absolute; left: 300px; top: 0; width: 78px; height: 340px; overflow: hidden; z-index: 1000;"/>'); 
       $controls = $('#control-offset'); 
       // I wrap the controller wrap and offset that so it doesn't jump around 

      } 

     }, 100); 
     // looping every tenth of a second 

    // more initial map load code 

    } 

    // more idle map code 

}); 

붐.이 말이 맞는다면 말해주십시오.

Answer 3

, 단지처럼 사용할 필요가 :

function initialize() { 
    var options = { 
     zoom: 8, 
     center: new google.maps.LatLng(-34, 150), 
     zoomControl: true, 
     panControl: true, 
     panControlOptions: { 
      position: google.maps.ControlPosition.LEFT_TOP 
     }, 
     zoomControl: true, 
     zoomControlOptions: { 
      style: google.maps.ZoomControlStyle.LARGE, 
      position: google.maps.ControlPosition.LEFT_TOP 
     } 
    }; 
    map = new google.maps.Map(document.getElementById('map'), options); 

    var emptyDiv = document.createElement('div'); 
    emptyDiv.className = 'map_controls'; 
    emptyDiv.index = 0; 
    map.controls[google.maps.ControlPosition.TOP_LEFT].push(emptyDiv); 
} 

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

http://jsfiddle.net/54LLm/19/