Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
armplinker opened this issue Nov 8, 2018 · 1 comment
Open

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

armplinker opened this issue Nov 8, 2018 · 1 comment

Comments

@armplinker
Copy link

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
Copy link
Author

Forgot to state this is Google Maps, v3 quarterly update

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant