I want the marker/pin to scroll around and be in the center of the map while the user is dragging around the map. I have a simple jsfiddle (/) where the pin will drop to the center of the map when the user stops dragging, but I want the pin to move with the dragging.

Google Maps JS

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>';
}

HTML

<div id='mapBox'></div>

Any ideas or thoughts on how to do this?

I want the marker/pin to scroll around and be in the center of the map while the user is dragging around the map. I have a simple jsfiddle (http://jsfiddle/upsidown/5xd1Lbpc/6/) where the pin will drop to the center of the map when the user stops dragging, but I want the pin to move with the dragging.

Google Maps JS

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>';
}

HTML

<div id='mapBox'></div>

Any ideas or thoughts on how to do this?

• javascript
• jquery
• google-maps

• Do you mean you want the pin to remain static in the centre of the map, even when the user is dragging the map around? – ann0nC0d3r Commented Apr 27, 2016 at 16:40
• Yes. Sorry if that wasn't clear. I want it just to remain static in the middle while the user is dragging the map around. – luke Commented Apr 27, 2016 at 16:41
• possible duplicate of Marker on the center of map after drag – geocodezip Commented Apr 27, 2016 at 18:27
• possible duplicate of Fixed marker in center and drag map to get lat,long – geocodezip Commented Apr 27, 2016 at 18:29

2 Answers 2

JSFiddle

To reduce flicker, you can put an absolutely positioned marker over top of the map directly in the center. Then you can use getCenter() to retrieve the actual position on the map.

#wrapper {
    position: relative;
    display: inline-block;
}
#mapBox {
    width: 400px;
    height: 300px;
}
#marker {
    position: absolute;
    top: calc(50% - 40px);
    left: calc(50% - 40px);
    height: 80px;
    width: 80px;
    border: 3px solid blue;
    border-radius: 50%;
    background-color: rgba(30,144,255,0.5);
    box-sizing: border-box;
    pointer-events: none;
}

HTML:

<div id="wrapper">
    <div id="mapBox"></div>
    <div id="marker"></div>
</div>
<div id="dragStatus"></div>

JS:

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

google.maps.event.addListener(map, 'drag', function() {
  loc(map);
});

google.maps.event.addListener(myMarker, 'dragend', function () {
  loc(map);
});

function loc(map) {
    var x = map.getCenter();
    document.getElementById('dragStatus').innerHTML = x.lat() + ', ' + x.lng();
}

Other Useful Answers:

Is there a way to Fix a Google Maps Marker to the Center of its Map always?

add this

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

see http://jsfiddle/gbqqzonr/

//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, 'drag', function () {
    myMarker.setPosition(this.getCenter()); // set marker position to map center
    updatePosition(this.getCenter().lat(), this.getCenter().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>';
}