Google maps lat long into hidden fields

honeymonster · 04-11-2011 6:50pm #1

Hi

I have the following code below. How do I get the lat and long values into a hidden field when the marker is dropped. It is doing my head in!!

Thanks for the help!
[HTML]
<!DOCTYPE html >
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>PHP/MySQL & Google Maps Example</title>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
//<![CDATA[
var customIcons = {
restaurant: {
icon: 'http://labs.google.com/ridefinder/images/mm_20_blue.png',
shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png'
},
bar: {
icon: 'http://labs.google.com/ridefinder/images/mm_20_red.png',
shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png'
}
};

function load() {
var map = new google.maps.Map(document.getElementById("map"), {
center: new google.maps.LatLng(53.3419, -6.22639),
zoom: 12,
mapTypeId: 'roadmap'
});
var infoWindow = new google.maps.InfoWindow;

// Change this depending on the name of your PHP file
downloadUrl("phpsqlajax_genxml2.php", function(data) {
var xml = data.responseXML;
var markers = xml.documentElement.getElementsByTagName("marker");
for (var i = 0; i < markers.length; i++) {
var name = markers.getAttribute("name");
var address = '<img src="'+markers.getAttribute("address")+'" alt=""/>';
var type = markers.getAttribute("type");
var point = new google.maps.LatLng(
parseFloat(markers.getAttribute("lat")),
parseFloat(markers.getAttribute("lng")));
var html = "<b>" + name + "</b> <br/>" + address;
var icon = customIcons[type] || {};
var marker = new google.maps.Marker({
map: map,
position: point,
icon: icon.icon,
shadow: icon.shadow,
draggable: true

});
bindInfoWindow(marker, map, infoWindow, html);
}
});
}

function bindInfoWindow(marker, map, infoWindow, html) {
google.maps.event.addListener(marker, 'click', function() {
infoWindow.setContent(html);
infoWindow.open(map, marker);
});

}

function downloadUrl(url, callback) {
var request = window.ActiveXObject ?
new ActiveXObject('Microsoft.XMLHTTP') :
new XMLHttpRequest;

request.onreadystatechange = function() {
if (request.readyState == 4) {
request.onreadystatechange = doNothing;
callback(request, request.status);
}
};

request.open('GET', url, true);
request.send(null);
}

google.maps.event.addListener(newmarker, 'click', function() {

infowindow.open(map,newmarker);
//marker1.openInfoWindowHtml('Some text', {noCloseOnClick: 'false'});
});

// Update current position info.
updateMarkerPosition(latLng);
updateMarkerLat(latLng);
updateMarkerLng(latLng);
geocodePosition(latLng);

// Add dragging event listeners.
google.maps.event.addListener(newmarker, 'dragstart', function() {
updateMarkerAddress('Dragging...');

});

google.maps.event.addListener(newmarker, 'drag', function() {
updateMarkerStatus('Dragging...');
updateMarkerPosition(newmarker.getPosition());
updateMarkerLat(newmarker.getPosition());
updateMarkerLng(newmarker.getPosition());
});

google.maps.event.addListener(newmarker, 'dragend', function() {
updateMarkerStatus('Drag ended');
geocodePosition(newmarker.getPosition());
updateMarkerLat(newmarker.getPosition());
updateMarkerLng(newmarker.getPosition());

});

function doNothing() {}

//]]>

</script>

</head>

<body onload="load()">

<div id="map" style="width: 600px; height: 400px"></div>

<input type="text" id="t1" name="t1" />
<input type="text" id="t2" name="t2" />

</body>

</html>[/HTML]

duffman85 · 04-11-2011 10:39pm

there's no newmarker variable declared anywhere, maybe you meant marker?

if these addListener calls are going to work they need to be inside the for loop in the load() function (where the marker variable is) so that the listeners are added to each marker created

google.maps.event.addListener(newmarker, 'dragstart', function() {
    updateMarkerAddress('Dragging...');
    
});

google.maps.event.addListener(newmarker, 'drag', function() {
    updateMarkerStatus('Dragging...');
    updateMarkerPosition(newmarker.getPosition());
    updateMarkerLat(newmarker.getPosition());
    updateMarkerLng(newmarker.getPosition());
});

