How do I take dynamic content created using geolocation and use it in another div?

StackOverflow https://stackoverflow.com/questions/18137099

Question

Edited: Let me revise my statement! I am able to produce the location but I can't seem to be able to access the data inside the dom so I can use it in the e-mail I want to send. The address appears in the HTML in firebug but when I take to display it in another div it do not show.

Essentially after the location is determine and loaded in the DOM I want to be able to send it via email. When I select the div#address after the document is loaded it only return an empty string. How am I able to access that dynamic content?

<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->

<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <title</title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width">

        <link rel="stylesheet" href="css/normalize.min.css">
        <link rel="stylesheet" href="css/main.css">
        <link rel="stylesheet" href="css/locate-me.css">

        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
        <script src="js/vendor/modernizr-2.6.2-respond-1.1.0.min.js"></script>
        <script src="http://maps.google.com/maps/api/js?sensor=true"></script>
        <script>
            function geolocationSuccess(position) {
              var userLatLng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);

              writeAddressName(userLatLng);
              var myOptions = {
                zoom : 13,
                center : userLatLng,
                mapTypeId : google.maps.MapTypeId.ROADMAP
              };

              // Draw the map
              var mapObject = new google.maps.Map(document.getElementById("map"), myOptions);

              // Place the marker
              new google.maps.Marker({
                map: mapObject,
                position: userLatLng
              });

              $('#error').appendTo(writeAddressName(userLatLng));


            }

            function writeAddressName(latLng) {
              var geocoder = new google.maps.Geocoder();
              geocoder.geocode({
                "location": latLng
              },
              function(results, status) {
                if (status == google.maps.GeocoderStatus.OK)
                  document.getElementById("address").innerHTML = results[0].formatted_address;
                else
                  document.getElementById("error").innerHTML += "Unable to retrieve your address" + "<br />";
              });
            }

            function geolocationError(positionError) {
              document.getElementById("error").innerHTML += "Error: " + positionError.message + "<br />";
            }

            function geolocateUser() {
              if (navigator.geolocation)
              {
                var positionOptions = {
                  enableHighAccuracy: true,
                  timeout: 10 * 1000 // 10 seconds
                };
                navigator.geolocation.getCurrentPosition(geolocationSuccess, geolocationError, positionOptions);
              }
              else
                document.getElementById("error").innerHTML += "Your browser doesn't support the Geolocation API";
            }



            window.onload = geolocateUser;

          var postAdd = $('#address').html();
          $('#error').html(postAdd);


        </script>

    </head>

    <body>
      <header>
        <h1>Locate Me</h1>
      </header>

      <section id="map"></section>

      <section>
        <h2 class="address-block">Address:</h2>
        <aside type="text"  name="address" id="address" data="address"></aside>
        <p id="error">4</p>
      <section>

      <form method='post' action='include/contact.php' id='form'>
            <!-- Name: <input type='text' name='name' required id='name'><br> -->
            Email: <input type='email' name='email' required id='email'><br>
            <input type='submit' value='Send'>
      </form>
    </body>
</html>
Was it helpful?

Solution

Define the variable userLatLng outside the geolocationSuccess() function otherwise it is only accessible inside the function.

At the same time you can assign the value of that variable to a hidden input and send it through email.

Swap the order of these:

function geolocationSuccess(position) {
  var userLatLng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);

For this:

var userLatLng;
function geolocationSuccess(position) {
    userLatLng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);

Major edit:

I am able to access the content by adding this just before the body tag is closed:

<script>
 $("#the_trigger").click(function(){
  alert($("#address").html());
 });
</script>

And adding an ID of "the_trigger" to the submit button.

<input id="the_trigger" type='submit' value='Send'>
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top