Marker Drag Click Event Google Maps - google-maps

Question

I have a google maps and a marker that locates my position , it's a draggable marker with an infowindow.
Here is my code
var marker;
var infowindowPhoto;
var latPosition;
var longPosition;
var newLocationLat;
var newLocationLong;
function initializeMarker()
{
if(navigator.geolocation)
{
navigator.geolocation.getCurrentPosition(function(position)
{
var pos = new google.maps.LatLng(position.coords.latitude,position.coords.longitude);
latPosition = position.coords.latitude;
longPosition = position.coords.longitude;
//alert("Latitude:"+latPosition);
//alert("Longitude:"+longPosition);
marker = new google.maps.Marker
({
position: pos,
draggable:true,
animation: google.maps.Animation.DROP,
map: map
});
markersArray.push(marker);
google.maps.event.addListener(marker, 'click', function (event)
{
infowindowPhoto.open(map,marker);
document.getElementById("latbox").value = this.getPosition().lat();
document.getElementById("lngbox").value = this.getPosition().lng();
latPosition = this.getPosition().lat();
longPosition = this.getPosition().lng();
});
google.maps.event.addListener(marker,'dragend', function (event)
{
infowindowPhoto.open(map,marker);
document.getElementById("latbox").value = this.getPosition().lat();
document.getElementById("lngbox").value = this.getPosition().lng();
newLocationLat = this.getPosition().lat();
newLocationLong = this.getPosition().lng();
});
infowindowPhoto.open(map,marker);
map.setCenter(pos);
},
function()
{
handleNoGeolocation(true);
});
}
else
{
handleNoGeolocation(false);
}
contentString ='<h1 id="firstHeading" class="firstHeading">Uluru</h1>';
infowindowPhoto = new google.maps.InfoWindow
({
content: contentString
});
}
function Alert()
{
alert("Latitude:"+latPosition);
alert("Longitude:"+longPosition);
alert("newLatitude:"+newLocationLat);
alert("newLongitude:"+newLocationLong);
}
The marker first is positioned in my location , if i don't drag the marker it show me in the function alert my position. So in the two fist alert in function aloert it shows me my position and the two other alert are undefined.
Now my problem is that i want when i dont move the marker that this function will work
google.maps.event.addListener(marker, 'click', function (event)
{
infowindowPhoto.open(map,marker);
document.getElementById("latbox").value = this.getPosition().lat();
document.getElementById("lngbox").value = this.getPosition().lng();
latPosition = this.getPosition().lat();
longPosition = this.getPosition().lng();
});
I want when i drag the marker that this function work
google.maps.event.addListener(marker,'dragend', function (event)
{
infowindowPhoto.open(map,marker);
document.getElementById("latbox").value = this.getPosition().lat();
document.getElementById("lngbox").value = this.getPosition().lng();
newLocationLat = this.getPosition().lat();
newLocationLong = this.getPosition().lng();
});
So i can only show only my new position. Thanks for your help
/////////////////////////////////Update///////////////////////////////////
I have this code that show me the new latitude and longitude in an html input:
<div id="latlong">
<p>Latitude: <input size="20" type="text" id="latbox" name="lat" ></p>
<p>Longitude: <input size="20" type="text" id="lngbox" name="lng" ></p>

Answer 1

A few tips:
Avoid unnecessary code when you are having issues with a script. Break it down to the essential.
Always post the necessary code with your question (you have now updated it). Good point.
Avoid duplicating code at different places. Create functions for that.
I now understand you want to show the user location in 2 inputs. I thought you wanted to show it within the infowindow, which is what I did in the below code (but the main idea is the same).
A few notes:
Code within an event listener (click, dragend, etc.) is only executed when the event is fired.
You can use the setContent method of the infowindow when you want to update its content.
Here is the code:
var map;
var marker;
var infowindowPhoto = new google.maps.InfoWindow();
var latPosition;
var longPosition;
function initialize() {
var mapOptions = {
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP,
center: new google.maps.LatLng(10,10)
};
map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
initializeMarker();
}
function initializeMarker() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function (position) {
var pos = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
latPosition = position.coords.latitude;
longPosition = position.coords.longitude;
marker = new google.maps.Marker({
position: pos,
draggable: true,
animation: google.maps.Animation.DROP,
map: map
});
map.setCenter(pos);
updatePosition();
google.maps.event.addListener(marker, 'click', function (event) {
updatePosition();
});
google.maps.event.addListener(marker, 'dragend', function (event) {
updatePosition();
});
});
}
}
function updatePosition() {
latPosition = marker.getPosition().lat();
longPosition = marker.getPosition().lng();
contentString = '<div id="iwContent">Lat: <span id="latbox">' + latPosition + '</span><br />Lng: <span id="lngbox">' + longPosition + '</span></div>';
infowindowPhoto.setContent(contentString);
infowindowPhoto.open(map, marker);
}
initialize();
Here is the demo:
JSFiddle demo
Hope this helps! If you have questions, feel free to ask!