How to make google underlist shown in modal

Question

I am new in this field and trying to implement google autocomplete on my app, like this https://plnkr.co/edit/GUs28h2ncbbhx8dEmiz5?p=preview. This is a very simple example just to test google map. But the underlist of autocomplete is always outside modal, you can press login and input the address, you can see it. Do you know why is that?

<!DOCTYPE html>
<html lang="en" ng-app='myApp'>
<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=places"></script>
    <script src="all.js"></script>
    <!--link rel="stylesheet" href="main.css"-->
</head>
<body ng-controller="mainControl as mc">

    <div>
        <div ng-hide="mc.values.logged">

            <button type="button" class="btn" data-toggle="modal" data-target=".logIn">Log In</button>
        </div>
    </div>

    <div class="logIn modal fade" id="logIn" ng-controller='logInControl as lc'>
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-body">
                    <form id="eventForm" name="eventForm" ng-submit="ec.submit()">

                        <label for="locationTextField">Location</label>

                <input id="locationTextField" type="text" size="50">

                    </form>

                </div>

            </div>
        </div>

    </div>



</body>
</html>

BTW, I have another question I have success apply for one API-key, but I can't use it by replace the link with

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBDhab7yuMx-2lllD8kwZIF-yIVGnsCx-0&libraries=places"></script>

Coud you tell me why?

score 0 · Answer 1 · edited May 23 '17 at 11:53

Based from issue #4160 logged in Issues tracker, you may try putting the google places autocomplete dropdown results above the bootstrap modal 1050 zindex with this:

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

Please also check suggested solutions in these related SO posts:

On the other hand, with regards to your API key, please check the error code or message that appears in your console then check how to fix it in Google Maps JavaScript API Error Codes and in Google Maps JavaScript API Error Codes for Developers.

This invalid API key related SO post might also help you.

Happy coding!

How to make google underlist shown in modal

1 Answers1