[CSS] GoogleMap v3 не отрисовывает карту

KillDead

KillDead

Хранитель порядка
Регистрация
11 Авг 2006
Сообщения
894
Реакции
579
Столкнулся с багом- делаю карту и задаю кординаты маркера

PHP: 
    initPlaceMapXY('37.53038000000004', '55.7014376', 'desc');
 
function initPlaceMapXY(lng, lat, name){

    var point = new google.maps.LatLng(lat, lng);

    var mapOptions = {
        zoom: 15,
        center: point,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        panControl: false,
        zoomControl: true,
        scaleControl: false,
  
        mapTypeControl: false,
        streetViewControl: false
    };

    map = new google.maps.Map(document.getElementById("placemap"), mapOptions);

    var marker = new google.maps.Marker({
        map: map,
        position: point,
        title: name
    });

}
в результате в некоторых браузерах (хром напр) карта не грузится полностью и не центрируется- наблюдаю
0aefa91dca00.png
маркер уехал влево, область справа не загружается, при скролле не пропадает. А вот при рефреше страницы- всё нормально.
 
с картой всё нормально
HTML: 
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>google map</title>

<script type="text/javascript" src="http://maps.google.com/maps/api/js?language=ru&sensor=false"></script>
<script type="text/javascript">
var map;

function initPlaceMapXY(lng, lat, name){
    
    var point = new google.maps.LatLng(lat, lng);
    var mapOptions = {
        zoom: 15,
        center: point,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        panControl: false,
        zoomControl: true,
        scaleControl: false,
    
        mapTypeControl: false,
        streetViewControl: false
    };
    
    map = new google.maps.Map(document.getElementById("placemap"), mapOptions);

    var marker = new google.maps.Marker({
        map: map,
        position: point,
        title: name
    });
    
}
</script>


</head>

<body onload="initPlaceMapXY(37.53038000000004, 55.7014376, 'desc');">
  
  <div id="placemap" style="width:300px;height:300px;"></div>

</body>
</html>
про серые части знаю один вариант они появляются если инициализировать карту в спрятанном блоке (display:none), так что возможно проблемы с css стилями, может другие блоки перекрывают.

Пример с серыми частями
HTML: 
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>google map</title>

<script type="text/javascript" src="http://maps.google.com/maps/api/js?language=ru&sensor=false"></script>
<script type="text/javascript">
var map;

function initPlaceMapXY(lng, lat, name){
    
    var point = new google.maps.LatLng(lat, lng);
    var mapOptions = {
        zoom: 15,
        center: point,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        panControl: false,
        zoomControl: true,
        scaleControl: false,
    
        mapTypeControl: false,
        streetViewControl: false
    };
    
    map = new google.maps.Map(document.getElementById("placemap"), mapOptions);

    var marker = new google.maps.Marker({
        map: map,
        position: point,
        title: name
    });
    
}
</script>


</head>

<body onload="initPlaceMapXY(37.53038000000004, 55.7014376, 'desc');">
  
  <div id="placemap" style="width:300px;height:300px;display:none;"></div>
  
  когда карта инициализируется в спрятанном блоке будут проблемы, серые части, например 
  <a href="#" onclick="document.getElementById('placemap').style.display='block';return false;">показать блок</a>
  <br />
  надо сначала показать блок и дальше в нём инициализировать карту
  <a href="#" onclick="document.getElementById('placemap').style.display='block';initPlaceMapXY(37.53038000000004, 55.7014376, 'desc');return false;">показать блок и инициализировать карту</a>
  
</body>
</html>
Для просмотра скрытого содержимого вы должны войти или зарегистрироваться.
 
Спасибо, уже решил проблему- действительно был баг со стилями- хотя карта отрисовывалась в видимом слое и я поставил событие jquery чтобы карта создавалась только после загрузки всего документа- стиль брался откудато ещё. Помогло небольшое изменение верстки.
 
Мужики. А как работать с гугл мэпом? Ничерта не понятно.
 
Войдите или зарегистрируйтесь для ответа.
Назад
Сверху