My CSS displays a marker on the map and allows users to drag a map like Uber. Now, I need help getting the current location of the marker. I have included style.css, DeliverCtrl.js, and HTML code. Can anyone assist me with this?
style.css
map{
display: block;
width: 100%;
height: 50%;
overflow:visible;
}
map:after {
width: 22px;
height: 40px;
display: block;
content: ' ';
position: absolute;
top: 50%; left: 50%;
margin: -40px 0 0 -11px;
background: url('https://maps.gstatic.com/mapfiles/api-3/images/spotlight-poi_hdpi.png');
background-size: 22px 40px; /* Since I used the HiDPI marker version this compensates for the 2x size */
pointer-events: none; /* This disables clicks on the marker. Not fully supported by all major browsers, though */
}
DeliverCtrl.js
angular.module('Home').controller('DeliverCtrl',["$scope","$state", function($scope, $state, $ionicModal, MessageService, $stateParams) {
function initialize() {
var position = new google.maps.LatLng($state.params.lat,$state.params.lng);
$scope.mapOptions = {
mapTypeControl: true,
zoom: 15,
mapTypeId: google.maps.MapTypeId.ROADMAP,
center: position
};
};
$scope.createMarker = function(latLng)
{
var map = $scope.map;
var marker = new google.maps.Marker({
position: latLng,
map: map,
title: 'Current Location'
});
};
$scope.mapCreated = function(map) {
$scope.map = map;
};
initialize();
google.maps.event.addDomListener(window, 'load', initialize);
}]);
I have generated the map using the following HTML
<map on-create="mapCreated(map)" mapoptions="mapOptions"></map>