正確な右クリックイベントの位置を表示する方法

Question

私は次のコードがありますが、私のポップは私の右クリックの正確な位置を示していません。私の右クリックの正確な場所に

function openPopup() { 
 
      //document.getElementById('test').style.display = 'block'; 
 
      $('#test').fadeIn(1000); 
 
     } 
 

 
     function closePopup() { 
 
      //document.getElementById('test').style.display = 'none'; 
 
      $('#test').fadeOut(500); 
 
     } 
 
google.maps.event.addListener(_map, "rightclick", function (event) { 
 
       openPopup(); 
 
      }); 
 

 

 
 
     .popup { 
 
    position:fixed; 
 
    top:0px; 
 
    left:0px; 
 
\t bottom:0px; 
 
    
 
    padding:10px; 
 
    background-color:rgb(240,240,240); 
 
    border:2px solid grey; 
 
    z-index:100000000000000000; 
 
} 
 
    
 
.cancel { 
 
    display:relative; 
 
    cursor:pointer; 
 
    margin:0; 
 
    float:right; 
 
    height:10px; 
 
    width:14px; 
 
    padding:0 0 5px 0; 
 

 
    z-index:100000000000000000; 
 
} 
 

 
.cancel:hover { 
 
    background:rgb(255,50,50); 
 
}

<div id="test" class="popup" style="display:none;"> 
 
    This is a test message 
 
    <div class="cancel" onclick="closePopup();"></div> 
 
</div>

Answer 1

をショーをポップするためにどのようにあなたはそのための新しいポップアップボックスを作成する必要はありません、あなたは、Googleのgoogle.maps.InfoWindowでこれを行うことができますクラス

使用この

var map; 
var markers = []; 
var latalng = {lat:26.912082488274702, lng:75.81622123718262} 
var infowindow; 
function initMap() { 
    map = new google.maps.Map(document.getElementById('map'), { 
     center: latalng, 
     zoom: 17 
    }); 


    //infoWindow Object 
    infowindow = new google.maps.InfoWindow(); 

    //add event to right click  
    map.addListener('rightclick', function(event) { 
    //Set content to show on popup  
     infowindow.setContent("Your Messaage To show"); 

    //get the position form google.maps.MouseEvent class passed in event objevc 
     var latLang = { lat: event.latLng.lat(),lng:event.latLng.lng()}; 

    //set the position of popup(infowindow) 
     infowindow.setPosition(latLang); 

    //open infowindow 
    infowindow.open(map, this); 
}); 

}