CODEWITHSUNDEEP
javascriptjquerygoogle-mapsjquery-mobilegoogle-places-api
Christina
Christina

Reputation: 100

Google Map Places Auto-complete blocked by jQuery Mobile popup

It is easier to see what I mean by looking at this image: http://postimg.org/image/fcmo6pbvp/

I am trying to let the user input the address using the google maps places auto-complete JS function like this example.

It works, but the autocomplete text field, is blocked by the jQuery Mobile popup, just like the picture shown.

The HTML Look something like this:

            <li>

                <a href="#popupLocation" data-rel="popup" data-position-to="window"
                    class="ui-btn ui-corner-all ui-shadow ui-btn-inline ui-btn-a" data-transition="pop">
                    <h3>Location</h3>
                    <p id="locationSelectionString">London, UK</p>
                </a>


                <div data-role="popup" id="popupLocation" data-theme="a" class="ui-corner-all">

                        <div style="padding:10px 20px;">
                            <h3 style="margin-top: 0px; margin-bottom: 0px;">Location</h3>
                            <hr>
                            <table width="100%">
                                <tr>
                                    <input id="locationSelectionInput" onFocus="geolocate()" type="text" name="location" value="" placeholder="Enter a location" data-theme="a" style="margin-top: 0px; margin-bottom: 0px;">
                                </tr>
                                <tr>
                                    <td width="50%">
                                        <button style="margin-top: 0px; margin-bottom: 0px;" onclick="changeLocationCanceled();">Cancel</button>
                                    </td>
                                    <td width="50%">
                                        <button style="margin-top: 0px; margin-bottom: 0px;" onclick="changeLocation();">OK</button>
                                    </td>
                                </tr>
                            </table>
                        </div>
                </div>
            </li>

I will be so happy if someone can tell me what went wrong.

BTW, don't laugh at my code, this is my first JS app :p

Upvotes: 1

Views: 291

Answers (1)

Kumquat601
Kumquat601

Reputation: 106

It's too late for Christina. I hope to help other people struggling this issue.

My solution is just in you css file add code.

.pac-container{
    z-index: 9999 !important;
}

Upvotes: 1

Related Questions