Welcome Guest, Not a member yet? Register   Sign In
googlemap
#1
Sad 

Hi
Someone help me to get this issue why i am not getting at least map.I don't know how to use xml with codeigniter.I got xml data on browser but not getting map.
here is my controller code
function Googlemaps($cycle_serial)
{
   $dom = new DOMDocument("1.0");
   $node = $dom->createElement("markers");
   $parnode = $dom->appendChild($node);
 $query = "SELECT * FROM cycles WHERE cycle_serial='$cycle_serial' ORDER BY cycle_timestamp DESC LIMIT 4";
    $result = mysql_query($query);
    if (!$result) {
    die('Invalid query: ' . mysql_error());
    }
    header("Content-type: text/xml");
    while ($row = @mysql_fetch_assoc($result))
    {
    $node = $dom->createElement("marker");
        $newnode = $parnode->appendChild($node);
        $temp_cycle_id = $row['cycle_id'];
        $newnode->setAttribute("cycle_id",$temp_cycle_id );
    //$temp_cycle_timestamp = $row['cycle_timestamp'];
    //$newnode->setAttribute("cycle_timestamp",$temp_cycle_timestamp );
    //$temp_cycle_serial = $row['cycle_serial'];
    //$newnode->setAttribute("cycle_serial",$temp_cycle_serial );
    $temp_cycle_19_INT = $row['cycle_19_INT'];
    $temp_cycle_20_INT = $row['cycle_20_INT'];
    $temp_cycle_21_INT = $row['cycle_21_INT'];
    $temp_symbol = "+";
    $temp_lattitude = $temp_symbol.$temp_cycle_20_INT.".".$temp_cycle_21_INT;
    $temp_cycle_22_INT = $row['cycle_22_INT'];
    $temp_cycle_23_INT = $row['cycle_23_INT'];
    $temp_cycle_24_INT = $row['cycle_24_INT'];
    $temp_symbol2 = "-";
    $temp_longitude = $temp_symbol2.$temp_cycle_23_INT.".".$temp_cycle_24_INT;
    $temp3 = $temp_lattitude.",".$temp_longitude;
    $newnode->setAttribute("latlong",mysql_real_escape_string($temp3));
    }
   ob_clean();
  echo $dom->saveXML();$dom->save('text2.xml');
 //$this->load->view('dashboard/dashboard_googlemap_view2', $data);
}


view code:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="initial-scale=1.0,user-scalable=yes" />
    <meta http-equiv="content-type" content="text/html;charset=UTF-8"/>


    <title>Using MySQL and PHP with Google Maps</title>
    <style>
      /* Always set the map height explicitly to define the size of the div
       * element that contains the map. */
      #map {
        height: 100%;
      }
      /* Optional: Makes the sample page fill the window. */
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
    </style>
  </head>

 <body style="margin:0px; padding:0px;" onload="initMap()">
    <?php echo "<div id='map'></div>";?>
<div id="map"></div>

<script type = "text/javascript">
      var customLabel = {
        restaurant: {
          label: 'R'
        },
        bar: {
          label: 'B'
        }
      };

       function initMap()
        {
        var map = new google.maps.Map(document.getElementById('map'), {
          center: new google.maps.LatLng(36.713585, -119.582673),
          zoom: 15
    });
// To add the marker to the map, call setMap();
//marker.setMap(map);
      //Open an InfoWindow When Clicking on The Marker
       var infoWindow = new google.maps.InfoWindow;
          //we need to trigger php script

          var ajax = new XMLHttpRequest();
          ajax.onload = functionName;
          ajax.onerror = errorFunctionName;
          ajax.open("GET", "http://75.148.73.50/index.php/dashboard/Googlemaps/0A31EB0000", true);
          ajax.send();
          function functionName() {
              console.log(this); // log the response
              if (this.status == 200) { // request succeeded
                  // do something with this.responseText;
                  console.log("php call went through");

                  //I am putting the map marker code here becuase, first I want to make sure that
                  //the php was executed which creates the xml file that contains the marker data

          // Change this depending on the name of your PHP or XML file
          downloadUrl("http://75.148.73.50/index.php/dashboard/Googlemaps/text2.xml", function(data)
          {

            var xml = data.responseXML;
            var markers = xml.documentElement.getElementsByTagName('marker');
            Array.prototype.forEach.call(markers, function(markerElem) {

              var id = markerElem.getAttribute('id');
              var name = markerElem.getAttribute('name');
              var address = markerElem.getAttribute('address');
              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
              infowincontent.appendChild(text);
              var icon = customLabel[type] || {};
              var marker = new google.maps.Marker({
                map: map,
                position: point,
                label: icon.label
              });
              marker.addListener('click', function() {
                infoWindow.setContent(infowincontent);
                infoWindow.open(map, marker);
              });
            });
          });                  
              } //end of successfull call to PHP file. and if it is, then, we should be able to load the map.
              else {
                  // handle more HTTP response codes here;
                  console.log("php call DID NOT go through");
              }
          }
          function errorFunctionName(e) {
              console.log(this);
              console.error(e);
              // do something with this.status, this.statusText
          }          


        }
    // Since the XMLHttpRequest is asynchronous, the callback function initiates the downloadURL function based on the size of the XML file.
       The bigger your XML file, the longer it may take. For this reason, it would be best not to put any code after
    the downloadUrl that relies on the markers inside the callback function. Instead, such code can be put inside
    the callback function.


      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=(I already have key here)&callback=initMap">
    </script>
   

  </body>
</html>
btp
Reply




Theme © iAndrew 2016 - Forum software by © MyBB