CODEWITHSUNDEEP
google-mapsgoogle-maps-api-3
user2117983
user2117983

Reputation: 359

How to move marker on the map dynamically on click of the button

I am adding Marker dynamically and adding click event to every marker added on the map. This is the way, I am adding the marker on the map.

var pin = new google.maps.LatLng(Y, X);
var marker = new google.maps.Marker({ position: pin, map: map1 });
google.maps.event.addListener(marker, 'click', pinClicked);
marker.setMap(map1);

In the click event, based on certain conditions I am displaying a popup with certain details and buttons. One button is to close the popup and the other button is to Move marker. What I want is when I click the Move marker button, I want the marker to be moved. I don't want to set the draggable property to true by default, as it will be allowing the marker to be dragged when added on the map. Marker should be draggable only when the button on the popup is clicked.

How can I get this working.

Any help is appreciated.

Thanks.

Upvotes: 0

Views: 2121

Answers (3)

DeepakJ
DeepakJ

Reputation: 388

Google markers have property setDraggable by which it can be set marker draggable to true or false.

marker.setDraggable(true); or

marker.setDraggable(false);

Upvotes: 0

Mr.Pohoda
Mr.Pohoda

Reputation: 494

I've created this jsFiddle which shows you how to do it.

var markers = [];

function initialize() {
    var myLatLng1 = new google.maps.LatLng(50.965049,5.484231);
    var myLatLng2 = new google.maps.LatLng(50.97,5.474231);
    var myOptions = {
      zoom: 14,
      center: myLatLng1,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    }

    var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

    for (var i = 0; i < 2; i++) {

        var marker = new google.maps.Marker({
            position: i === 0 ? myLatLng1 : myLatLng2,
            map: map,
            title: 'Galaconcert ' + i,
            id: i
        });

        markers[i] = marker;
        manageBindings(marker);
    }

    function manageBindings(marker) {

        var id = marker.id;

        google.maps.event.addListener(marker, 'click', function(ev) {

            var contentString = 
                '<div id="infowindow">' +
                'Nice infowindow ' + id + '<br />' +
                '<button class="move" data-id="' + id + '">move me</button> ' +
                '<button class="close" data-id="' + id + '">close me</button><br />' +
                '</div>'
            ;
            marker.infowindow = new google.maps.InfoWindow();
            marker.infowindow.setContent(contentString);
            marker.infowindow.open(map, marker);
        });
    }
}

$(function(){

     $('button.move').live('click', function(){
        var id = $(this).data('id');
        markers[id].setDraggable(true);
    });

    $('button.close').live('click', function(){
        var id = $(this).data('id');
        markers[id].infowindow.close();
    });

    initialize(); 
});

You should keep all your created markers in an array so you can access them. In an infowindow you store the reference to that array - in my example it's in button's data attribute. Then when anything happens in infowindow, you are able to access the particular marker and set it's draggable option to true.

The code should be refactored and should not use live but you should have the idea.

Upvotes: 1

Conway Stern
Conway Stern

Reputation: 170

There is a method for Markers that allows you to set their draggable option.

Then also change the button to say place marker so that when you've dragged the marker to where you want it to be you can click it again to place the marker and set the draggable property to false again.

    new google.maps.event.addListener(button, 'click', function(){
        if(button.status == "Move"){
            marker.setDraggable(true);
        } else {
            marker.setDraggable(false);
        }
    });

Please note this is psuedo code just highlighting the setDraggable function.

Upvotes: 0

Related Questions