google map неправильно работает

Question

Я столкнулся с проблемой на картах Google, я использую google api V3 и используя несколько карт на странице, все карты прекрасно работают на отдельной странице, но когда я использую на своем веб-сайте, это выглядит изображение ниже

на самом деле карта по умолчанию скрываются, когда пользователь нажимает на ссылку дополнительная информация, то карты скользят вниз (с помощью slideToggle());

$(document).ready(function() { 
    $maps = $('.map_canvas'); 
    $maps.each(function(index, Element) { 
     $infotext = $(Element).children('.infotext'); 

     var myOptions = { 
      'zoom': parseInt($infotext.children('.zoom').text()), 
      'mapTypeId': google.maps.MapTypeId.ROADMAP 
     }; 
     var map; 
     var geocoder; 
     var marker; 
     var infowindow; 
     var address = $infotext.children('.address').text() + ', ' 
       + $infotext.children('.city').text() + ', ' 
       + $infotext.children('.state').text() + ' ' 
       + $infotext.children('.zip').text() + ', ' 
       + $infotext.children('.country').text() 
     ; 
     var content = '<strong>' + $infotext.children('.location').text() + '</strong><br />' 
       + $infotext.children('.address').text() + '<br />' 
       + $infotext.children('.city').text() + ', ' 
       + $infotext.children('.state').text() + ' ' 
       + $infotext.children('.zip').text() 
     ; 
     if (0 < $infotext.children('.phone').text().length) { 
      content += '<br />' + $infotext.children('.phone').text(); 
     } 

     geocoder = new google.maps.Geocoder(); 
     geocoder.geocode({'address': address}, function(results, status) { 
      if (status == google.maps.GeocoderStatus.OK) { 
       myOptions.center = results[0].geometry.location; 
       map = new google.maps.Map(Element, myOptions); 
       marker = new google.maps.Marker({ 
        map: map, 
        position: results[0].geometry.location, 
        title: $infotext.children('.location').text() 
       }); 
       infowindow = new google.maps.InfoWindow({'content': content}); 
       google.maps.event.addListener(map, 'tilesloaded', function(event) { 
        infowindow.open(map, marker); 
       }); 
       google.maps.event.addListener(marker, 'click', function() { 
        infowindow.open(map, marker); 
       }); 
      } else { 
       alert('The address could not be found for the following reason: ' + status); 
      } 
     }); 
    }); 
}); 

здесь HTML markeup но данные в дивы идет динамически из базы данных

<div class="map_canvas"> 
       <div class="infotext"> 
        <div class="location">Chácara do João</div> 
        <div class="address">Av andrade neves, 2333</div> 
        <div class="city">Campinas</div> 
        <div class="state">SP</div> 
        <div class="zip">33401-3995</div> 
        <div class="country">USA</div> 
        <div class="phone">(561) 659-4050</div> 
        <div class="zoom">1</div> 
       </div> 
      </div> 

Answer 1

Вы должны вызвать карту, чтобы изменить размер, когда вы изменили размеры Div

google.maps.event.trigger(map, 'resize'); 

от ссылки api - https://developers.google.com/maps/documentation/javascript/3.exp/reference

Разработчики должны инициировать это событие на карте, когда div изменяет размер: google.maps.event.trigger (map, 'resize').

---

С вашим примером кодом вы можете сохранить ссылку на соответствующую карту на этом элемент при ее создании:

$(Element).data('gmap', map); 

затем получить доступ к карте, когда вы живой элемент:

$('.map_canvas').first().slideDown(function(){ 
    var map = $(this).data('gmap'); 
    google.maps.event.trigger(map, 'resize'); 
})