Edit markers's lat-lng in Google Maps V3

Question

I'm using Google Map DrawingManager to add Markers to map. After a marker is added, it also adds a column into the table below the map. This column has some information about the marker (title, description, lat, lng) and 2 links (Edit and Delete). You can see that on this photo.

User can click delete to remove a marker and edit to edit marker's information. I have done delete function but haven't done edit function. I have tried a few solutions but they weren't working. Does anyone have any solution to do this? Thanks in advance.

My source code:

 var $body = $('body'), markers = {}, html = '<tr>' + '<td><input type="text"></td>' + '<td><input type="text"></td>' + '<td><input type="text" value="" class="marker-lat"><input type="text" value="" class="marker-lng"></td>' + '<td><a href="#" class="edit-marker">Edit</a><a href="#" class="delete-marker">Delete</a></td>' + '</tr>'; initMap(); function initMap() { var myOptions = { center: new google.maps.LatLng(-16.920334, 145.770859), zoom: 12, }; var drawingManager = new google.maps.drawing.DrawingManager({ drawingControl: false, }); var map = new google.maps.Map($('.map')[0], myOptions); google.maps.event.addDomListener(drawingManager, 'markercomplete', function(marker) { var pos = marker.getPosition(), obj = { lat: pos.lat(), lng: pos.lng() }; $('.marker-table').find('tbody').append(html); $('.marker-table').find('.marker-lat:last').val(obj.lat); $('.marker-table').find('.marker-lng:last').val(obj.lng); markers[obj.lat + ':' + obj.lng] = marker; }); google.maps.event.addDomListener(drawingManager, 'polylinecomplete', function(line) { var paths = ''; path = line.getPath(); for (var i = 0; i < path.length; i++) { paths += path.getAt(i) + ";"; } $('.paths').val(paths); }); drawingManager.setMap(map); $body.on('click', '.add-marker', function() { drawingManager.setDrawingMode(google.maps.drawing.OverlayType.MARKER); }); $body.on('click', '.draw-line', function() { drawingManager.setDrawingMode(google.maps.drawing.OverlayType.POLYLINE); }); $body.on('click', '.delete-marker', function(e) { var $this = $(this), $tr = $this.closest('tr'), lng = $tr.find('.marker-lng').val(), lat = $tr.find('.marker-lat').val(), marker; e.preventDefault(); markers[lat + ':' + lng].setMap(null); $tr.remove(); }); $body.on('click', '.edit-marker', function(e) { var $this = $(this); e.preventDefault(); }); } 

 <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.4.min.js"></script> <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false&libraries=drawing"></script><input type="button" value="Add Marker" class="add-marker"> <input type="button" value="Draw a line" class="draw-line"> <div class="map" style="width: 600px; height: 200px;"></div> <table class="marker-table"> <thead> <tr> <th>Title</th> <th>Description</th> <th></th> <th>Action</th> </tr> </thead> <tbody></tbody> </table> <input type="text" class="paths" name="paths"> 

Here is my fiddle

Answer 1

I have found out a solution to do this.

Instead of using markers[obj.lat + ':' + obj.lng] = marker; to store markers, I use markers[index] = marker; (index is integer number).

Here is my change:

var index = 0;

google.maps.event.addDomListener( drawingManager, 'markercomplete', function( marker ) 
    {
        var pos = marker.getPosition();

        $( '.marker-table' ).find( 'tbody' ).append( html );
        $( '.marker-table' ).find( '.marker-lat:last' ).val( pos.lat() );
        $( '.marker-table' ).find( '.marker-lng:last' ).val( pos.lng() );
        $( '.marker-table' ).find( '.marker-index:last' ).val( index );         

        markers[index] = marker;
        index++;
    } );

    $body.on( 'click', '.edit-marker', function( e )
    {
        e.preventDefault(); 

        var $this = $( this ),
            $tr = $this.closest( 'tr' ),
            latlng = new google.maps.LatLng($tr.find( '.marker-lat' ).val(), $tr.find( '.marker-lng' ).val());

        markers[$tr.find( '.marker-index' ).val()].setPosition(latlng);
    } );