2016-03-22 16 views
-1

表示されますが、私のXMLコードは、私がこれをダウンロードして実装しようとしています「phpsqlajax.php」私はxmlファイルから地図上のマーカーを配置しようとしていますが、私のマップはここで任意のマーカーなし

<?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('&','&amp;', $row['name']) . '" '; 
    echo 'lat="' . $row['lat'] . '" '; 
    echo 'lng="' . $row['lng'] . '" '; 
    echo 'type="' . $row['type'] . '" '; 
    echo '/>'; 
} 
// End XML file 
echo '</markers>'; 
?>   

として保存されます'mapxml.html'として保存されている私の地図に貼り付けられますが、地図にはシアトルの画像だけが表示され、私のデータベースに保存したマーカーは表示されません。ここでmapxml.htmlコードがある

<!DOCTYPE html> 
    <html> 
    <head> 
     <meta http-equiv="content-type" content="text/html; charset=utf-8"/> 
     <title>Google Maps AJAX + mySQL/PHP Example</title> 
     <script src="http://maps.google.com/maps/api/js?sensor=false" 
       type="text/javascript"></script> 
     <script type="text/javascript"> 
     //<![CDATA[ 
     var customIcons = { 
      field: { 
      icon: 'img/marker.png', 
      shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png' 
      }, 
      Park: { 
      icon: 'img/marker.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(47.6145, -122.3418), 
      zoom: 13, 
      mapTypeId: 'roadmap' 
      }); 
      var infoWindow = new google.maps.InfoWindow; 
      // Change this depending on the name of your PHP file 
      downloadUrl("phpsqlajax_genxml.php", function(data) { 
      var xml = data.responseXML; 
      var markers = xml.documentElement.getElementsByTagName("markers"); 
      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/>" + address; 
       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: 500px; height: 300px"></div> 
     </body> 
    </html> 

誰もが私のマーカーが表示されていない理由を知っているのですか?

私は、Googleのチュートリアルを追っていると、私のXMLは、しかし、私は誰もが、私はそれを大幅に感謝助けることができれば指示https://developers.google.com/maps/articles/phpsqlajax_v3

を終えることができないよう細かい出力しています!

+0

あなたは、静的COORDSにマーカーを配置し、テスト用のXML出力を無視しようとしたことがありますか? –

+1

AJAXリクエストによって返されたXMLはどのように見えますか? – duncan

答えて

0

47.6145, -122.3418はシアトルの座標です。あなたのAJAXリクエストによって返されたすべてのマーカーを表示したい場合は、マーカに合わせてマップの境界を調整する必要があります。

ここではあなたのことが含まれるように、forループの修正版です:

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

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")) 
    ); 

    bounds.extend(point); 

    var html = "<b>" + name + "</b> <br/>" + address; 
    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); 
} 

map.fitBounds(bounds); 
関連する問題