#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Feb 2013
    Posts
    1
    Rep Power
    0

    Importing values displayed by javascript to input text box


    Hello there, nice to be a part of this community, hope to have some help whit my problem, im making a website that shows job ads, and in the job ad i use a google map script, the dragabble markeble, the one im using is the link above:

    gmaps-samples-v3.googlecode.com/svn/trunk/draggable-markers/draggable-markers.html

    Here is the code:

    Code:
    <html> <head> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> <script type="text/javascript"> var geocoder = new google.maps.Geocoder(); function geocodePosition(pos) { geocoder.geocode({ latLng: pos }, function(responses) { if (responses && responses.length > 0) { updateMarkerAddress(responses[0].formatted_address); } else { updateMarkerAddress('Cannot determine address at this location.'); } }); } function updateMarkerStatus(str) { document.getElementById('markerStatus').innerHTML = str; } function updateMarkerPosition(latLng) { document.getElementById('info').innerHTML = [ latLng.lat(), latLng.lng() ].join(', '); } function updateMarkerAddress(str) { document.getElementById('address').innerHTML = str; } function initialize() { var latLng = new google.maps.LatLng(-34.397, 150.644); var map = new google.maps.Map(document.getElementById('mapCanvas'), { zoom: 8, center: latLng, mapTypeId: google.maps.MapTypeId.ROADMAP }); var marker = new google.maps.Marker({ position: latLng, title: 'Point A', map: map, draggable: true }); // Update current position info. updateMarkerPosition(latLng); geocodePosition(latLng); // Add dragging event listeners. google.maps.event.addListener(marker, 'dragstart', function() { updateMarkerAddress('Dragging...'); }); google.maps.event.addListener(marker, 'drag', function() { updateMarkerStatus('Dragging...'); updateMarkerPosition(marker.getPosition()); }); google.maps.event.addListener(marker, 'dragend', function() { updateMarkerStatus('Drag ended'); geocodePosition(marker.getPosition()); }); } // Onload handler to fire off the app. google.maps.event.addDomListener(window, 'load', initialize); </script> </head> <body> <style> #mapCanvas { width: 500px; height: 400px; float: left; } #infoPanel { float: left; margin-left: 10px; } #infoPanel div { margin-bottom: 5px; } </style> <div id="mapCanvas"></div> <div id="infoPanel"> <b>Marker status:</b> <div id="markerStatus"><i>Click and drag the marker.</i></div> <b>Current position:</b> <div id="info"></div> <b>Closest matching address:</b> <div id="address"></div> </div> </body> </html>
    Whit the marker i can choose the place that i want to choose, but i liked to use the values give by the latitude and longitude (current location in the right side of the page would display the values (lat,long) in input text box where would be hidden and when i submitted the form would send the values to by database table.

    Basically what i need is display the values given by javascript code in input text boxes, unfortanlly im a noob whit javascript and hope you guys could help me.

    Best regards
  2. #2
  3. A Not To Shabby Code Smurf
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Aug 2008
    Posts
    1,134
    Rep Power
    120
    If you have control over the entire source code of this page; you would do it like this:

    Code:
    <html>
    <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
    <script type="text/javascript">
    var geocoder = new google.maps.Geocoder();
    
    function geocodePosition(pos) {
      geocoder.geocode({
        latLng: pos
      }, function(responses) {
        if (responses && responses.length > 0) {
          updateMarkerAddress(responses[0].formatted_address);
        } else {
          updateMarkerAddress('Cannot determine address at this location.');
        }
      });
    }
    
    function updateMarkerStatus(str) {
      document.getElementById('markerStatus').innerHTML = str;
    }
    
    function updateMarkerPosition(latLng) {
      document.getElementById('info').innerHTML = [
        latLng.lat(),
        latLng.lng()
      ].join(', ');
      document.getElementById('lat_and_long').value = [
        latLng.lat(),
        latLng.lng()
      ].join(', ');
    }
    
    function updateMarkerAddress(str) {
      document.getElementById('address').innerHTML = str;
    }
    
    function initialize() {
      var latLng = new google.maps.LatLng(-34.397, 150.644);
      var map = new google.maps.Map(document.getElementById('mapCanvas'), {
        zoom: 8,
        center: latLng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
      });
      var marker = new google.maps.Marker({
        position: latLng,
        title: 'Point A',
        map: map,
        draggable: true
      });
      
      // Update current position info.
      updateMarkerPosition(latLng);
      geocodePosition(latLng);
      
      // Add dragging event listeners.
      google.maps.event.addListener(marker, 'dragstart', function() {
        updateMarkerAddress('Dragging...');
      });
      
      google.maps.event.addListener(marker, 'drag', function() {
        updateMarkerStatus('Dragging...');
        updateMarkerPosition(marker.getPosition());
      });
      
      google.maps.event.addListener(marker, 'dragend', function() {
        updateMarkerStatus('Drag ended');
        geocodePosition(marker.getPosition());
      });
    }
    
    // Onload handler to fire off the app.
    google.maps.event.addDomListener(window, 'load', initialize);
    </script>
    </head>
    <body>
      <style>
      #mapCanvas {
        width: 500px;
        height: 400px;
        float: left;
      }
      #infoPanel {
        float: left;
        margin-left: 10px;
      }
      #infoPanel div {
        margin-bottom: 5px;
      }
      </style>
      
      <div id="mapCanvas"></div>
      <div id="infoPanel">
        <b>Marker status:</b>
        <div id="markerStatus"><i>Click and drag the marker.</i></div>
        <b>Current position:</b>
        <div id="info"></div>
        <b>Closest matching address:</b>
        <div id="address"></div>
      </div>
    <input id="lat_and_long" type="hidden"/>
    </body>
    </html>

IMN logo majestic logo threadwatch logo seochat tools logo