Using initMap and initAutocomplete on same html page google maps

Viewed 17670

I have a webpage where I would like to use both place autocomplete as well as google map with marker. User can search for an address in place autocomplete. Lat-long data for marker comes from DB and this doesn't change. The problem is either map works or place autocomplete, but not both, and the issue is related to callbacks.

From google docs, I've included both callbacks in separate API calls:

<script src="https://maps.googleapis.com/maps/api/js?key=[API KEY]&signed_in=true&libraries=places&callback=initAutocomplete" async defer></script>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=[API KEY]&callback=initMap"></script>

But this throws error on console, and nothing works.

Error: You have included the Google Maps API multiple times on this page. This may cause unexpected errors.

My question is: How multiple callbacks can be passed to Google API?

2 Answers
Related