Отображение страницы Google Map через jQuery AJAX - PullRequest
0 голосов
/ 02 июня 2011

Вот что я пытаюсь сделать.

Я использую плагин для всплывающей подсказки jQuery под названием jTip (http://www.codylindley.com/blogstuff/js/jtip/).

Этот плагин эффективно загружает другую страницу в отображаемую подсказку.

Итак, я создал другую страницу, на которой есть небольшая карта Google. На этой странице нет ничего особенного, она просто отображает карту Google с одним маркером.

Ссылка на страницу карты Googleнаписано, как показано ниже.

<a  href="my_ajax_page.php?width=375" class="jTip" id="one" name="This is a tooltip header">Click here!</a>

Если я перехожу на эту страницу напрямую, то страница отображается нормально. Однако с помощью плагина всплывающей подсказки карта больше не отображается. Страница карты выглядит следующим образом.

<!DOCTYPE html>
<html>
  <head>
  <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
  <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
  <script type="text/javascript">
    function initialize() 
    {
        var latlng = new google.maps.LatLng(35, 101);
        var myOptions = { zoom: 15, center: latlng, 
                          mapTypeId: google.maps.MapTypeId.ROADMAP };
    var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

    var marker = new google.maps.Marker( { position:latlng, 
                                               map: map, 
                                               animation: google.maps.Animation.DROP });   

    }
  </script>
</head>
<body>
  <div id="map_canvas" style="width:300px;height:300px"></div>
</body>
</html>

Какие-либо предложения о том, как это можно сделать?

Ответы [ 2 ]

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

Я бы предложил использовать Google Maps API для этого:

http://code.google.com/apis/maps/documentation/javascript/

Я успешно реализовал это с помощью пользовательского интерфейса jQuery на этом сайте:

http://www.exploresouthernindiana.com/wheretosleep.php?s2=servicelink.serviceid%3D4&submit=Submit

Приглашаем вас взглянуть на sabramedia.js, где код взаимодействует с Google API.

Примечание. Я не проектировал сайт.Я просто установил для них диалог карты.

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

Заставьте jTip открыть новую страницу в iframe или создайте другую страницу, состоящую из iframe страницы с картой, и загрузите эту страницу в jTip.

Если вы не хотите использовать iframes, загляните в Карты Google Асинхронная загрузка API Javascript .

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