jaukia / zoomooz

An easy-to-use jQuery plugin for making zooming web pages.
http://janne.aukia.com/zoomooz/
1.79k stars 275 forks source link

Cannot seem to use this within a Google Maps InfoWindow? #127

Open armplinker opened 6 years ago

armplinker commented 6 years ago

I have a popup window (InfoWindow) attached to my map markers, which shows details about a location when the marker is clicked. The stuff looks fine in the InfoWindow. In the content I have created 4 distinct 'items' which are div 's enclosing h4 text areas. I have marked these divs as zoomTarget and surrounded all with zoomViewport and zoomContainer. This all seems to be correct (?) but when I click on the area that is supposed to be a zoomTarget, nothing happens - the click is not recognized apparently.

Here is the dynamically generated InfoWindow html. This is 'set' from a string. Basically the InfoWindow html propertyis replaced with this. SHows up fine but just sits there.... InfoWindow is size

<div class="map-content"><div class="information-window-container"><div class="zoomViewport" style="display:flex; width:100%;"><div class="zoomContainer" style="display:flex; flex-flow:column wrap; width:100%;"><div id="hdr-item" class="information-window-header"><h3>KDOT ID: 000000000130310</h3><h3>LPA ID: OS 31 NAME: _<br></h3> </div><div id="info-item1" class="information-window-data zoomTarget"><h4> Carries: CR 14 over Feature: BLUFF CREEK<br>Main Span Design : Slab<br>Main Span Material : 7 Wood or Timber<br>KDOT Structure Type : TSSC-Timber Structural Slab, Cont.<br>Length (ft) : 241.1<br>Owner (bridgegroup) : Clark CYG<br>County (NBI) : Clark<br>Place Name (NBI) : 00000 - Unknown<br>Owner (NBI) : County Hwy Agency<br>Custodian (NBI) : County Hwy Agency</h4></div><div id="info-item2" class="information-window-data zoomTarget"><h4>Last Inspected : 11-02-2017<br>Inspection ID (INSPKEY) : TCTB<br>Condition Ratings (NBI) : 3|3|5|N<br>Good/Fair/Poor (NBI): 3-Poor<br>Last Rated (NBI) : 1/1/1901 12:00:00 AM<br>Inv/Opr Ratings (NBI) : IR: .6(-1) - OR: 4 (-1)<br>Open/Posted/Closed (NBI) : P Posted for load<br>Posting (NBI) : 0 &gt;39.9% below</h4></div><div id="info-item3" class="information-window-data zoomTarget"><h4>Latitude (NBI) : 372457.00<br>Longitude (NBI) : 995203.20<br>Latitude (deg.min.sec) : 37°24'57.00"<br>Longitude (deg.min.sec) : 099°52'03.20"<br>Latitude (calc) : 37.4158333333333<br>Longitude (calc) : -99.8675555555556<br>Latitude (gps) : 37.415833<br>Longitude (gps) : -99.867556</h4></div></div></div><div id="navigation"><div class="zoomButton" id="zoomPrev" data-type="prev" data-root=".zoomViewport"></div><div class="zoomButton" id="zoomNext" data-type="next" data-root=".zoomViewport"></div></div></div></div>

here is the css ` .information-window-container { display: -webkit-flex; -webkit-flex-flow: column wrap; display: flex; flex-flow: column wrap; justify-content: flex-start; width: 600px; height: 300px; }

    .information-window-header {
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-flex-flow: column wrap;
        -ms-flex-direction: column;
        -ms-flex-wrap: wrap;
        flex-flow: column wrap;
    }

    .information-window-data {
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        position: relative;
        font-size: smaller;
        text-align: left;
        padding: 4px;
    }

`

armplinker commented 6 years ago

Forgot to state this is Google Maps, v3 quarterly update