Autor Zpráva
Leo3
Profil
Ahojte, chcel by som aby sa ciel na mape zarovnal na stred podla sirky stranky. Pouzivam Bootstrap3 a funguje to ked menim sirku mapy.
Ked stranku s mapou nacitam v uzkom okne, zobrazi ciel v strede mapy. To je dobre.
Ked stranku s mapou nacitam v maximalizovanom okne, zobrazi ciel v strede mapy. To je dobre.
Ked menim sirku stranky, automaticky meni, zarovnava ciel na stred. To je tiez dobre.
Lenze ked nacitam stranku v uzkom okne a potom maximalizujem okno, tak ciel nezarovna na stred. Ciel je posunuty vlavo.
Vedel by niekto poradit ako to zaarovnat na stred?
function initMap() {
  var mapCanvas = document.getElementById("kontaktMapa");
  var myCenter = new google.maps.LatLng(48.310538, 18.086242); 
  var mapOptions = {center: myCenter, zoom: 9, mapTypeId: 'hybrid'};
  var kontaktMapa = new google.maps.Map(mapCanvas, mapOptions);
  var marker = new google.maps.Marker({
    position: myCenter,
    animation: google.maps.Animation.BOUNCE
  });
  marker.setMap(kontaktMapa);

  myCenter = kontaktMapa.getCenter();
  google.maps.event.addDomListener(kontaktMapa, 'idle', function() {
    calculateCenter();
  });
  google.maps.event.addDomListener(window, 'resize', function() {
    kontaktMapa.setCenter(myCenter);
  });  
}
Pomohol som si s tymto navodom.
Leo3
Profil
Tak som to nakoniec nasiel tu. Na vycentrovanie mapy po maximalizovani okna treba pouzit event center_changed.
  kontaktMapa.addListener('center_changed', function() {
    window.setTimeout(function() {
      kontaktMapa.panTo(marker.getPosition());
    }, 0);
  });
Teraz to funguje tak ako ma. Dakujem Leo3 :)
weroro
Profil
Ešte by som ti odporučil testovať aj orientationchange. Nedá sa spoľahnúť, že zareaguje resize na mobiloch.
Leo3
Profil
Hladal som na internete co je to za event. Nasiel som to tu pekne vysvetlene. Len nechapem ako mi to pomoze. Lebo myslim ze ono to vracia String, bud portrait alebo landscape. Da sa pomocou tejto informacie nastavit ciel v strede mapy?
Skusal som to implementovat:
  kontaktMapa.addListener('orientationchange', function() {
    window.setTimeout(function() {
      kontaktMapa.panTo(marker.getPosition());
    }, 0);
  });
alebo takto
  google.maps.event.addEventListener(window, 'orientationchange', function(event) {
    kontaktMapa.setCenter(myCenter);
  });
No centrovanie s eventom orientationchange nefunguje.
weroro
Profil
Leo3:
Ja to mám urobené takto a funguje skvele.
/**
 * Google maps API v3 init
 */
function googleMapInit() {
    if (typeof google === 'undefined' || typeof google.maps === 'undefined') {
        console.log('Google Maps object not found.');
        return;
    }
    /** @type {Element} canvas */
    var canvas = document.getElementById('map');

    /** @type {object} position */
    var position = {lat: 48.214996, lng: 18.58887};

    var map = new google.maps.Map(canvas, {
        zoom: 15,
        center: position,
        scrollwheel: false
    });
    new google.maps.Marker({
        position: position,
        map: map
    });
    var markerCenter = map.getCenter();

    /** @type {number} orientationTimeout */
    var orientationTimeout;

    /**
     * @param {number} time
     */
    var handleResize = function (time) {
        time = time || 1;
        clearTimeout(orientationTimeout);
        orientationTimeout = setTimeout(function () {
            map.setCenter(markerCenter);
        }, time);
    };

    google.maps.event.addDomListener(window, 'resize', handleResize);
    google.maps.event.addDomListener(window, 'orientationchange', function () {
        handleResize(500);
    });
}

Vaše odpověď

Mohlo by se hodit

Neumíte-li správně určit příčinu chyby, vkládejte odkazy na živé ukázky.
Užíváte-li nějakou cizí knihovnu, ukažte odpovídajícím, kde jste ji vzali.

Užitečné odkazy:

Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm: