Gmap info box popup

Question

안녕하세요, 저는 옐프 gmap 서비스와 비슷하게 보이는 gmap을 통합하는 웹 앱을 가지고 있습니다.

는 인포 박스 아래는 통합에 대한 내 현재 코드입니다이

처럼 보이도록 가정 : 문제는 내가 마커 마우스를 움직일 때 인포 박스는 다음과 같이 상자 안에 갇혀 있다는 것입니다 gmap

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> 
<script type="text/javascript" src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/src/infobox_packed.js"></script> 

<script type="text/javascript"> 

    var gmap, gpoints = []; 

    $(document).ready(function() { 
     initialize(); 
    }); 

function initialize() { 

     gmap = new google.maps.Map(document.getElementById('themap'), { 
      zoom:    8, 
      streetViewControl: false, 
      scaleControl:  false, 
      center:    new google.maps.LatLng(3.3000000,101.9629796), 
      mapTypeId:   google.maps.MapTypeId.ROADMAP 
     }); 
<?php 
$content = '<p>Test</p>'; 
?> 
gpoints.push(new point(gmap, '<?php echo $lat; ?>', '<?php echo $long; ?>', '<?php echo $content; ?>')); 
} 

function point(_map, lat, lng, content) { 
     this.marker = new google.maps.Marker({ 
      position:   new google.maps.LatLng(lat,lng), 
      map:    _map, 
      zIndex: 11 
     }); 
this.content = content; 



     var gpoint = this; 


     google.maps.event.addListener(gpoint.marker, 'mouseover', function() { 
      popup(gpoint); 
     }); 

google.maps.event.addListener(_map, 'zoom_changed', function() { 
      center=gpoint.marker.getPosition(); 
      lat=center.lat(); 
      lng=center.lng(); 
      // alert(lat+"===="+lng); 
     });  
} 

function popup(_point) { 
     _point.popup = new InfoBox({ 
      content: _point.content, 
      position: _point.marker.getPosition(), 
      // shadowStyle: 1, 
      padding: 20, 
      //backgroundColor: '#ddd', 
      borderRadius: 10, 
      arrowSize: 10, 
      borderWidth: 1, 
      // borderColor: '#dddddd', 
      disableAutoPan: true, 
      arrowPosition: 30, 
      // backgroundClassName: 'phoney', 
      arrowStyle: 2 


     }); 

_point.popup.open(_point.marker.map, _point.marker); 

     google.maps.event.addListener(_point.popup, 'domready', function() {      
      google.maps.event.addDomListener(_point.marker, 'mouseout', function() { 
       _point.popup.close(); 
      }); 
     }); 

} 

</script> 

Answer 1

infoBox의 pixelOffset 옵션을 사용할 수 있습니다. 마커와 관련된 위치를 제어합니다.

기본값은 0,0입니다. 즉, infoBox의 왼쪽 상단 모서리가 마커의 위치에 고정되어 있습니다.

그것에게 최고 + 센터를 배치하려면, 당신은 명시 적으로 인포 박스의 내용에 할당하고, 다음과 같이 pixelOffset을 적용해야합니다

pixelOffset:new google.maps.Size(-halfOfWidthOfTheBox,0) 

을 당신이 계산할 수있는 인포 박스의 크기를 모르는 경우 그것. 는 _point.popup의 domready -callback이 추가 :

this.setOptions({pixelOffset:new google.maps 
          .Size(-parseInt(this.div_.offsetWidth/2,10),0)});