Using initMap and initAutocomplete on the same html google maps page

Question

I have a webpage where I would like to use both autocomplete and google map with marker. The user can search for an autocomplete address. Lat-long data for the marker comes from the database, and this does not change. The problem is either the card or autocomplete, but not both, and the problem is with callbacks.

From google docs, I have 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 causes an error on the console, and nothing works.

My question is: how can multiple callbacks be passed to the Google APIs?

Appreciate your help.

thanks

Answer 1

You cannot add multiple callbacks (and you should not include the API more than once). Put all the code in one callback.

 <script src="https://maps.googleapis.com/maps/api/js?key=[API KEY]&signed_in=true&libraries=places&callback=initialize" async defer></script> function initialize() { initMap(); initAutoComplete(); } 

or see this example in the documentation

 function initialize() { initMap(); initAutocomplete(); } var map, marker; function initMap() { map = new google.maps.Map(document.getElementById('map'), { center: { lat: -34.397, lng: 150.644 }, zoom: 8 }); } // This example displays an address form, using the autocomplete feature // of the Google Places API to help users fill in the information. // This example requires the Places library. Include the libraries=places // parameter when you first load the API. For example: // <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places"> var placeSearch, autocomplete; var componentForm = { street_number: 'short_name', route: 'long_name', locality: 'long_name', administrative_area_level_1: 'short_name', country: 'long_name', postal_code: 'short_name' }; function initAutocomplete() { // Create the autocomplete object, restricting the search to geographical // location types. autocomplete = new google.maps.places.Autocomplete( /** @type {!HTMLInputElement} */ (document.getElementById('autocomplete')), { types: ['geocode'] }); // When the user selects an address from the dropdown, populate the address // fields in the form. autocomplete.addListener('place_changed', fillInAddress); } function fillInAddress() { // Get the place details from the autocomplete object. var place = autocomplete.getPlace(); if (place.geometry.viewport) { map.fitBounds(place.geometry.viewport); } else { map.setCenter(place.geometry.location); map.setZoom(17); // Why 17? Because it looks good. } if (!marker) { marker = new google.maps.Marker({ map: map, anchorPoint: new google.maps.Point(0, -29) }); } else marker.setMap(null); marker.setOptions({ position: place.geometry.location, map: map }); for (var component in componentForm) { document.getElementById(component).value = ''; document.getElementById(component).disabled = false; } // Get each component of the address from the place details // and fill the corresponding field on the form. for (var i = 0; i < place.address_components.length; i++) { var addressType = place.address_components[i].types[0]; if (componentForm[addressType]) { var val = place.address_components[i][componentForm[addressType]]; document.getElementById(addressType).value = val; } } } // Bias the autocomplete object to the user geographical location, // as supplied by the browser 'navigator.geolocation' object. function geolocate() { if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(function(position) { var geolocation = { lat: position.coords.latitude, lng: position.coords.longitude }; var circle = new google.maps.Circle({ center: geolocation, radius: position.coords.accuracy }); autocomplete.setBounds(circle.getBounds()); }); } } 

 html, body { height: 100%; margin: 0; padding: 0; } #map { height: 100%; } #locationField, #controls { position: relative; width: 480px; } #autocomplete { position: absolute; top: 0px; left: 0px; width: 99%; } .label { text-align: right; font-weight: bold; width: 100px; color: #303030; } #address { border: 1px solid #000090; background-color: #f0f0ff; width: 480px; padding-right: 2px; } #address td { font-size: 10pt; } .field { width: 99%; } .slimField { width: 80px; } .wideField { width: 200px; } #locationField { height: 20px; margin-bottom: 2px; } 

 <div id="locationField"> <input id="autocomplete" placeholder="Enter your address" onFocus="geolocate()" type="text" /> </div> <table id="address"> <tr> <td class="label">Street address</td> <td class="slimField"> <input class="field" id="street_number" disabled="true" /> </td> <td class="wideField" colspan="2"> <input class="field" id="route" disabled="true" /> </td> </tr> <tr> <td class="label">City</td> <td class="wideField" colspan="3"> <input class="field" id="locality" disabled="true" /> </td> </tr> <tr> <td class="label">State</td> <td class="slimField"> <input class="field" id="administrative_area_level_1" disabled="true" /> </td> <td class="label">Zip code</td> <td class="wideField"> <input class="field" id="postal_code" disabled="true" /> </td> </tr> <tr> <td class="label">Country</td> <td class="wideField" colspan="3"> <input class="field" id="country" disabled="true" /> </td> </tr> </table> <div id="map"></div> <script src="https://maps.googleapis.com/maps/api/js?libraries=places&callback=initialize" defer></script> 

Answer 2

You are lifesaver @geocodezip. I do not have enough reputation points to make this comment, however, to continue @goecodezip's answer, my map will not work due to autocomplete and found that in the HTML temple that I used, there was an invalid <!DOCTYPE HTML> that caused card to not appear.

To answer your question in a comment by @Mamulasa regarding storing lat and long in your database, set two hidden input fields for lat and lon:

 <input type="hidden" id="latitude" name="lat" value=""> <input type="hidden" id="longitude" name="lon" value=""> 

and in the @geocodezip example above add:

document.getElementById ("latitude"). value = place.geometry.location.lat (); document.getElementById ("longitude"). value = place.geometry.location.lng ();

inside fillInAddress, so now this function will look like this:

 function fillInAddress() { // Get the place details from the autocomplete object. var place = autocomplete.getPlace(); if (place.geometry.viewport) { map.fitBounds(place.geometry.viewport); } else { map.setCenter(place.geometry.location); map.setZoom(17); // Why 17? Because it looks good. } if (!marker) { marker = new google.maps.Marker({ map: map, anchorPoint: new google.maps.Point(0, -29) }); } else marker.setMap(null); marker.setOptions({ position: place.geometry.location, map: map }); for (var component in componentForm) { document.getElementById(component).value = ''; document.getElementById(component).disabled = false; } //-- ADD LAT AND LON HERE TO APEND TO HIDDEN HTML INPUT document.getElementById("latitude").value = place.geometry.location.lat(); document.getElementById("longitude").value = place.geometry.location.lng(); // Get each component of the address from the place details // and fill the corresponding field on the form. for (var i = 0; i < place.address_components.length; i++) { var addressType = place.address_components[i].types[0]; if (componentForm[addressType]) { var val = place.address_components[i][componentForm[addressType]]; document.getElementById(addressType).value = val; } } } 

Wrap the html in <form method="post"> , and now you can get all the fields, including hidden lat and lon, to be stored in your database.

Hope this helps.