谷歌地图 v3.0 无法加载

Question

我正在尝试为非营利组织加载住宅物业租赁的多个标记。我是 php 和 mysql 的新手，所以很难弄清楚。 搜索完成后，我使用 POST 结果生成标记数组。我无法让谷歌地图加载其空白。我看过很多答案，但它们总是以固定数组开始。我不知道如何从查询生成数组，使其看起来像我见过的示例，我尝试了encode_json，但也不起作用。底线。我需要看到搜索结果中的几个制造商，并且能够单击它们并查看房屋的名称和地址。

这是 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>

Answer 1

如果它是空白的，那么它可能是你的javascript中的错误 - 你是否尝试为你的输出添加addslashes()，以便它优雅地处理引号？

这也可能是您的查询的问题，您是否尝试单独运行查询以查看它是否输出任何结果（不是在地图上，而是在 HTML 源代码中？）

Answer 2

当您说 Google 地图是空白时，您的意思是地图显示没有标记还是完全空白？

如果完全空白，请尝试更改

<body onLoad="load()">

为

<body onLoad="initializeGoogleMap()">

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