Send latitude and longitude to form (to be submitted to database)

Question

I have a google map that displays my current location and when I click on the map a new marker is added that displays the latitude and longitude in an infowindow. I'm happy with that.

What I want to happen is for that latitude and longitude to be entered into a form I have on the same page with details about that location. That info will then be sent to a database.

This is the javascript:

var map;
var marker2;
var infowindow2;
var infowindow;
function getLocation() 
{
if (navigator.geolocation) 
{
    navigator.geolocation.getCurrentPosition(showPosition, placeMarker, showError);
}
else
{
    x.innerHTML = "Geolocation is not supported by this browser.";
}  
}
function showPosition(position)
{
    lat2 = position.coords.latitude;
lon = position.coords.longitude;
latlon = new google.maps.LatLng(lat2, lon)
mapholder = document.getElementById('mapholder')   

var mapProp = 
{
    center: latlon, zoom: 17,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    mapTypeControl: false,
    navigationControlOptions:{style: google.maps.NavigationControlStyle.SMALL}
};

map = new google.maps.Map(document.getElementById("mapholder"),mapProp);
var marker = new google.maps.Marker({ position: latlon, map:map, title: "You are Here"});
marker.setMap(map);
infowindow2 = new google.maps.InfoWindow({ content:"You are Here!" + "<br>Click on desired location to generate latitute and longitude coordinates;" + "<br>Click 'Send' to enter Latitude and Longitude co-ordinates into form"});
infowindow2.open(map,marker);

google.maps.event.addDomListener(window, 'load', getLocation);
google.maps.event.addListener(map, 'click', function(event) 
{
    placeMarker(event.latLng);
});
}
function placeMarker(location) 
{
 if (!marker2) 
 {
     marker2 = new google.maps.Marker({ position: location, map: map, icon: 'Icon/aed4.jpg' });
 }
 else 
 {
     marker2.setPosition(location);
 }

 google.maps.event.addListener(marker2, 'click', function (event) 
 {
     document.getElementById("latbox").value = event.lat();
     document.getElementById("lngbox").value = event.lng();
 });

 infowindow = new google.maps.InfoWindow({ content: 'Latitude: ' + location.lat() + '<br>Longitude: ' + location.lng() });
 infowindow.open(map, marker2);
 infowindow2.close(map, marker2);

 google.maps.event.addDomListener(window, 'load', showPosition);
}
google.maps.event.addDomListener(window, 'load', placeMarker);
infowindow.close(map, marker2);

This is the form I want to place it in:

    <div id="formlocation">
        <table class="style1">
            <tr>
                <td class="style2">
                    <asp:Label ID="buildingLbl" runat="server" Text="Building Name:"></asp:Label>
                </td>
                <td>
                    <asp:TextBox ID="buildingTxt" runat="server"></asp:TextBox>
                </td>
            </tr>
            Latitude:<input size="20" id="latbox" type="text" name="lat" />
            <br />
            Longitude:<input size="20" id="lngbox" type="text" name="lng" />
            <br />

I tried putting them into a textbox but couldn't get that working either.

Also, will I be able to send the info from the input area into SQL the same as the textbox?

I thought I found the answer here but cant figure what I'm doing wrong - hopefully there's a nice simple solution - I'm a novice... All help appreciated.

I was thinking something like this website EXAMPLE. I will only have 1 marker that can be moved by clicking on map and this changes the values in the latitude and longitude fields.

I was adding in screenshot of what I have so far but I cant until I have 10 reputations... I want the coords to populate the fields as the marker is moved by clicking on the map. I know I have in the InfoWindow to click 'Send' to enter co-ordinates into form but ideally it will change as you move the marker by clicking on the map.

I want the Latitude and Longitude values from the infoWindow to go into the form. I have two fields for Latitude and Longitude in my example but that is from me trying to get the values into a TextBox and input field.

There should be a 'Submit' button at the bottom of the form that sends all the information to a database (SQL).

Hope this helps explain what I'm after...

Do you have a live example or can you make a jsfiddle that exhibits the problem? — geocodezip, Feb 11 '13 at 14:22

score 0 · Answer 1 · answered Feb 11 '13 at 22:45

0

You should be able to use Javascript to populate the textbox values

Something like this:

function showPosition(position)
{
    lat2 = position.coords.latitude;
    lon = position.coords.longitude;
    latlon = new google.maps.LatLng(lat2, lon)
    mapholder = document.getElementById('mapholder')

     fillLatLon(lat, lon);
    }

function fillLatLon(lat, lon)
{ 
     $('#latbox').val(lat);
     $('#lngbox').val(lon);
}

answered Feb 11 '13 at 22:45

Andrew Walters

4,763
6
35
49

Hi again and thanks but when I put the above code in showPosition function the map doesn't generate but if I put it in placeMarker function the map will generate and my infoWindow opens with the co-ords in it but they do not populate the fields of my form. Any more suggestions? – radiotower Feb 12 '13 at 23:53
The map not generating is odd, can you run though it with a .js debugger and see if there's any exceptions thrown? – Andrew Walters Feb 13 '13 at 00:23
The map rarely generates in Firefox so I usually open it in Chrome or IE. This is the original code I was working off [link](http://www.mikeborozdin.com/post/Working-with-Google-Maps-API-in-ASPNET.aspx) Its V2 so I'm losing something in translation.... – radiotower Feb 14 '13 at 00:01
Do you have a link to the site that's having issues? I could pull it up and see if I notice anything odd going on. – Andrew Walters Feb 14 '13 at 00:44
Its a project for college - so its only local, sorry. – radiotower Feb 14 '13 at 11:51

Send latitude and longitude to form (to be submitted to database)

1 Answers1