Google map v3.0 не загружается - PullRequest
1 голос
/ 23 июня 2011

Я пытаюсь загрузить несколько маркеров для аренды жилой недвижимости для некоммерческой организации.Я новичок в php и mysql, так что это было трудно понять.После завершения поиска я использую результаты POST для генерации массива маркеров.Я не могу заставить карту Google даже загрузить ее пустым.Я посмотрел на множество ответов, но они всегда начинаются с фиксированного массива.Я не знаю, как сгенерировать массив из запроса, чтобы он выглядел как примеры, которые я видел, я пробовал 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>

Ответы [ 2 ]

0 голосов
/ 23 июня 2011

Когда вы говорите, что карта 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: ""
});
0 голосов
/ 23 июня 2011

если оно пустое, то это может быть ошибкой в ​​вашем javascript - вы пытались добавить addlashes () для вывода, чтобы он корректно обрабатывал кавычки?Вы пытались запустить свой запрос отдельно, чтобы увидеть, если он выдаст какие-либо результаты (не на карте, но в источнике HTML?)

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...