Rolovanie cez mapu Google

Príspevok od používateľa **Grim** » 14 okt 2015, 8:12

Ahojte

Mám problém na firemnej stránke. V kontaktoch máme mapu, ale keď sa cez ňu roluje kolečkom, tak v momente, kedy pristane kurzor na mape, tak prestane stránka rolovať. Potreboval by som, aby to fungovalo tak, že zoomovanie začne fungovať až po kliknutí do mapy a prestane fungovať, keď sa kurzorom odíde z mapy. Našiel som plno funkčných riešení, ale mne sa nepodarilo na stránke rozbehať ani jedno a preto sa obraciam na vás s prosbou o pomoc.

Tu sú stránky z ktorých som čerpal:

http://stackoverflow.com/questions/2199 ... oogle-maps
http://stackoverflow.com/questions/2476 ... l-behavior

a o ktorú mapu sa jedná? Tá na spodu stránky? Lebo mne ju nezoomuje ani v chrome ani vo firefoxe. Dokonca vôbec nefunguje (ani tlačítka) a javí sa ako keby to bol obrázok. Úplne nefunkčná

Príspevok od používateľa **Grim** » 14 okt 2015, 8:30

Áno o tú na spodku. To že nefunguje, je teoreticky v poriadku, keby po kliknutí začala fungovať. Ale nezačne. Skúšal som rôzne riešenia, ale môj jediný úspech bol len to, že som mapu zablokoval. Potrebujem aby fungovalo to s tým kliknutím a odídením myši.

neviem ako si to riešil, nekukal som tie linky zo stacku, ale osobne by som to asi skúsil prekryť divom. Absolútnu pozíciu na spodok, width 100%, height podla výšky (neviem na koľko si ju definoval) a z-index na vela. A na tento div nabindovať onclick event ktorý ho zruší. Na mapu (iframe) nabindovať mouseout event ktorý ten div zase zobrazí.

Príspevok od používateľa **Grim** » 14 okt 2015, 9:21

Ďakujem vyskúšam. Ešte mám jednu otázku. Ako dynamicky rozdeliť stránku na tri časti? Potrebujem mať tri mapy vedľa seba, pod každým kontaktom jednu, ale aby sa dynamicky rozťahovali/stahovali pri zmene šírky.

si robíš prdel?
https://jsfiddle.net/g996v9Lz/1/

Príspevok od používateľa **Grim** » 14 okt 2015, 12:13

Aj som si myslel, ale nefungovalo mi to, keď som priamo iframe nastavil width: 33%. Môžem ťa poprosiť, či by si mi nenapísal presne tie javascript eventy onclick a onmouseout, tak ako ich mám použiť v kóde? Určite by som na to prišiel časom aj sám, ale momentálne si hrajkanie s kódom nemôžem dovoliť. Kedysi som to vedel, ale dlho som sa tomu nevenoval. ďakujem

píšem len z hlavy, tiež nemám na to čas to skúšať...

css:

Kód: Vybrať všetko

div.mapCover{
   width: 100%;
   z-index:1000;
   height: 100%;
   position: absolute;
   bottom: 0px;
}

html (do divu google-map):

Kód: Vybrať všetko

<div class="mapCover"></div>

js:

Kód: Vybrať všetko

$(document).ready(function(){
   $(".mapCover").click(function(){
       $(this).hide();
   });
   $("#google-map").mouseout(function(){
       $(".mapCover").show();
   });
});

Príspevok od používateľa **Grim** » 14 okt 2015, 14:11

Nemohol by ten javascript byť vnorený v HTML? takto?

Kód: Vybrať všetko

<div class="mapCover" onclick="this.hide()"></div>
<iframe id="google-map" onmouseout="document.getElementByClass("mapCover").show()"
src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2650.483392699875!2d17.595788315807678!3d48. 37044974289164!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2 !1s0x476b5f82520ce0d3%3A0xbed981428466a4f3!2sBernol%C3%A1 kova+7821%2F2%2C+917+01+Trnava!5e0!3m2!1ssk!2ssk!4v1444820465438" width="100%" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>

