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
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 >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; }
`