I am also interested in doing this. Have got as far as adding the map using a custom html field, dropping a marker based on postcode entered in a postcode field and allowing the marker to be dragged. I'm stuck on saving the latlng values of the dropped marker into a hidden field.
What I would do next is setup a form notification with google maps code embedded and use the placeholder for my latlng hidden field value placeholder do load the selected location. Or possibly, if their are issues loading this put the latlag into a google maps link in the form notification so that the user can click on the link to view the submitted location on google maps.
Does anyone know how to take the submitted latlng and enter it as the value of the hidden field.
Heres the code for all interested
<script src="http://maps.googleapis.com/maps/api/js?&key=AIzaSyCNxoHu7f79iqUKTWw8T6zOWXX2FNvWioY&sensor=false"></script>
<script>
var geocoder;
var map;
function initialize() {
var mapOptions = {
zoom: 5,
center: new google.maps.LatLng(54.80068486732233, -4.4384765625),
mapTypeId: google.maps.MapTypeId.HYBRID,
mapTypeControl: false
}
map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
//GEOCODER
geocoder = new google.maps.Geocoder();
}
function codeAddress() {
var address = document.getElementById("input_1_9").value;
var loc=[];
geocoder.geocode( { 'address': address}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
map.setCenter(results[0].geometry.location);
map.setZoom(20);
var marker = new google.maps.Marker({
map: map,
position: results[0].geometry.location,
draggable: true,
});
loc[0]=results[0].geometry.location.lat();
loc[1]=results[0].geometry.location.lng();
//alert(loc);
document.getElementById('field_1_36').value = loc;
} else {
alert("Geocode was not successful for the following reason: " + status);
}
});
}
window.onload = function () {
initialize();
}
</script>
<script>
$('#input_1_9').blur(function()
{
if( $(this).val() ) {
codeAddress();
}
});
$('#pcaSelectTH88').change(function(){
$('#field_1_25').css('display', 'block');
});
</script>
<div id="map_canvas" style="width: 600px; height: 400px; position: relative;"></div>
Cheers
Posted 12 years ago on Friday August 24, 2012 |
Permalink