2011-06-23 111 views
1

我正在嘗試加載非盈利組織的住宅物業租賃多標記。我是新來的PHP和MySQL,所以很難弄清楚。 搜索完成後,我使用POST結果生成標記數組。我無法獲得谷歌地圖甚至加載它的空白。我已經看了很多答案,但他們總是以固定數組開始。我不知道如何從查詢中生成數組,看起來像我見過的例子,我嘗試了encode_json,但也沒有工作。底線。我需要看到幾位製造商是搜索結果並能夠點擊它們並查看房屋名稱和地址。谷歌地圖v3.0不能加載

這裏是php文件:

<?php 
// get variable after selecting something from the dropdown with name 'chooser' 
$select = $_POST['select']; 
// if something has been chosen 
if (!empty($select)) { 
// get the chosen value 
$community = $_POST['community']; 
$location = $_POST['location']; 
$start = $_POST['start']; 
$maxocc = $_POST['maxocc']; 
$bed = $_POST['bed']; 
$fbath = $_POST['fbath']; 
} 
// select the type from the database 
// database connection details (change to whatever you need) 
$user="xxxx"; 
$password="xxxx"; 
$database="xxxxx"; 
// connect to database 
$conn=mysql_connect ('localhost','xxxxx','xxxxx'); 
if (!$conn) { 
die("Not connected : " . mysql_error()); 
} 
// select database 
$db_selected = mysql_select_db($database, $conn); 
if (!$db_selected) { 
die ("Can\'t use db : " . mysql_error()); 
} 
// if everything successful create query 
// this selects all rows where the type is the one you chose in the dropdown 
// * means that it will select all columns, ie name and type as i said above 
$query = "SELECT `listingdb`.`houseno`,`listingdb`.`house_name`,`listingdb`.`house_address`,`listingdb`.`lat`,`listingdb`.`long` 
FROM `listingdb` 
INNER JOIN `ownerdb` ON `listingdb`.`houseno`=`ownerdb`.`house_no` 
WHERE start='{$_POST['start']}' OR maxocc='{$_POST['maxocc']}' OR bed='{$_POST['bed']}' OR fbath='{$_POST['fbath']}' 
"; 
?> 
..... 

<script type="text/javascript"> 
//<![CDATA[ 
// initialize the google Maps 
var map; 
var houses = []; 
    var markers = []; 
    var infoWindow; 
    var locationSelect; 

function initializeGoogleMap() { 
    // set latitude and longitude to center the map around 
    var corolla = new google.maps.LatLng(36.37,-75.826); 
    // set up the default options 
    var myOptions = { 
     zoom: 14, 
     center: corolla, 
     navigationControl: true, 
     navigationControlOptions: 
     {style: google.maps.NavigationControlStyle.DEFAULT, 
     position: google.maps.ControlPosition.TOP_LEFT }, 
     mapTypeControl: false, 
     mapTypeControlOptions: 
     {style: google.maps.MapTypeControlStyle.DEFAULT, 
     position: google.maps.ControlPosition.TOP_RIGHT }, 

     scaleControl: true, 
     scaleControlOptions: { 
      position: google.maps.ControlPosition.BOTTOM_LEFT 
     }, 
     mapTypeId: google.maps.MapTypeId.ROADMAP, 
     draggable: true, 
     disableDoubleClickZoom: false, 
     keyboardShortcuts: true 
    } 
    var map = new google.maps.Map(document.getElementById("mapCanvas"), myOptions); 

    var infoWindow = new google.maps.InfoWindow; 

<?php 
$mymap = array(); 
$result = mysql_query ($query); 

while($row = mysql_fetch_array ($result))  
{ 
$coordinates = array(
    'latitude' => $row['lat'], 
    'longitude' => $row['long'], 
    'house_name' => $row['house_name'], 
    'house_address' => $row['house_address'], 

); 
array_push($mymap, $coordinates); 
} 
$houses[] = $mymap; 
print_r ($houses[0]); 

for($i=0; $i < count($houses[0]); $i++) { 
    {   
?> 
// Add a marker to the map at specified latitude and longitude with tooltip 
function createMarker(map,lat,lng,title,html) { 
    for (var i = 0; i <houses.length; i++) { 
     var point = point[i] 
     var myLatLng = new google.maps.LatLng(<?php echo $houses[0][$i]['latitude']; ?>,<?php echo $houses[0][$i]['longitude']; ?>); 
     var html = "<b>" + <?php echo $houses[0][$i]['house_name']; ?> + "</b> <br/>" + <?php echo $houses[0][$i]['house_address']; ?>; 
     var icon = "", 

     var marker = new google.maps.Marker({ 
      position: myLatLng, 
      map: map, 
      title: "<?php echo $houses[0][$i]['house_name']; ?>", 
      icon: "", 
     }); 

     bindInfoWindow(marker, map, infoWindow, html); 
    } 

     google.maps.event.addListener(marker, 'click', function() { 
     infoWindow.setContent(html); 
     infoWindow.open(map, marker); 
}); 
markers.push(marker); 
<?php }} ?> 
} 

     // To add the marker to the map, call setMap(); 
marker.setMap(map); 

} 
function bindInfoWindow(marker, map, infoWindow, html) { 
    google.maps.event.addListener(marker, 'click', function() { 
    infoWindow.setContent(html); 
    infoWindow.open(map, marker); 
    }); 
} 

//]]> 
</script> 
</head> 
<body onLoad="load()"> 

查看源文件看起來是這樣的:

