API Карт Google и JQuery Слайд Не корректно инициализировать карту

Проблема, с которой я сталкиваюсь, связана с инициализацией карт Google api. Когда у меня есть карты api в нормальном div, который установлен для отображения, он отлично работает и переключается вверх и вниз, но когда я устанавливаю отображение на none, он не загружается правильно. Карта только загружается на полпути вниз, а пин-образ не отображается. Есть ли работа для этого, или это просто не будет работать в слайде переключения, который изначально не отображается.API Карт Google и JQuery Слайд Не корректно инициализировать карту

Пример страницы, которую я создал, приведен ниже.

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> 
<script type='text/javascript' src='scripts/jscripts/jquery-1.4.js'></script> 

<style type="text/css"> 
.slideTogglebox{ 
    float:left; 
    padding:8px; 
    margin:16px; 
    border:1px solid red; 
    width:500px; 
    height:350px; 
    background-color:#000000; 
    color:white; 
    display:none; 
} 
.clear{ 
    clear:both; 
} 
</style> 

</head> 

<body> 
<?php 
$url ="http://maps.googleapis.com/maps/api/geocode/xml?address=PL329YN&sensor=false"; 
$getAddress = simplexml_load_file($url); 
$lat = $getAddress->result->geometry->location->lat; 
$lng = $getAddress->result->geometry->location->lng; 
?> 

<div class="clear"> 
<h3>slideToggle() example</h3> <a href="javascript:slideToggle()" id=slideToggle>Click Me</a> 
<br/> 
<div class="slideTogglebox" id='map_canvas'> 

</div> 

</div> 

<script type="text/javascript"> 

function initialize() { 

    <?php 
    print "var lat = $lat;"; 
    print "var lng = $lng;"; 
    ?> 

    var latlng = new google.maps.LatLng(lat, lng); 
    var myOptions = { 
     zoom: 10, 
     center: latlng, 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    }; 
    var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); 

    var image = 'images/map/pin_green.png'; 
    var myLatLng = new google.maps.LatLng(lat, lng); 
    var beachMarker = new google.maps.Marker({ 
     position: myLatLng, 
     map: map, 
     icon: image 
    }); 
} 

var init = false; 

$("#slideToggle").click(function() { 

    if (!init) { 
     initialize(); 
     init = true; 
    } 
    $('.slideTogglebox').slideToggle('slow'); 
}); 


</script>

источник

2011-12-14 aHunter

Возможно, возникла проблема с новыми v3 api и jquery. Кажется, он работает с v2 карт Google api без проблем.

Поэтому, чтобы исправить проблему, я вызвал функцию initialize после переключения div. Затем я установил фон в CSS, чтобы он соответствовал фону на странице, чтобы он исчезал после переключения.

<script type="text/javascript"> 

$("#slideToggle").click(function() { 

    $('.slideTogglebox').slideToggle(function initialize() { 

     <?php 
     print "var lat = $lat;"; 
     print "var lng = $lng;"; 
     ?> 

     var latlng = new google.maps.LatLng(lat, lng); 
     var myOptions = { 
      zoom: 10, 
      center: latlng, 
      mapTypeId: google.maps.MapTypeId.ROADMAP 
     }; 
     var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); 

     var image = 'images/map/pin_green.png'; 
     var myLatLng = new google.maps.LatLng(lat, lng); 
     var beachMarker = new google.maps.Marker({ 
      position: myLatLng, 
      map: map, 
      icon: image 
     }); 
    }); 
}); 


</script>

источник

2011-12-14 17:12:25 aHunter

Было бы показаться ответ может быть простым. Инициализируйте карту только тогда, когда отображается div, который должен содержать карту. Поместите обратный вызов в проверку вызова .slideToggle(), если div видимый и нет карты. Если да, загрузите карту (вы можете также отключить действия события клика при загрузке карты). Вы также можете рассмотреть возможность создания map_canvas дочернего элемента slideToggleBox (вместо самого слайд -oggleBox) на всякий случай, который влияет на реакцию карты и т. Д.

BTW, что с <a href="javascript:slideToggle()" ... >, когда вы уже добавляете событие click через jQuery?

источник

2011-12-14 16:07:01 JayC

Вы также можете просто оживить css (непрозрачность, высота), не используя дополнительный обратный вызов в js. Работает как шарм. Пока div, содержащий карту, отображается в блоке, вы в порядке с этим методом.

источник

2013-04-23 16:28:25 Timo

API Карт Google и JQuery Слайд Не корректно инициализировать карту

ответ

Смежные вопросы