Problems with geolocation - html

Question

I want to make an application that shows your current position on a map with a marker. The code I've done seems to work but it doesn't display the marker. Can someone help me, please?
Here's my app.js:
var app = angular.module('starter', ['ionic', 'ngCordova']);
app.run(function($ionicPlatform) {
$ionicPlatform.ready(function() {
// Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
// for form inputs)
if (window.cordova && window.cordova.plugins.Keyboard) {
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
}
if (window.StatusBar) {
StatusBar.styleDefault();
}
});
});
app.controller('MapController', function($scope, $cordovaGeolocation, $ionicLoading, $ionicPlatform) {
$ionicPlatform.ready(function() {
$ionicLoading.show({
template: '<ion-spinner icon="bubbles"></ion-spinner><br/>Acquiring location!'
});
var posOptions = {
enableHighAccuracy: true,
timeout: 20000,
maximumAge: 0
};
$cordovaGeolocation.getCurrentPosition(posOptions).then(function(position) {
var lat = position.coords.latitude;
var long = position.coords.longitude;
var myLatlng = new google.maps.LatLng(lat, long);
var mapOptions = {
center: myLatlng,
zoom: 16,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map"), mapOptions);
$scope.map = map;
$ionicLoading.hide();
}, function(err) {
$ionicLoading.hide();
console.log(err);
});
google.maps.event.addListener($scope.map, 'idle', function() {
var marker = new google.maps.Marker({
map: $scope.map,
position: new google.map.LatLng(myLatlng)
icon:'http://i.imgur.com/fDUI8bZ.png'
});
var infoWindow = new google.maps.InfoWindow({
content: "Here I am!"
});
google.maps.event.addListener(marker, 'click', function() {
infoWindow.open(map, marker);
});
infowindow.open(map, marker);
});
})
});

Answer 1

You are using
var long = position.coords.longitude;
whereas long is a keyword in javascript. Check the link below.
https://www.w3schools.com/js/js_reserved.asp
Unless you are using ECMAScript 5/6 standard

Answer 2

Try to add Latitude and Longitude in following way to new google.map.LatLng(...)
var marker = new google.maps.Marker({
map: $scope.map,
position: new google.map.LatLng(lat, long)
icon:'http://i.imgur.com/fDUI8bZ.png'
});
Hope this will help to you

Answer 3

Spent a very hair-tearing hour or so trying to get the good old W3C geolocation example to work in my particular application. Didn't see this:
https://developers.google.com/web/updates/2016/04/geolocation-on-secure-contexts-only
If you are NOT using https you may (will?) get a silent, non-functioning outcome, both in Chrome and Firefox! As soon as I switched to https, it was fine.