<script type="text/javascript"> 
//<![CDATA[ 
var map; 
var houses = []; 
var markers = []; 
var infoWindow; 
var locationSelect; 

    function initializeGoogleMap() { 
     // set latitude and longitude to center the map around 
     var corolla = new google.maps.LatLng(36.37,-75.826); 
     // set up the default options 
     var myOptions = { 
      zoom: 14, 
      center: corolla, 
      navigationControl: true, 
      navigationControlOptions: 
      {style: google.maps.NavigationControlStyle.DEFAULT, 
      position: google.maps.ControlPosition.TOP_LEFT }, 
      mapTypeControl: false, 
      mapTypeControlOptions: 
      {style: google.maps.MapTypeControlStyle.DEFAULT, 
      position: google.maps.ControlPosition.TOP_RIGHT }, 

      scaleControl: true, 
      scaleControlOptions: { 
      position: google.maps.ControlPosition.BOTTOM_LEFT 
     }, 
      mapTypeId: google.maps.MapTypeId.ROADMAP, 
      draggable: true, 
      disableDoubleClickZoom: false, 
      keyboardShortcuts: true 
     } 
     var map = new google.maps.Map(document.getElementById("mapCanvas"), myOptions); 

     var infoWindow = new google.maps.InfoWindow; 

Array 
(
[0] => Array 
    (
     [latitude] => 36.370525 
     [longitude] => -75.827683 
     [house_name] => Barefoot Days 
     [house_address] => 1140 Morris Dr. 
    ) 

[1] => Array 
    (
     [latitude] => 36.364495 
     [longitude] => -75.827469 
     [house_name] => Celestial Haven 
     [house_address] => 1043 Miller Court 
    ) 

[2] => Array 
    (
     [latitude] => 36.360832 
     [longitude] => -75.825645 
     [house_name] => Seehorses 
     [house_address] => 1030 Mirage St. 
    ) 

[3] => Array 
    (
     [latitude] => 36.370992 
     [longitude] => -75.825366 
     [house_name] => Summer Dreams 
     [house_address] => 1121 Ocracoke Court 
    ) 

[4] => Array 
    (
     [latitude] => 36.370266 
     [longitude] => -75.825924 
     [house_name] => Beachy Keen 
     [house_address] => 1125 Morris Dr. 
    ) 

[5] => Array 
    (
     [latitude] => 36.369402 
     [longitude] => -75.828155 
     [house_name] => The Surfrider 
     [house_address] => 1103 Austin St. 
    ) 

[6] => Array 
    (
     [latitude] => 36.366102 
     [longitude] => -75.826353 
     [house_name] => Beacon of Light 
     [house_address] => 1067 Beacon Hill Dr. 
    ) 

) 

    // Add a marker to the map at specified latitude and longitude with tooltip 
    function createMarker(map,lat,lng,title,html) { 
     for (var i = 0; i <houses.length; i++) { 
      var point = point[i] 
      var myLatLng = new google.maps.LatLng(36.370525,-75.827683); 
      var html = "<b>" + Barefoot Days + "</b> <br/>" + 1140 Morris Dr.; 
     var icon = "", 

      var marker = new google.maps.Marker({ 
      position: myLatLng, 
       map: map, 
       title: "Barefoot Days", 
       icon: "", 
     }); 

      bindInfoWindow(marker, map, infoWindow, html); 
    } 

     google.maps.event.addListener(marker, 'click', function() { 
      infoWindow.setContent(html); 
      infoWindow.open(map, marker); 
}); 
markers.push(marker); 

    // Add a marker to the map at specified latitude and longitude with tooltip 
    function createMarker(map,lat,lng,title,html) { 
     for (var i = 0; i <houses.length; i++) { 
      var point = point[i] 
      var myLatLng = new google.maps.LatLng(36.364495,-75.827469); 
      var html = "<b>" + Celestial Haven + "</b> <br/>" + 1043 Miller Court; 
     var icon = "", 

      var marker = new google.maps.Marker({ 
      position: myLatLng, 
       map: map, 
       title: "Celestial Haven", 
       icon: "", 
     }); 

      bindInfoWindow(marker, map, infoWindow, html); 
    } 

     google.maps.event.addListener(marker, 'click', function() { 
      infoWindow.setContent(html); 
      infoWindow.open(map, marker); 
}); 
markers.push(marker); 

you see all the markers (i deleted them for your reference, you get the picture 
.... 

     // To add the marker to the map, call setMap(); 
    marker.setMap(map); 

} 
    function bindInfoWindow(marker, map, infoWindow, html) { 
     google.maps.event.addListener(marker, 'click', function() { 
     infoWindow.setContent(html); 
     infoWindow.open(map, marker); 
     }); 
    } 

//]]> 

</script> 

回答

0

,如果是空白的,那麼它可以在你的JavaScript錯誤 - 你嘗試和addslashes( )爲您的輸出,以便它適當地處理引號?

它也可能是您的查詢的問題,你有沒有嘗試單獨運行查詢,看看它吐出來的任何結果(未在地圖上,但在HTML源?)

0

當你說谷歌地圖是空白的,你的意思是地圖顯示沒有標記,或者它是完全空白的?

如果完全空白的嘗試改變

<body onLoad="load()"> 

<body onLoad="initializeGoogleMap()"> 

您還將有probs在IE中的一些代碼,最後一個逗號。確保代碼

var marker = new google.maps.Marker({ 
    position: myLatLng, 
    map: map, 
    title: "Barefoot Days", 
    icon: "", 
}); 

你刪除,圖標後,使其:

var marker = new google.maps.Marker({ 
    position: myLatLng, 
    map: map, 
    title: "Barefoot Days", 
    icon: "" 
});