خرید بک لینک

درباره سایت

CodingForums

آخرین مطالب

امکانات وب

Why can't I pass variable content through getElementByID element?

I have this code that i'm using to get some formatted Addresses from the JavaScript API of google maps. There is a function called geocode(); that gets this formatted Address from a set of coordinates and I'm trying to pass it outside of that function so I can used it in another function. I thought a good way to do that was to create a DIV with id of 'formattedAddress' and set its ierHTML to the desired results from geocode(); then use getElementByID from outside the geocode(); function and get the ierHTML and put it in a variable for other use but It is not working for me. I'm not sure what the problem is. The geocode(); function loops 3 times for me and the div does change the ierHTML to the content of the last loop but when I try to use getElementByID it is not getting any content. I'm going blank here and i'm not really sure where I am messing up. If someone could help me out I would greatly appreciate it.

Thank you in advance,

Code:
<!doctype html>
<?php
include('../common/header_security.php');
include("../common/db_coector.php");
?>



<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <meta name="description" content="">
  <meta name="author" content="">
  <link rel="icon" href="../favicon.ico">

  <title>Labor Force / Dashboard</title>

  <!-- Bootstrap core CSS -->
  <link href="../dist/css/bootstrap.min.css" rel="stylesheet">

  <!-- Custom styles for this template -->
  <link href="styles.css" rel="stylesheet">
  <style>
  #map {
    height: 400px;
    width: 100%;
  }
</style>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>

<body>
  <header>
    <!-- This includes the main navigation bar from an external file -->
    <?php include('navigation/main_nav_bar.php'); ?>
  </header>

  <div class="container-fluid">
    <div class="row">

      <!-- This includes the left menu column from an external file -->
      <?php include('navigation/left_main_column.php'); ?>

      <main role="main" class="col-sm-9 ml-sm-auto col-md-10 pt-3">
        <h1>Workers</h1>


        <h2>Workers Map View</h2><a href="index.php">Table View</a> - <a href="workers_mapview.php">Map View</a>


        <h3>My Google Maps Demo</h3>

        <div id="map"></div>
        <div id='formattedAddress'></div>
        <br />
        <br />
       
        <script>
          var customLabel = {
            restaurant: {
              label: 'R'
            },
            bar: {
              label: 'B'
            },
            worker: {
              label: 'Worker'
            }
          };

          function initMap() {

            var bounds  = new google.maps.LatLngBounds();

            var map = new google.maps.Map(document.getElementById('map'), {
              center: new google.maps.LatLng(26.224136, -98.2352051),
              zoom: 12
            });



            var geocoder = new google.maps.Geocoder;
            var infoWindow = new google.maps.InfoWindow;

              // Change this depending on the name of your PHP or XML file
              downloadUrl('map_xml/mysql_to_xml_workers.php', function(data) {
             
                var xml = data.responseXML;
                var markers = xml.documentElement.getElementsByTagName('marker');
                //var formattedAddress;
               
                Array.prototype.forEach.call(markers, function(markerElem) {

                  // Call Reverse Geocode //

                  function geocode(location1,location2){
                    var location_lat = location1;
                    var location_lng = location2;
                   
                    axios.get('https://maps.googleapis.com/maps/api/geocode/json',{
                      params:{
                        latlng: location_lat + ',' + location_lng,
                        key: 'XXXXXXXXXXXX'
                      }
                    })
                    .then(function(response){
                      // Log full response
                      //console.log(response);

                      // Formatted Address
                      console.log(response.data.results[0].formatted_address);
                     
                      document.getElementById('formattedAddress').ierHTML = response.data.results[0].formatted_address;
                      //var formattedAddress = response.data.results[0].formatted_address;
                    })
                    .catch(function(error){
                      console.log(error);
                    });

                   
                  }
                  /////////////////////////////


                  var location1 = markerElem.getAttribute('lat');
                  var location2 = markerElem.getAttribute('lng');
                  geocode(location1,location2);
                  //var formattedAddress = document.getElementById('formattedAddress').ierHTML;
                  //alert(formattedAddress);
                 


                  //var formattedAddress;
                  var id = markerElem.getAttribute('id');
                  var name = markerElem.getAttribute('name');
                  var address = markerElem.getAttribute('address');
                  //var address = document.getElementById('formattedAddress').ierHTML;
                  var type = markerElem.getAttribute('type');
                  var point = new google.maps.LatLng(
                    parseFloat(markerElem.getAttribute('lat')),
                    parseFloat(markerElem.getAttribute('lng')));

                 

                  var infowincontent = document.createElement('div');
                  var strong = document.createElement('strong');
                  strong.textContent = name
                  infowincontent.appendChild(strong);
                  infowincontent.appendChild(document.createElement('br'));

                 
                  var text = document.createElement('text');
                  text.textContent = address
                  //text.textContent = document.getElementById('formattedAddress').ierHTML
                  infowincontent.appendChild(text);
                  var icon = customLabel[type] || {};
                  var marker = new google.maps.Marker({
                    map: map,
                    position: point,
                    label: icon.label
                  });
                 

                  var loc = new google.maps.LatLng(marker.position.lat(), marker.position.lng());
                  bounds.extend(loc);


                  marker.addListener('click', function() {
                    infoWindow.setContent(infowincontent);
                    infoWindow.open(map, marker);
                  });
                  map.fitBounds(bounds);      // auto-zoom
                  map.panToBounds(bounds);    // auto-center
                });
});
}



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>

<script async defer
src="https://maps.googleapis.com/maps/api/js?key=XXXXXXXXXXXXXXXX&callback=initMap">
</script>

</main>
</div>
</div>

    <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script>window.jQuery || document.write('<script src="../assets/js/vendor/jquery.min.js"></script>')</script>
    <script src="../assets/js/vendor/popper.min.js"></script>
    <script src="../dist/js/bootstrap.min.js"></script>
  </body>
  </html>

برچسب: نویسنده: آیلین رضوانی تاريخ: چهارشنبه 22 آذر 1396 ساعت: 18:28

صفحه بندی

آرشیو مطالب

پيوندهای روزانه

لینک دوستان

خبرنامه