jquery - Google マップ V3 で新しいメニュー ボックスを開く

Question

Google マップを右クリックすると、マウスがマップ上のどこにあるかを正確にメニュー ボックスに表示したいと考えています。Google マップ イベントを使用できることはわかっていますが、その方法がわかりません。私は Javascript よりも jQuery に精通しています。あなたの助けに感謝。

Answer 1

rightclickこの例は役に立ち、イベントが定義されているコードの最後を見てみましょう。

html:

<script src="http://code.jquery.com/jquery-1.7.2.min.js" type="text/javascript"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script src="https://dl.dropbox.com/u/15208254/stackoverflow/googlelocation/script.js" type="text/javascript"></script>
<div id="mapDiv" style="width:700px; height: 500px;"></div>

js:

$.geolocation.find(function(location) {
        var lat = location.latitude;
        var lng = location.longitude;

        var map = new google.maps.Map($('#mapDiv').get(0), {
            center: new google.maps.LatLng(lat, lng),
            zoom: 13,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        });

        var pinColor = "FE7569";
        var pinImage = new google.maps.MarkerImage("http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=%E2%80%A2|" + pinColor,
        new google.maps.Size(21, 34),
        new google.maps.Point(0,0),
        new google.maps.Point(10, 34));
        var pinShadow = new google.maps.MarkerImage("http://chart.apis.google.com/chart?chst=d_map_pin_shadow",
        new google.maps.Size(40, 37),
        new google.maps.Point(0, 0),
        new google.maps.Point(12, 35))

        var marker = new google.maps.Marker({
            position: new google.maps.LatLng(lat, lng),
            map: map,
            icon: pinImage,
            shadow: pinShadow 
        });

    /* click event for the map */
    google.maps.event.addListener(map, 'rightclick', function() {
        alert('right click detected!');
    });
});

ライブデモ:

http://jsfiddle.net/oscarj24/sPsxh/1/