In my Angular application, I have integrated a Google Map with a marker. I am looking to make the marker move along with the map as it is being moved. Currently, the marker stays in its default position when the map is moved. How can I achieve the effect of moving the marker and retrieve its current position?
Here is the code snippet:
<div class="col-lg-5 col-md-5 col-sm-12 col-xs-10 col-lg-offset-2 col-md-offset-1" style="padding: 0">
<div ng-if="!mapLoaded" map-lazy-load="https://maps.google.com/maps/api/js" map-lazy-load-params="{{map.url}}" style="width: 100%;height:100%">
<div ng-map center="{{map.center.latitude}},{{map.center.longitude}}" zoom="{{map.zoom}}" styles="{{ map.styles}}">
</div>
</div>
<div ng-if="mapLoaded" class="map-dialog-container">
<div ng-map center="{{map.center.latitude}},{{map.center.longitude}}" zoom="{{map.zoom}}" styles="{{ map.styles}}">
</div>
</div>
</div>
This is the controller logic:
$scope.map = {
zoom: 8,
center: {
latitude: 52.348763181988105,
longitude: 20.928955078125
},
url: 'https://maps.googleapis.com/maps/api/js?key=XXX&callback=initMap',
NgMap.getMap().then(function (map)
{
var location = [52.348763181988105,20.928955078125];
var infowindow = new google.maps.InfoWindow();
var markerIcon = {
url: 'resource/img/mapin.png',
size: new google.maps.Size(32, 41),
anchor: new google.maps.Point(0, 41),
scaledSize: new google.maps.Size(32, 41),
labelOrigin: new google.maps.Point(16, 55)
};
var latLng = new google.maps.LatLng(location[0],location[1]);
var newMarker = new google.maps.Marker({
position: latLng,
map : map,
icon : markerIcon
});
console.log(newMarker.map);
});