Marker on the center of map after drag

I implement google map on my website. User can drag the marker and get coordinates. It's working fine but requirement is that when user drag marker, after drag marker should come on the center of the map window or if user drag map, then for this case marker also come to the center of map window.

I have the following code which is working for only drag marker on the map, but I don't know where to add the function or code that move the marker on the center of map window after drag.

That code is written below:

google.maps.event.addListener(myMarker, 'dragend', function (evt) {
    document.getElementById('dragStatus').innerHTML = '<p> Current Lat: ' + evt.latLng.lat().toFixed(4) + ' Current Lng: ' + evt.latLng.lng().toFixed(4) + '</p>';
    var point = marker.getPosition();
       map.panTo(point);
});

google.maps.event.addListener(myMarker, 'dragstart', function (evt) {
    //-------------
    //------------
});

http://jsfiddle.net/ANJYR/6xq6pujk/

Answers:

Answer

This is (I think) an easier solution... Or I didn't quite get what you want to achieve.

//Dragable Marker In Google Map....

var center = new google.maps.LatLng(-33.013803, -71.551498);

var map = new google.maps.Map(document.getElementById('mapBox'), {
    zoom: 18,
    center: center,
    mapTypeId: google.maps.MapTypeId.HYBRID
});

var myMarker = new google.maps.Marker({
    position: center,
    draggable: true,
    map: map
});

google.maps.event.addListener(myMarker, 'dragend', function () {
    map.setCenter(this.getPosition()); // Set map center to marker position
    updatePosition(this.getPosition().lat(), this.getPosition().lng()); // update position display
});

google.maps.event.addListener(map, 'dragend', function () {
    myMarker.setPosition(this.getCenter()); // set marker position to map center
    updatePosition(this.getCenter().lat(), this.getCenter().lng()); // update position display
});

function updatePosition(lat, lng) {
    document.getElementById('dragStatus').innerHTML = '<p> Current Lat: ' + lat.toFixed(4) + ' Current Lng: ' + lng.toFixed(4) + '</p>';
}

JSFiddle demo

Answer

Just add this piece of code:

var point = myMarker.getPosition(); //instead of marker.getPosition();
map.setCenter(point); //set the center of the map based on myMarker

Update: Marker centered on map after dragging

About the idle event: This event is fired when the map becomes idle after panning or zooming.

//Add listener on idle event
google.maps.event.addListener(map,'idle',function(){
  if(!this.get('dragging') && this.get('oldCenter') && this.get('oldCenter')!==this.getCenter()) {
    //Here i set the marker position with map.getCenter data
    myMarker.setPosition(this.getCenter());
  }
  if(!this.get('dragging')){
   this.set('oldCenter',this.getCenter())
  }
});

//Add listener on dragstart, set map dragging to true
google.maps.event.addListener(map,'dragstart',function(){
  this.set('dragging',true);          
});

//Add listener on dragend, set map dragging to false
//And trigger the idle listener
google.maps.event.addListener(map,'dragend',function(){
  this.set('dragging',false);
  google.maps.event.trigger(this,'idle',{});
});

Working fiddle: http://jsfiddle.net/robertrozas/5xd1Lbpc/

Answer

This is working for me: https://jsfiddle.net/6xq6pujk/5/

//Dragable Marker In Google Map....


var map = new google.maps.Map(document.getElementById('mapBox'), {
    zoom: 4,
    center: new google.maps.LatLng(28.6139, 77.2090),
    mapTypeId: google.maps.MapTypeId.ROADMAP
});

var myMarker = new google.maps.Marker({
    position: new google.maps.LatLng(28.6139, 77.2090),
    draggable: true
});

google.maps.event.addListener(myMarker, 'dragend', function (evt) {
    document.getElementById('dragStatus').innerHTML = '<p> Current Lat: ' + evt.latLng.lat().toFixed(4) + ' Current Lng: ' +  + '</p>';
     var x = evt.latLng.lat();
    var y = evt.latLng.lng();

    var newLatLng = new google.maps.LatLng(x, y);
    myMarker.setPosition(newLatLng);


    // using global variable:
    map.panTo(newLatLng);


});

google.maps.event.addListener(myMarker, 'dragend', function (evt) {
    //-------------
    //------------


});


map.setCenter(myMarker.position);
myMarker.setMap(map);
Answer
 for(f=0; f<Data.length; f++)
                {           
                            /*var p = Data[f];
                            var latlng = new google.maps.LatLng(p[0], p[1]);
                            bounds.extend(latlng);*/
                             var marker = new google.maps.Marker({
                                position:  new google.maps.LatLng(Data[f][0], Data[f][1]),
                                map: map,
                                draggable:<?php  echo $dragger; ?>,
                                icon: iconBase
                              });

                       google.maps.event.addListener(marker, 'dragend', (function(marker, f) {
                        return  function()
                        {
                               if(confirm("Are you sure you want to change lat/lng?")){   
                            var park_id = ID[f];
                            var lat = this.getPosition().lat();
                            var lng = this.getPosition().lng();
                                    $.ajax({
                              type: "POST",
                              url: "<?php echo base_url() ?>Admin/updateParkid", 
                              data: {park_id: park_id, latitude: lat, longitude: lng},
                              dataType: '',
                              success: function(result){
                                alert(result);

                                //marker.setIcon(iconBase);
                                        }
                              });            
                            } }
                         })(marker, f)); 
Answer

Use $event as value to dragEnd event.

    <agm-marker
            (markerClick)="clickedMarker()"
            [latitude]="lat"
            [longitude]="lng"
            [markerDraggable]=true
            (dragEnd)="markerDragEnd($event)">
    </agm-marker>

Tags

Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.