javascript - Drag and drop marker in google maps

i want to create marker on google map through dragging marker image from outside the map canvas and drop it inside the canvas, i've registered dom event listener of google maps but inside the listener i have no access to latLng object, how do i find the latLng of dropping point?

<!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/ajax/libs/jquery/1.9.1/jquery.min.js" ></script>

    <script type="text/javascript" src=""></script>
    <script type="text/javascript" src=";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="mand">
              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="mand">
               Markers: <br />
               <img src="img/marker.png" id="draggable" draggable="true" ondragstart="drag(event)" />
           </div>
           <div class="mand" id="debug">
           </div>
        </div>
    </div>
</body>
<html>

and here is my javascript code

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

<!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./ajax/libs/jquery/1.9.1/jquery.min.js" ></script>

    <script type="text/javascript" src="https://www.google./jsapi"></script>
    <script type="text/javascript" src="http://maps.googleapis./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="mand">
              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="mand">
               Markers: <br />
               <img src="img/marker.png" id="draggable" draggable="true" ondragstart="drag(event)" />
           </div>
           <div class="mand" id="debug">
           </div>
        </div>
    </div>
</body>
<html>

and here is my javascript code

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

Share Improve this question edited Sep 18, 2017 at 18:47 Jeff Puckett 41.2k19 gold badges124 silver badges174 bronze badges asked May 23, 2013 at 17:21 user2009750 3,1976 gold badges37 silver badges58 bronze badges

Add a ment |

1 Answer 1

Sorted by: Reset to default 6

I've solve this problem by creating an empty OverlayView to have access to the MapCanvasProjection.fromContainerPixelToLatLng(Point) function.

Here is a piece of code you can just add in yours :

/**
 * initialize a empty overlay used to pute latlng from pixel
 */
function initOverlay() {
    function DropOverlay(map) {
        this.setMap(map);
    }
    DropOverlay.prototype = new google.maps.OverlayView();
    DropOverlay.prototype.onAdd = function()    { /* Nothing to add */    };
    DropOverlay.prototype.onRemove = function() { /* Nothing to remove */ };
    DropOverlay.prototype.draw = function()     { /* Nothing to draw */   };
    DropOverlay.prototype.fromPixelToLatLng = function(x, y) {
        var offset = divOffset(map.getDiv());
        return this.getProjection().fromContainerPixelToLatLng(new google.maps.Point(x - offset.x, y - offset.y));
    } 
    return new DropOverlay(map);
}


/** 
 * pute absolute position on page of a DOM element
 */
function divOffset(div) {
    var offset = {x:0, y:0};
    do {
        offset.x += div.offsetLeft;
        offset.y += div.offsetTop;
    } while(div = div.offsetParent);

    return offset;
}

Then you can call var overlay = initOverlay() in your in initialize() function. And use overlay.fromPixelToLatLng() to get le LatLng in your drop() function.

I hope this will help you. Or someone else landing on this page.

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - Drag and drop marker in google maps - Stack Overflow

1 Answer 1

与本文相关的文章

评论列表(0)