Google지도 "noClear"가 작동하지 않습니다.

Question

저는 건물에있는 웹 사이트에지도가 있으며 표시되는 위치에 세부 정보를 추가하기 위해 섹션을 오버레이하려고합니다. 현재는로드시 오버레이 요소가 영구적으로 사라지기 전에 깜박입니다. 나는 그것들을 분리시키고 "position : absolute"를 사용하는 것이 가능하다는 것을 들었다. 그러나 나는 모든 것을 함께 유지하려고한다.

인터넷에서 확인한 적이 있지만 "noClear"에 관한 정보는 매우 드뭅니다.

편집 : JSFiddle에서 다시 작업 해보십시오. 질문을하기 전에 시도했을 때 재앙이었습니다.

편집 : 어떤 이유로 든 내 코드와 올바르게 작동하지 못했지만 비슷한 코드를 사용하여 오류를 복제했습니다. http://jsfiddle.net/103romm2/

Google지도 자바 스크립트가

<script> 
     function initialize() { 
      var myLatlng = new google.maps.LatLng(51.400140, -3.288225); 
      var mapCanvas = document.getElementById('map_canvas'); 
      var mapOptions = { 
       scrollwheel: false, 
       navigationControl: false, 
       mapTypeControl: false, 
       scaleControl: false, 
       disableDefaultUI: true, 
       center: myLatlng, 
       zoom: 17, 
       mapTypeId: google.maps.MapTypeId.ROADMAP, 
       noClear: true 
      } 
      var map = new google.maps.Map(mapCanvas, mapOptions) 
      var marker = new google.maps.Marker({ 
       position: myLatlng, 
       map: map, 
      }); 
     } 
     google.maps.event.addDomListener(window, 'load', initialize); 
    </script> 

HTML

<div id = "map_canvas" class = "hidden-phone"> 
     <div id = "overlay-map"> 
      <h1 style = "float: left; font-weight: bold"> Contact us </h1> 
      <div class = "col-md-6 col-md-offset-6">   
       <h3>Where we are</h3> 
       <br> 
       <div class="row-fluid"> 
        <div class="col-md-12"> 
         <div class="address-container"> 
          <img src="img/glyphicons_060_compass.png" /> 
         </div> 
         <address class="address-container"> 
          <div class="street-address" style="font-weight: bold;"> 124 Park Crescent </div> 
          <div class="city-name">Barry CF62 6HE</div> 
          <div class="country-name">United Kingdom</div> 
         </address> 
         </div> 
         <div class="col-md-12"> 
          <div class="address-container"> 
           <div> 
            <img alt="" src="img/glyphicons_442_earphone.png" /> 
           </div> 
           <a href="">+44 (0) 1446 421300</a> 
          </div> 
         </div> 
        </div> 
       </div>     
      </div> 
     </div> 
    </div> 

Answer 1

간단한 솔루션을 추가하는 것입니다 custom control :

은 또한 당신이 당신의 코드에서 많은 한/DIV 요소를 가지고있다. 이 예제를 클릭하면지도가 Chicago로 이동합니다.

<script> 

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

/** 
* The HomeControl adds a control to the map that simply 
* returns the user to Chicago. This constructor takes 
* the control DIV as an argument. 
*/ 

function HomeControl(controlDiv, map) { 

    // Set CSS styles for the DIV containing the control 
    // Setting padding to 5 px will offset the control 
    // from the edge of the map. 
    controlDiv.style.padding = '5px'; 

    // Set CSS for the control border. 
    var controlUI = document.createElement('div'); 
    controlUI.style.backgroundColor = 'white'; 
    controlUI.style.borderStyle = 'solid'; 
    controlUI.style.borderWidth = '2px'; 
    controlUI.style.cursor = 'pointer'; 
    controlUI.style.textAlign = 'center'; 
    controlUI.title = 'Click to set the map to Home'; 
    controlDiv.appendChild(controlUI); 

    // Set CSS for the control interior. 
    var controlText = document.createElement('div'); 
    controlText.style.fontFamily = 'Arial,sans-serif'; 
    controlText.style.fontSize = '12px'; 
    controlText.style.paddingLeft = '4px'; 
    controlText.style.paddingRight = '4px'; 
    controlText.innerHTML = '<div><h3>Where we are</h3></div>'; 
    controlUI.appendChild(controlText); 

    // Setup the click event listeners: simply set the map to Chicago. 
    google.maps.event.addDomListener(controlUI, 'click', function() { 
    map.setCenter(chicago) 
    }); 
} 

     function initialize() { 
      var myLatlng = new google.maps.LatLng(51.400140, -3.288225); 
      var mapCanvas = document.getElementById('map-canvas'); 
      var mapOptions = { 
       scrollwheel: false, 
       navigationControl: false, 
       mapTypeControl: false, 
       scaleControl: false, 
       disableDefaultUI: true, 
       center: myLatlng, 
       zoom: 17, 
       mapTypeId: google.maps.MapTypeId.ROADMAP, 
       noClear: true 
      } 

      var map = new google.maps.Map(mapCanvas, mapOptions) 

      // 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); 

      homeControlDiv.index = 1; 
      map.controls[google.maps.ControlPosition.TOP_RIGHT].push(homeControlDiv); 

      var marker = new google.maps.Marker({ 
       position: myLatlng, 
       map: map, 
      }); 
     } 
     google.maps.event.addDomListener(window, 'load', initialize); 

    </script>