2

マップ キャンバスの外からマーカー イメージをドラッグし、キャンバス内にドロップして Google マップ上にマーカーを作成したい、Google マップの dom イベント リスナーを登録しましたが、リスナー内では latLng オブジェクトにアクセスできません。滴点の緯度は？

<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
    <title>Active Users</title>
    <link type="text/css" rel="stylesheet" href="style.css" />
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" ></script>

    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?libraries=maps&sensor=false"></script>
    <script src="js/script.js"></script>
</head>
<body>
    <div id="big_wrapper">
        <div id="gmap_canvas" ondragover="allowDrop(event)"></div>
        <div id="controls">
           <div class="command">
              Coordinates: <br />
              <input type="text" id="lat" value="33.718629" /><br />

              <input type="text" id="lng" value="73.059082" /><br />
              <input type="button" value="Go" id="go" />
           </div>

           <div class="command">
               Markers: <br />
               <img src="img/marker.png" id="draggable" draggable="true" ondragstart="drag(event)" />
           </div>
           <div class="command" id="debug">
           </div>
        </div>
    </div>
</body>
<html>

ここに私のjavascriptコードがあります

var geocoder;
var map;

$(function() {

    $("#go").click(function()
    {
        map.setCenter(new google.maps.LatLng($("#lat").val(), $("#lng").val()));
    });


});

function initialize() {
    // prepare Geocoder
    geocoder = new google.maps.Geocoder();

    var myLatlng = new google.maps.LatLng(33.718629,73.059082);

    var myOptions = { // default map options
        zoom: 2,
        center: myLatlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };

    map = new google.maps.Map(document.getElementById('gmap_canvas'), myOptions);
    mapDiv = document.getElementById('gmap_canvas');

    google.maps.event.addListener(map, 'dragend', function(event)
    {
        document.getElementById('lat').value = map.getCenter().lat();
        document.getElementById('lng').value = map.getCenter().lng();
    });

    google.maps.event.addListener(map, 'click', function(e)
    {
        alert(e.latLng);
    });

    google.maps.event.addDomListener(mapDiv, 'drop', function(event)
    {
        alert(event);
        google.maps.event.trigger(map, 'click');
    });
}

function allowDrop(ev)
{
    ev.preventDefault();
}

function drag(ev)
{
    ev.dataTransfer.setData("Text",ev.target.id);
}

function drop(ev)
{
    ev.preventDefault();
    var data=ev.dataTransfer.getData("Text");
    alert(ev.latLng);
}

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

1 に答える 1