Как загрузить карту Google с помощью jQuery на якорь нажмите - PullRequest
Новая
       2

Как загрузить карту Google с помощью jQuery на якорь нажмите

0 голосов
/ 13 октября 2011

Я пытаюсь загрузить карту Google на якорь нажмите.Ниже приведены подробности.

У меня есть index.aspx страница, где у меня есть один тег привязки и div "divLoadMap" 

<a class="loadMap" href="map.aspx">Load Map</a>
<div id="divLoadMap">
</div>

И у меня есть map.aspx , в котором есть детали карт.Ниже приведен код: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="_LANGUAGE" xml:lang="_LANGUAGE">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Simple Jquery CSS Tabs and V3 Google Maps</title>

     <script type="text/javascript" src="/common/js/jquery-1.5.2.min.js"></script>
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>

    <script type="text/javascript" language="javascript">

    $(document).ready(function() {

      function initialize() 
        {     
            var latlng = new google.maps.LatLng(25.294371, 55.332642);     
            var myOptions = {       zoom: 8,       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,
                title: 'Dubai'
            });
            var contentString = 'Dubai';

            var infowindow = new google.maps.InfoWindow({
                content: contentString,
                maxWidth: 50
            });
            google.maps.event.addListener(marker, 'click', function() {
              infowindow.open(map,marker);
            });

        }  

     initialize(); 

    });

    </script>

</head>
<body>
   <form id="mapform" >
   <div id="map_canvas" style="width: 500px; height: 500px">
   </div>
   </form> 
</body>
</html>

Теперь я хочу загрузить эту карту по щелчку тега привязки, который присутствует на index.aspx .

Пожалуйста, предложите !!Буду признателен, если вы можете получить пример кода для вышеуказанной проблемы.

Ответы [ 3 ]

0 голосов
/ 19 октября 2011

Я подумал, что подход ниже.

  1. Объявите div с id = 'GoogleMapContainer'
  2. Сделайте его по умолчанию отображением: нет.объявите iframe и присвойте свойство src этого iframe странице index.aspx.
  3. Теперь при щелчке тега привязки вызовите функцию javascript, которая внутренне вызовет модальный диалог запроса для объявленного выше div.
  4. thisприведет к появлению всплывающего окна, содержащего карту Google.

7. 

<div id="GoogleMapContainer" title="Google Map Container" style="display: none;">
        <iframe id="frameGoogleMapContainer" height="100%" width="100%" src="index.aspx"
            frameborder="0" scrolling="auto"></iframe>
</div>

  1. Вызовите функцию javascript по щелчку тега привязки.и в этой функции JavaScript напишите этот код:

    $ jq ("#GoogleMapContainer"). dialog ({modal: true, width: 750,
    title: 'Google Map', изменяемый размер: false,
    open: function (type, data) {$ jq (this) .parent (). AppendTo ("form");}});

Укажите, правильно ли этоподход или мне нужно сделать некоторые модификации !!

0 голосов
/ 19 октября 2011

Используйте этот способ .... 

      function initialize() 
        {     
            var latlng = new google.maps.LatLng(25.294371, 55.332642);     
            var myOptions = {       zoom: 8,       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,
                title: 'Dubai'
            });
            var contentString = 'Dubai';

            var infowindow = new google.maps.InfoWindow({
                content: contentString,
                maxWidth: 50
            });
            google.maps.event.addListener(marker, 'click', function() {
              infowindow.open(map,marker);
            });

        }  

    });

    </script>

Теперь просто вызовите эту функцию initialize () при щелчке привязки или нажатии кнопки .....

0 голосов
/ 17 октября 2011

Возможно, вы захотите попробовать плагин лайтбокса, который обрабатывает фреймы. Pirobox является одним из примеров.

этот плагин использует атрибут rel для установки параметров лайтбокса.В вашем случае вы бы использовали параметры iframe- width-height .Ваш код будет выглядеть примерно так: 

//using 'full' for width and height will make the lightbox fullscreen 
//or you can specify a width and height in pixels.
<a href="map.aspx" rel="iframe-full-full" class="pirobox_gall1" >Load Map</a>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

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

...