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

Тема в разделе "Другие языки", создана пользователем KillDead, 16 апр 2011.

Модераторы: Цукер
  1. KillDead

    KillDead

    Регистр.:
    11 авг 2006
    Сообщения:
    883
    Симпатии:
    540
    Столкнулся с багом- делаю карту и задаю кординаты маркера

    PHP:
        initPlaceMapXY('37.53038000000004''55.7014376''desc');
     
    function 
    initPlaceMapXY(lnglatname){

        var 
    point = new google.maps.LatLng(latlng);

        var 
    mapOptions = {
            
    zoom15,
            
    centerpoint,
            
    mapTypeIdgoogle.maps.MapTypeId.ROADMAP,
            
    panControlfalse,
            
    zoomControltrue,
            
    scaleControlfalse,
      
            
    mapTypeControlfalse,
            
    streetViewControlfalse
        
    };

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

        var 
    marker = new google.maps.Marker({
            
    mapmap,
            
    positionpoint,
            
    titlename
        
    });

    }
    в результате в некоторых браузерах (хром напр) карта не грузится полностью и не центрируется- наблюдаю [​IMG] маркер уехал влево, область справа не загружается, при скролле не пропадает. А вот при рефреше страницы- всё нормально.
     
  2. polyetilen

    polyetilen Заблокирован

    Регистр.:
    10 авг 2006
    Сообщения:
    814
    Симпатии:
    474
    с картой всё нормально
    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>
    
    онлайн пример с серой частью
    http://jsfiddle.net/polyetilen/Q2FE8/
     
    KillDead нравится это.
  3. KillDead

    KillDead

    Регистр.:
    11 авг 2006
    Сообщения:
    883
    Симпатии:
    540
    Спасибо, уже решил проблему- действительно был баг со стилями- хотя карта отрисовывалась в видимом слое и я поставил событие jquery чтобы карта создавалась только после загрузки всего документа- стиль брался откудато ещё. Помогло небольшое изменение верстки.
     
  4. penguen

    penguen

    Регистр.:
    7 янв 2007
    Сообщения:
    821
    Симпатии:
    93
    Мужики. А как работать с гугл мэпом? Ничерта не понятно.
     
  5. polyetilen

    polyetilen Заблокирован

    Регистр.:
    10 авг 2006
    Сообщения:
    814
    Симпатии:
    474