mohol, ale toto nie je korektny zápis. Keď, tak

Kód: Vybrať všetko

onclick="$(this).hide()"

čo tým ale získaš? Nie je lepšie mať všetok javascript pokope? Z rovnakého dôvodu sa aj css píše do jedného súboru, a nie inline ku každému elementu

Príspevok od používateľa **Grim** » 14 okt 2015, 14:23

Bolo by to pekné a obvykle sa toho držím, ale z nejakého dôvodu mi žiadny javascript nefunguje, ani z tých stránok, čo som sem dal...a ani ten tvoj. Dúfam, že v tomto zápise bude fungovať.

//autoeditácia príspevku (14 Okt 2015, 14:28)
//nefunguje

//autoeditácia príspevku (14 Okt 2015, 14:41)
//skúsil som ešte raz skopírovať presne tento kód...nefunguje.

http://jsfiddle.net/0u6v4jnp/

a dal si ho do onloadu? Tak ako som ho zapísal ja do $(document).ready() ?

Príspevok od používateľa **Grim** » 14 okt 2015, 14:51

Áno, mal som to tak a nešlo to. Tak som to potom prerobil tak, že som to dal rovno do toho a aj tak to nešlo. A tento kód čo mám teraz ten je z tej stránky to neni tvoje. Tam to tak napísané nebolo.

nebolo to tam tak napísané, lebo je to fiddler. Bolo tam vlavo zvolené že sa ten kod má spustiť na onload

Príspevok od používateľa **Grim** » 14 okt 2015, 15:31

Takže takto? Lebo nefunguje.

Kód: Vybrať všetko

$(document).ready(function(){

// Disable scroll zooming and bind back the click event
  var onMapMouseleaveHandler = function (event) {
    var that = $(this);

    that.on('click', onMapClickHandler);
    that.off('mouseleave', onMapMouseleaveHandler);
    that.find('iframe').css("pointer-events", "none");
  }

  var onMapClickHandler = function (event) {
    var that = $(this);

    // Disable the click handler until the user leaves the map area
    that.off('click', onMapClickHandler);

    // Enable scrolling zoom
    that.find('iframe').css("pointer-events", "auto");

    // Handle the mouse leave event
    that.on('mouseleave', onMapMouseleaveHandler);
  }

  // Enable map zooming with mouse scroll when the user clicks the map
  $('.maps.embed-container').on('click', onMapClickHandler);
});

namiesto

Kód: Vybrať všetko

$(document).ready(function(){

daj

Kód: Vybrať všetko

jQuery(document).ready(function($){

Príspevok od používateľa **Grim** » 14 okt 2015, 16:50

Konečne to funguje. Ďakujem. Zajtra budem riešiť umiestnenie troch máp vedľa seba tak, aby tento efekt fungoval na každej zvlášť.

awtt · Príspevok od používateľa **awtt** » 15 okt 2015, 11:08

Inac to skrolovanie mapy sa da vypnut v google maps api takze ziadne prekryvanie nepotrebujes.

Rolovanie cez mapu Google

Rolovanie cez mapu Google

Re: Rolovanie cez mapu Google

Re: Rolovanie cez mapu Google

Re: Rolovanie cez mapu Google

Re: Rolovanie cez mapu Google

Re: Rolovanie cez mapu Google

Re: Rolovanie cez mapu Google

Re: Rolovanie cez mapu Google

Re: Rolovanie cez mapu Google

Re: Rolovanie cez mapu Google

Re: Rolovanie cez mapu Google

Re: Rolovanie cez mapu Google

Re: Rolovanie cez mapu Google

Re: Rolovanie cez mapu Google

Re: Rolovanie cez mapu Google

Re: Rolovanie cez mapu Google

Re: Rolovanie cez mapu Google

Re: Rolovanie cez mapu Google