2012-04-20 145 views
1

我几乎复制了教程中的代码: https://developers.google.com/maps/articles/phpsqlajax_v3 (当然,我做了适当的修改,我猜)。谷歌地图API:空白页面(没有地图)

你能帮我弄清楚为什么地图不显示出来吗?

我使用的MySQL/PHP生成an XML output(类似代码的教程):

<?php 
require("database.php"); 

function parseToXML($htmlStr) 
{ 
$xmlStr=str_replace('<','&lt;',$htmlStr); 
$xmlStr=str_replace('>','&gt;',$xmlStr); 
$xmlStr=str_replace('"','&quot;',$xmlStr); 
$xmlStr=str_replace("'",'&#39;',$xmlStr); 
$xmlStr=str_replace("&",'&amp;',$xmlStr); 
return $xmlStr; 
} 

// Opens a connection to a MySQL server 
$connection=mysql_connect ($localhost, $username, $password); 
if (!$connection) { 
    die('Not connected : ' . mysql_error()); 
} 

// Set the active MySQL database 
$db_selected = mysql_select_db($database, $connection); 
if (!$db_selected) { 
    die ('Can\'t use db : ' . mysql_error()); 
} 

// Select all the rows in the tbl_address table 
$query = "SELECT * FROM tbl_address WHERE 1"; 
$result = mysql_query($query); 
if (!$result) { 
    die('Invalid query: ' . mysql_error()); 
} 

header("Content-type: text/xml"); 

// Start XML file, echo parent node 
echo '<markers>'; 

// Iterate through the rows, printing XML nodes for each 
while ($row = @mysql_fetch_assoc($result)){ 
    // ADD TO XML DOCUMENT NODE 
    echo '<marker '; 
    echo 'name="' . parseToXML($row['address']) . '" '; 
    echo 'address="' . parseToXML($row['address']) . '" '; 
    echo 'lat="' . $row['latitude'] . '" '; 
    echo 'lng="' . $row['longitude'] . '" '; 
    echo 'type="USC Student Housing" '; 
    echo '/>'; 
} 

// End XML file 
echo '</markers>'; 

?> 

这里是the map(类似代码的教程):

<!DOCTYPE html > 
    <head> 
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> 
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"/> 
    <title>PHP/MySQL & Google Maps Example</title> 
    <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script> 
    <script type="text/javascript"> 
    //<![CDATA[ 

    var customIcons = { 
     restaurant: { 
     icon: 'http://labs.google.com/ridefinder/images/mm_20_blue.png', 
     shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png' 
     }, 
     bar: { 
     icon: 'http://labs.google.com/ridefinder/images/mm_20_red.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(34.026485, -118.283794), 
     zoom: 14, 
     mapTypeId: 'roadmap' 
     }); 
     var infoWindow = new google.maps.InfoWindow; 

     // Change this depending on the name of your PHP file 
     downloadUrl("http://firstchoicehousing.com/_api/google/maps/phpsqlajax_genxml2.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 address = markers[[]i].getAttribute("address"); 
      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> 
+0

感谢@ user1289347我是能够使地图的工作。最后一件事......我如何让这张地图看起来就像这样?:http://tiny.cc/yqg1cw(我需要右侧的地址列表和工具提示以包含网址等) – Omar 2012-04-20 00:53:56

+0

注意!如果您正在阅读本文,我想评论一下谷歌的教程示例带有几个错误。大多数这些地址在这里解决 – Omar 2012-04-25 00:19:23

+0

在谷歌的网站,示例代码[phpsqlajax_genxml.php](http://gmaps-samples-v3.googlecode.com/svn/trunk/articles/phpsqlajax/phpsqlajax_genxml.php),以生成一个xml数据源文件有以下错误:'$ connection = mysql_connect(localhost,$ username,$ password);'变量'localhost'应该是'$ localhost'(它缺少'$'-dollar标志)。另外,'$ localhost'需要包含在文件[phpsqlajax_dbinfo.php]中(http://gmaps-samples-v3.googlecode.com/svn/trunk/articles/phpsqlajax/phpsqlajax_dbinfo.php) – Omar 2012-04-25 00:30:52

回答

1

的变化需要对每一个语法错误都会被做出来。下面是完整的js。这里是一个小提琴,它不显示标记,因为我不能使用ajax跨域来获取列表,但你可以看到地图加载。 http://jsfiddle.net/zvmdp/

编辑 改变你的代码,这和它的运行

var customIcons = { 
     restaurant: { 
     icon: 'http://labs.google.com/ridefinder/images/mm_20_blue.png', 
     shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png' 
     }, 
     bar: { 
     icon: 'http://labs.google.com/ridefinder/images/mm_20_red.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(34.026485, -118.283794), 
     zoom: 14, 
     mapTypeId: 'roadmap' 
     }); 
     var infoWindow = new google.maps.InfoWindow; 

     // Change this depending on the name of your PHP file 
     downloadUrl("http://firstchoicehousing.com/_api/google/maps/phpsqlajax_genxml2.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 address = markers[i].getAttribute("address"); 
      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() {} 
+0

我做了更改,但仍未显示地图> _ < – Omar 2012-04-20 00:31:51

+0

How我检查控制台吗? – Omar 2012-04-20 00:33:23

+0

在firefox ctrl + shift + J中,在chrome F12键上点击控制台标签 – user1289347 2012-04-20 00:34:28