Google Place Autocomplete API

Hi I have troubles trying to use Google Place Autocomplete API inside a form. One of the field of the form is a input type=“text”, that should be autocompleted. It worked in bootstrap, but when I tried to do the same in F7 I found that input is not autocompleted.

on the form I added

<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?libraries=places&sensor=false"></script>

---

In the form my field is

      <li>
        <div class="item-content">
          <div class="item-media"><i class="icon icon-form-place"></i></div>
          <div class="item-inner">
            <div class="item-title label">Lugar</div>
            <div class="item-input">
              <input id="myplace" type="text" />
            </div>
          </div>
        </div>
      </li>

---

on the javascript

$$(document).on(‘pageInit’, function (e) { var page = e.detail.page; // other pages initialization if (page.name === ‘myform’) { function placeChanged() { console.log(‘placeChanged’); } var input = $$(‘#myplace’)[0]; var autocomplete = new google.maps.places.Autocomplete(input); google.maps.event.addListener(autocomplete, ‘place_changed’, placeChanged); }

});

First (I don’t know why) my input included autocomplete=“off” (google added) I am receiving the autocomplete info, but it’s not filled in the input box.

PD: I include some of your form icons in svg in case that you want to include in Framework 7

i.icon.icon-form-name2 { width: 29px; height: 29px; background-image: url(“data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 58 58'><rect fill='%238e8e93' width='58' height='58' rx='10' ry='10'/><path fill='%23fff' d='M6 41v-3l8-4v-2s-1-2-1-3c-1-3-2-7 1-9 1-1 2-2 4-2s3 1 4 2c3 2 3 6 2 9-1 1-2 3-3 3v2l10 4v3h-25zM36 37h17.5v2h-17.5zM32 28h21v2h-21zM29 19h24.5v2h-24.5z'/></svg>”); }

i.icon.icon-form-email2 { width: 29px; height: 29px; background-image: url(‘data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 58 58"><rect fill="%238e8e93" width="58" height="58" rx="10" ry="10"/><path fill="%23fff" d="M32 36c-1 0-2 1-3 2h-6c0-1-1-2-2-3s-1-3-1-4c0-2 1-4 2-6s2-3 3-4c2-1 3-1 4-1h3c1 1 2 2 2 3l1-3h3l-2 12c-1 1-1 2-1 2v1l1 1 3-1 3-4c1-2 1-3 1-5s0-4-1-5c-1-2-3-3-5-4s-4-2-6-2c-3 0-6 1-8 2s-4 3-5 5c-1 3-2 5-2 8s1 5 2 7 3 4 5 5c3 1 5 1 8 1s6 0 8-1 3-2 4-4h3c0 1-1 3-3 4-1 1-3 2-5 3s-4 1-7 1c-2 0-5 0-7-1l-6-3c-1-1-2-3-3-5s-1-4-1-7c0-2 0-5 1-8 2-3 4-5 6-7 3-2 6-2 10-2 3 0 5 0 7 1 3 2 5 3 6 6 1 2 2 4 2 6 0 3-2 6-4 9-2 2-4 4-7 4l-2-1s-1 0-1-1v-1zm-9-5c0 2 1 3 2 4 0 1 1 1 2 1s1 0 2-1c1 0 2-1 2-1l2-3v-4c0-1 0-3-1-3-1-1-1-2-3-2 0 0-1 0-2 1l-2 2s-1 1-1 3l-1 3z"/></svg>’); }

i.icon.icon-form-tel2 { width: 29px; height: 29px; background-image: url(‘data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 58 58"><rect fill="%238e8e93" width="58" height="58" rx="10" ry="10"/><path fill="%23fff" d="M10 17c0 8 7 16 12 21 6 5 13 9 21 8l5-6c1-1 1-2 0-3l-7-4c-1 0-2 0-3 1l-3 3c-7-5-10-7-15-13l3-3c1-1 1-2 0-3l-5-7c-1-1-2-1-3 0l-5 6z"/></svg>’); }

i.icon.icon-form-calendar2 { width: 29px; height: 29px; background-image: url(‘data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 58 58"><rect fill="%238e8e93" width="58" height="58" rx="10" ry="10"/><path fill="%23fff" d="M29 46h-14v-2c0-1 1-2 2-3l4-4 3-2 2-2s0-1 1-1v-2c0-1 0-2-1-3l-1-1c-1-1-2-1-3-1-3 0-4 2-5 5h-2c0-2 1-4 2-5 2-1 3-2 5-2s4 1 5 2 2 3 2 5c0 1 0 2-1 3 0 1-1 2-2 2l-4 4c-3 2-4 3-5 5h12v2zM42 46h-2v-19c-2 2-4 3-6 4v-2c4-2 6-4 7-6h1v23zM27 17h-1v-9l-3 9h-1l-3-9v9h-1v-10h1l3 8 4-8h1zM35 13c0 1 0 2-1 3 0 1-1 1-2 1h-1l-1-1c-1 0-1-1-1-1v-4l1-1 2-1c1 0 2 1 2 1 1 1 1 2 1 3zm-1 0v-1c0-1-1-1-1-1 0-1-1-1-1-1-1 0-1 0-2 1v4c1 1 1 1 2 1h1l1-1v-2zM42 17h-1v-6c0-1-1-1-1-1h-1s0 1-1 1v6h-1v-7h1v1c0-1 1-2 2-2s2 1 2 3v5z"/></svg>’); }

i.icon.icon-form-place { width: 29px; height: 29px; background-image: url(‘data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 58 58"><rect fill="%238e8e93" width="58" height="58" rx="10" ry="10"/><path fill="%23fff" d="M10 31c1-2 3-3 5-4s4-2 6-1l6-13c-4-2-1-9 3-7l17 8c4 2 1 9-3 7l-7 13c2 1 3 2 4 5 0 2 0 4-1 6 0 1-1 2-2 1l-11-5-8 12c0 1-2 0-1-1l4-13-11-5c-1-1-1-2-1-3zm15-4c0 1 1 2 2 1l5-12c1-1-1-2-1 0l-6 11z"/></svg>’); }

[nolimits4web]

This means that on the moment when you add these listeners the ‘.pac-container’ is not in DOM yet. So you can try to use google api’s and add these listeners when this container appear in DOM or you can just try this live listener instead:

$$('body').on('touchend','.pac-container', function(e){e.stopImmediatePropagation();})

[nolimits4web]

Ok, i figured this out. The autocomplite popup just appears below F7 views and pages add this css rule:

.pac-container {
  z-index:20000;
}