google.maps.event.addListener(newmarker, 'dragend', function() {

document.getElementById('t1').value=latlng.lat();

will set the value of the textboxes

also remove the space after the colon --> draggable: true

honeymonster · 07-11-2011 10:18pm

Thank you for taking the time to reply and go through my code. I've applied the updates but still can seem to get it working

See:

[HTML]<!DOCTYPE html >
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>PHP/MySQL & Google Maps Example</title>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
//<![CDATA[
var customIcons = {
restaurant: {
icon: 'http://labs.google.com/ridefinder/images/mm_20_blue.png',
shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png'
},
bar: {
icon: 'http://labs.google.com/ridefinder/images/mm_20_red.png',
shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png'
}
};

function load() {

var map = new google.maps.Map(document.getElementById("map"), {
center: new google.maps.LatLng(53.3419, -6.22639),
zoom: 12,
mapTypeId: 'roadmap'
});
var infoWindow = new google.maps.InfoWindow;

// Change this depending on the name of your PHP file
downloadUrl("phpsqlajax_genxml2.php", function(data) {
var xml = data.responseXML;
var markers = xml.documentElement.getElementsByTagName("marker");
for (var i = 0; i < markers.length; i++) {
var name = markers.getAttribute("name");
var address = '<img src="'+markers.getAttribute("address")+'" alt=""/>';
var type = markers.getAttribute("type");
var point = new google.maps.LatLng(
parseFloat(markers.getAttribute("lat")),
parseFloat(markers.getAttribute("lng")));
var html = "<b>" + name + "</b> <br/>" + address;
var icon = customIcons[type] || {};

var marker = new google.maps.Marker({
map: map,
position: point,
icon: icon.icon,
shadow: icon.shadow,
draggable:true

});

bindInfoWindow(marker, map, infoWindow, html);

google.maps.event.addListener(marker, 'click', function() {

infowindow.open(map,marker);
//marker1.openInfoWindowHtml('Some text', {noCloseOnClick: 'false'});
});

// Update current position info.
updateMarkerPosition(latLng);
updateMarkerLat(latLng);
updateMarkerLng(latLng);
geocodePosition(latLng);

// Add dragging event listeners.
google.maps.event.addListener(marker, 'dragstart', function() {
document.getElementById('t1').value=latlng.lat();
updateMarkerAddress('Dragging...');

});

google.maps.event.addListener(marker, 'drag', function() {
updateMarkerStatus('Dragging...');
updateMarkerPosition(marker.getPosition());
updateMarkerLat(marker.getPosition());
updateMarkerLng(marker.getPosition());
document.getElementById('t1').value=latlng.lat();
document.getElementById('t2').value=latlng.lng();
});

google.maps.event.addListener(marker, 'dragend', function() {

updateMarkerStatus('Drag ended');
geocodePosition(marker.getPosition());
updateMarkerLat(marker.getPosition());
updateMarkerLng(marker.getPosition());
document.getElementById('t1').value=latlng.lat();

});
}

});

}

function bindInfoWindow(marker, map, infoWindow, html) {
google.maps.event.addListener(marker, 'click', function() {
infoWindow.setContent(html);
infoWindow.open(map, marker);
});

}

function downloadUrl(url, callback) {
var request = window.ActiveXObject ?
new ActiveXObject('Microsoft.XMLHTTP') :
new XMLHttpRequest;

request.onreadystatechange = function() {
if (request.readyState == 4) {
request.onreadystatechange = doNothing;
callback(request, request.status);
}
};

request.open('GET', url, true);
request.send(null);
}

function doNothing() {}

</script>

</head>

<body onload="load()">

<div id="map" style="width: 600px; height: 400px"></div>

<input type="text" id="t1" name="t1" />
<input type="text" id="t2" name="t2" />

<h2> </h2>
<div id="loading" title="loading message for map" class="HTEXT2" style="background-color:#D1D0CD; position:absolute; left:200px; top:200px;"></div>

</body>

</html>[/HTML]

Skiex · 08-11-2011 9:51am

I can't find any of the functions updateMarkerLat() or UpdateMarkerlng()in the google maps 3 API.
Are they working funcions?

Anyway to get the lat / lng of a marker its
marker.getPosition.lat();

I dont have your php code to check.
So hopefully it will help you.

google.maps.event.addListener(marker, 'dragend', function() { 		             
    updateMarkerStatus('Drag ended');             
    geocodePosition(marker.getPosition());             
    updateMarkerLat(marker.getPosition()[B].lat()[/B]);             
    updateMarkerLng(marker.getPosition()[B].lng()[/B]);             
    document.getElementById('t1').value = [B]marker.getPosition().lng()[/B]; 			 			 
});

honeymonster · 08-11-2011 7:40pm

Hey thanks for the reply.

The map populates correctly. At the moment there is only one marker being pulled from a DB.

It appears fine. It when the user drags the marker I need to get the long and lat into a form field to update the db.

I haven't a clue about javascript, I was just pulling bits from other examples trying to get it to work.

The document.getElementById('t1').value = marker.getPosition().lng(); doesn't seem to work. Even if I set the value to "testing"

It works if I put it in script tags below the form element t1. Testing will appear if that means anything

Giblet · 08-11-2011 9:42pm

In that case you were running scripts before the DOM was fully loaded, so the t1 element didn't exist when the script ran.

duffman85 · 10-11-2011 12:51am

I managed to get this working.

This blog post was very helpful http://you.arenot.me/2010/06/29/google-maps-api-v3-0-multiple-markers-multiple-infowindows/
Basically a change between version 2 and version 3 of Google Maps in how you add listeners. If you followed a tutorial from version 2, you would only add the listeners to the last marker in the array.

Giblet wrote: »

In that case you were running scripts before the DOM was fully loaded, so the t1 element didn't exist when the script ran.

Exactly.

To get around this you use a closure - bit complicated, see here:
http://code.google.com/apis/maps/documentation/javascript/events.html#EventClosures

here you add a listener to listen for the 'drag' event to a particular marker. When someone actually drags a marker, you don't know what marker you have so use the current one by using the keyword this.
(explanation may not be completely technically accurate.....)
[PHP]
google.maps.event.addListener(marker, 'drag', function() {
updateMarkerPosition(this.getPosition());
});
[/PHP]
The javascript on its own(i.e. everything between the<script> tags). i made my own array of markers but you can get your array from downloadUrl function
[PHP]

var customIcons = {
restaurant: {
icon: 'http://labs.google.com/ridefinder/images/mm_20_blue.png',
shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png'
},
bar: {
icon: 'http://labs.google.com/ridefinder/images/mm_20_red.png',
shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png'
}
};

function load() {
var map = new google.maps.Map(document.getElementById("map"), {
center: new google.maps.LatLng(53.3419, -6.22639),
zoom: 12,
mapTypeId: 'roadmap'
});
var infoWindow = new google.maps.InfoWindow();

// Change this depending on the name of your PHP file
// downloadUrl("phpsqlajax_genxml2.php", function(data) {
/*
....
....
*/
// });
var markers =
[new google.maps.LatLng(53.35358208585847,-6.168025131835975),
new google.maps.LatLng(53.339440205596844,-6.227419968261756),
new google.maps.LatLng(53.34681916315455, -6.260722275390663)];

for(var i=0;i<markers.length;i++)
{
var point = markers;
var html = "<b>TEST</b>" + i + " <br/>";
var marker = new google.maps.Marker({
map: map,
position: point,
draggable:true,
visible:true

});
bindInfoWindow(marker, map, infoWindow, html);
google.maps.event.addListener(marker, 'drag', function() {
updateMarkerPosition(this.getPosition());
});
//add event listeners
google.maps.event.addListener(marker, 'dragstart', function() {
updateMarkerPosition(this.getPosition());
});

google.maps.event.addListener(marker, 'drag', function() {
updateMarkerPosition(this.getPosition());
});

google.maps.event.addListener(marker, 'dragend', function() {
updateMarkerPosition(this.getPosition());
});
google.maps.event.addListener(marker, 'click', function() {
infoWindow.open(map,this);
});

}//End for loop
}//End load()

function bindInfoWindow(marker, map, infoWindow, html) {
google.maps.event.addListener(this, 'click', function() {
infoWindow.setContent(html);
infoWindow.open(map, this);
});

}

function updateMarkerPosition(latlng)
{
document.getElementById('t1').value=latlng.lat();
document.getElementById('t2').value=latlng.lng();
}

[/PHP]

honeymonster · 13-11-2011 11:39am

The lat & long display fine in the text fields but they are not written to the value box so I can't save them

How do you write the values rather than just displaying them

Google maps lat long into hidden fields

Comments