JQuery загрузить Google Maps - PullRequest
Новая
       1

JQuery загрузить Google Maps

0 голосов
/ 03 января 2012

Я хочу загрузить файл карт Google с помощью jQuery логика очень проста, я хочу, чтобы страница перезагружалась каждый раз, когда я посылаю новые переменные в запрос ...

проблема в том, что контент не загружается ..

вот код JavaScript .... 

<script type="text/javascript">
$(document).ready(function(){
function Display_Load()
{
    $("#loading").fadeIn(900,0);
    $("#loading").html("<img src='img/bigLoader.gif' style='border:none;' />");
}
//Hide Loading Image
function Hide_Load()
{
    $("#loading").fadeOut('slow');
};
$("#pagination li").click(function(){
Display_Load();
$("#content").load("file_map.php", Hide_Load());
}
});
</script>

и вот HTML-код 

  <body>
<div id="loading" ></div>
<div id="content" ></div>
  </body>

этот пример хорошо работает с другим файлом php или html, но все еще не работает с Google Maps. Я думаю, что проблема в функции initialize () при загрузке страницы, но я не знаю, как ее решить, может помочь мне

много

Ответы [ 2 ]

0 голосов
/ 04 января 2012

Вот содержимое примера файла карт Google file_map.php ..... 

<?php include_once($_SERVER['DOCUMENT_ROOT'] . "/config.php");
require_once($lib_path."mysql.class.php");
require_once($lib_path."document.php");
require_once $lib_path . "userAccount.php";
require_once($lib_path."adsearch_class.php"); 
?>


<!DOCTYPE html "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=------------------------------------" type="text/javascript"></script>

<script type="text/javascript">

function initialize() {
  if (GBrowserIsCompatible()) {
    var map = new GMap2(document.getElementById("map_canvas"));
    map.setCenter(new GLatLng(37.4419, -122.1419), 13);
    map.setUIToDefault();
  }
}

</script>


 </head>
  <body onload="initialize()" onunload="GUnload()">
    <div id="map_canvas" style="width: 500px; height: 300px"></div>
  </body>
</html>

этот файл хорошо работает без jQuery ... но нет результата, когда я вызываю его с помощью jQuery ..

файл index.php находится здесь 

<?php 
include_once($_SERVER['DOCUMENT_ROOT'] . "/config.php");
require_once($lib_path."mysql.class.php");
require_once($lib_path."document.php");
require_once $lib_path . "userAccount.php";
require_once($lib_path."adsearch_class.php");

$per_page = 5; 

//getting number of rows and calculating no of pages
$rsd=new db_publish;
$rsd->connect();
$sql = "SELECT *FROM `table` LIMIT 0 , 30";
$rsd->query($sql);
$counteur = $rsd->count();
$pages = ceil($counteur/$per_page);
?>


    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/
libs/jquery/1.3.0/jquery.min.js"></script>
    <script type="text/javascript">

    $(document).ready(function(){

    //Display Loading Image
    function Display_Load()
    {
        $("#loading").fadeIn(900,0);
        $("#loading").html("<img src='img/bigLoader.gif' />");
    }
    //Hide Loading Image
    function Hide_Load()
    {
        $("#loading").fadeOut('slow');
    };


   //Default Starting Page Results

    $("#pagination li:first").css({'color' : '#FF0084'}).css({'border' : 'none'});

    Display_Load();

    $("#content").load("file_map.php");



    //Pagination Click
    $("#pagination li").click(function(){

        Display_Load();

        //CSS Styles
        $("#pagination li")
        .css({'border' : 'solid #dddddd 1px'})
        .css({'color' : '#0063DC'});

        $(this)
        .css({'color' : '#FF0084'})
        .css({'border' : 'none'});

        //Loading Data
        var pageNum = this.("#pagination li").id;

        $("#content").load("file_map.php?page=" + pageNum);
    });


});
    </script>

<style>
body { margin: 0; padding: 0; font-family:Verdana; font-size:15px }
a
{
text-decoration:none;
color:#B2b2b2;

}

a:hover
{

color:#DF3D82;
text-decoration:underline;

}
#loading { 
width: 100%; 
position: absolute;
}

#pagination
{
text-align:center;
margin-left:120px;

}
li{ 
list-style: none; 
float: left; 
margin-right: 16px; 
padding:5px; 
border:solid 1px #dddddd;
color:#0063DC; 
}
li:hover
{ 
color:#FF0084; 
cursor: pointer; 
}


</style>


    <div align="center">


    <div id="loading" ></div>
    <div id="content" ></div>


    <table width="800px">
    <tr><Td>
            <ul id="pagination">
                <?php
                //Show page links
                for($i=1; $i<=$pages; $i++)
                {
                    echo '<li id="'.$i.'">'.$i.'</li>';
                }
                ?>
    </ul>   
    </Td></tr></table>
    </div>

Как я уже говорил в первый раз, этот пример хорошо работает только с картами Google, контент не может быть загружен .... на странице результатов у меня есть только 

<div id="map_canvas" style="width: 500px; height: 300px"></div>

без содержания карт внутри

0 голосов
/ 03 января 2012

В вашем коде JavaScript есть ошибка, вы не завершили вызов click (или вызов ready; природа синтаксических ошибок означает, что мы на самом деле не знаем, какой из них неполный).Таким образом, ни один из кодов не работает, и вы должны увидеть синтаксическую ошибку в консоли JavaScript.

Использование правильного отступа может помочь вам отловить ошибки, поэтому стоит привыкнуть к этому.Вот верная версия вашего кода с отступом: 

<script type="text/javascript">
$(document).ready(function(){
    function Display_Load()
    {
        $("#loading").fadeIn(900,0);
        $("#loading").html("<img src='img/bigLoader.gif' style='border:none;' />");
    }
    //Hide Loading Image
    function Hide_Load()
    {
        $("#loading").fadeOut('slow');
    };
    $("#pagination li").click(function(){
        Display_Load();
        $("#content").load("file_map.php", Hide_Load());
    }
});
</script>

Как вы можете (сейчас) увидеть, вы пропускаете ); в строке до последней строки, чтобы завершить вызов click.

Как только вы исправите это, отдельно в этой строке будет ошибка: 

$("#content").load("file_map.php", Hide_Load());
//                                here -----^^

Как и любой другой вызов функции, вы вызываете Hide_Loadи передают возвращаемое значение в load.Если вы хотите, чтобы Hide_Load был обратным вызовом завершения, вы не хотите вызывать его, вы просто хотите передать ссылку на функцию - исключите (): 

$("#content").load("file_map.php", Hide_Load);

С () вы как будто вызываете $("#content").load("file_map.php", undefined);, поскольку результат вызова функции, которая не использует return, равен undefined.

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

Нет похожих вопросов

...