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('<','<',$htmlStr); $xmlStr=str_replace('>','>',$xmlStr); $xmlStr=str_replace('"','"',$xmlStr); $xmlStr=str_replace("'",''',$xmlStr); $xmlStr=str_replace("&",'&',$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