Google map v3.0 not loading

I'm trying to load multimple markers for residential property rental for a non profit org. I'm new to php and mysql so it's been hard to figure it out. After the search is done I use the POST results to generate the markers array. I can't get the google map to even load its blank. I've looked at a lot of answers but they always start with a fixed array. I don't know how to generate the array from the query to look like the examples I've seen, I tried encode_json but didn't work either. Bottom line. I need to see several makers that are the result of the search and be able to click them and to see the name of the house and address.

here is the php file:

<?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()">

The View Source looks like this:

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

if it's blank, then it could be an error in your javascript - did you try addslashes() for your output so that it handles quotation marks gracefully?

it could also be an issue with your query, did you try running your query separately to see if it spits out any results (not on the map, but in the source of the HTML?)

When you say the Google Map is blank, do you mean the map shows with no Markers or it's completely blank?

If completely blank try changing

<body onLoad="load()">

to

<body onLoad="initializeGoogleMap()">

You will also have probs with the last comma in some code in IE. Make sure the code

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

You remove the , after icon to make it:

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