ドラッグ中にマーカーの中央にマーカーを置く

Question

ユーザーが地図をドラッグしている間、マーカー/ピンをスクロールして地図の中央にしたい。私は単純なjsfiddle（http://jsfiddle.net/upsidown/5xd1Lbpc/6/）ピンがマップの中心にドロップするときにユーザーがドラッグを停止するが、私はピンをドラッグして移動したい。

Googleマップ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> 

これを行う方法上の任意のアイデアや考え？

Answer 1

この

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

がちらつきを軽減するためにhttp://jsfiddle.net/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>'; 
} 

Answer 2

JSFiddle

を参照してください追加し、あなたが中心に直接マップの上に絶対位置マーカーを置くことができます。次に、getCenter()を使用して地図上の実際の位置を取得できます。

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

その他の便利な回答：あなたはピンが中央に静的なままにしたい

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