XML : How can I show my user location on the same map as my markers?

This is my XML file containing the code to request the markers from my database,

  <?php  require("db_connect1.php");  function parseToXML($htmlStr)   {   $xmlStr=str_replace('<','&lt;',$htmlStr);   $xmlStr=str_replace('>','&gt;',$xmlStr);   $xmlStr=str_replace('"','&quot;',$xmlStr);   $xmlStr=str_replace("'",'&apos;',$xmlStr);   $xmlStr=str_replace("&",'&amp;',$xmlStr);   return $xmlStr;   }   // Opens a connection to a mySQL server  $connection=mysqli_connect ($db_hostname, $db_username, $db_password);  if (!$connection) {    die('Not connected : ' . mysqli_error($connection));  }  // Set the active mySQL database  $db_selected=mysqli_select_db($connection, $db_database);  if (!$db_selected) {    die ('Can\'t use db : ' . mysqli_error($connection));  }  // Select all the rows in the markers table  $query = "SELECT * FROM markers WHERE 1=1";  $result = mysqli_query($connection, $query);  if (!$result) {    die('Invalid query: ' . mysqli_error($connection));  }  header("Content-type: text/xml");  // Start XML file, echo parent node  echo '<markers>';  // Iterate through the rows, printing XML nodes for each  while ($row = @mysqli_fetch_assoc($result)){    // ADD TO XML DOCUMENT NODE    echo '<marker ';    echo 'name="' . parseToXML($row['name']) . '" ';    echo 'lat="' . $row['lat'] . '" ';    echo 'lng="' . $row['lng'] . '" ';    echo 'type="' . $row['type'] . '" ';    echo '/>';  }  // End XML file  echo '</markers>';  ?>    

Below is my map file which loads the information above and places the markers on a map, but I'm not sure where or how I can fit in the code to get the user's location and display it on the same map as the markers.

      <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDLo1FETJIxqWv3DtjSnxJH-NwNkUlKUNk"              type="text/javascript"></script>      <script type="text/javascript">      var customIcons = {        point: {          icon: 'img/points.png',          shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png'        },      };      function load() {        var map = new google.maps.Map(document.getElementById("map"), {          center: new google.maps.LatLng(53.8, -1.55),          zoom: 14,          mapTypeId: 'roadmap'        });        var infoWindow = new google.maps.InfoWindow;        // Change this depending on the name of your PHP file        function locate(){          navigator.geolocation.getCurrentPosition(initialize,fail);      }        function initialize(position) {          var myLatLng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);          var mapOptions = {            zoom: 4,            center: myLatLng,            mapTypeId: google.maps.MapTypeId.ROADMAP          }          var map = new google.maps.Map(document.getElementById('map_canvas'),                                        mapOptions);          var userMarker = new google.maps.Marker({              position: myLatLng,              map: map,              icon: im          });        }         function fail(){           alert('navigator.geolocation failed, may not be supported');       }        downloadUrl("phpsqlajax_genxml.php", function(data) {          var xml = data.responseXML;          var markers = xml.documentElement.getElementsByTagName("marker");          for (var i = 0; i < markers.length; i++) {            var name = markers[i].getAttribute("name");            var type = markers[i].getAttribute("type");            var point = new google.maps.LatLng(                parseFloat(markers[i].getAttribute("lat")),                parseFloat(markers[i].getAttribute("lng")));            var html = "<b>" + name + "</b> <br/>" + type;            var icon = customIcons[type] || {};            var marker = new google.maps.Marker({              map: map,              position: point,              icon: icon.icon,              shadow: icon.shadow            });            bindInfoWindow(marker, map, infoWindow, html);          }        });      }      function bindInfoWindow(marker, map, infoWindow, html) {        google.maps.event.addListener(marker, 'click', function() {          infoWindow.setContent(html);          infoWindow.open(map, marker);        });      }      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>    </head>      <body onload="load()">      <div id="map" style="width: 300px; height: 300px"></div>    </body>  </html>    

I would really appreciate it if somebody could show me how to find the user's location and display it on the map with the markers, thank you very much!

No comments:

Post a Comment