Utilizzo di initMap e initAutocomplete sulla stessa pagina html google maps

Question

Ho una pagina Web in cui vorrei utilizzare sia il completamento automatico dei riquadri che la mappa di google con l'indicatore. L'utente può cercare un indirizzo automatico in completamento automatico. I dati lat-long per marker provengono da DB e questo non cambia. Il problema è che la mappa funziona o carica automaticamente, ma non entrambi, e il problema è legato ai callback.

da Google Docs, ho incluso entrambe le richiamate in chiamate API distinte:

<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> 

Ma questo genera un errore su console, e niente funziona.

La mia domanda è: come possono essere inoltrate più chiamate all'API di Google?

Apprezzo molto il tuo aiuto.

Grazie

Answer 1

Non è possibile aggiungere più callback (e non si dovrebbe includere l'API più di una volta). Metti tutto il codice in un unico 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(); 
} 

o vedere 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's geographical location, 
 
// as supplied by the browser's '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

Tu sei un @geocodezip salvagente. Non ho abbastanza punti Rep per rendere questo un commento comunque per continuare sulla risposta di @ goecodezip, la mia mappa non funzionerebbe in associazione con il completamento automatico e ho trovato che il tempio HTML che stavo usando aveva uno <!DOCTYPE HTML> non valido che ha causato la mappa non apparire.

per rispondere alla tua domanda nel commento @Mamulasa per quanto riguarda la memorizzazione del lat e lungo nel vostro DB, installazione di due campi di input nascosti per lat e lon:

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

e nell'esempio di @ geocodezip sopra aggiungere:

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

all'interno del fillInAddress quindi questa funzione ora apparire così:

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; 
    } 
    } 
} 

Avvolgere il codice HTML in un <form method="post"> e vi sarà ora in grado di ottenere tutti i campi tra cui una nascosta lon lat e memorizzare nel vostro DB .

Spero che questo aiuti.