Aynı html sayfasında initMap ve initAutocomplete kullanma google maps

Question

Her iki yer otomatik tamamlamayı ve google haritayı işaretleyici ile kullanmak istediğim bir web sayfam var. Kullanıcı otomatik tamamlama yerine bir adres arayabilir. Marker için Lat-long veriler DB'den geliyor ve bu değişmiyor. Sorun ya harita çalışması ya da otomatik tamamlama yeridir, ancak her ikisini de değil, sorun geri aramalarla ilgilidir.

google docs itibaren

, ben ayrı API çağrıları hem geri aramalar dahil ettik:

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

Ama bu konsolun üzerinde hata atıyor ve hiçbir şey çalışır.

Sorum şu: Google API'ya birden fazla geri dönüş nasıl geçilebilir?

Yardımlarınız için teşekkür ederiz.

Teşekkür

Answer 1

Birden geri aramalar ekleyemezsiniz (ve birden fazla kez API içermemelidir). Tüm kodu tek bir geri çağır.

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

ya bakınız 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

Bir cankurtaran @geocodezip vardır. Ben goecodezip cevabını devam etmek için bu bir yorum yapmak için yeterli rep puan yok, benim harita otomatik tamamlama ile birlikte çalışmaz ve benim kullandığım HTML tapınağı geçersiz bir <!DOCTYPE HTML> vardı neden haritanın neden olmayan bulundu görünür.

DB, Kur için iki gizli giriş alanları içine uzun lat ve saklanması ile ilgili olarak açıklama @Mamulasa sorunuzu cevaplamak için enlem ve boylam:

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

ve eklenti yukarıda @ geocodezip en örnekte:

document.getElementById ("enlem") değeri = place.geometry.location.lat(); document.getElementById ("longitude") değeri = place.geometry.location.lng(); Bir <form method="post"> içinde

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 html ve artık DB depolamak için gizli bir enlem ve boylam dahil tüm alanları elde etmek mümkün olacaktır: fillInAddress içinde

nedenle bu işlevi artık aşağıdaki gibi görünecektir .

Bu yardımcı olur umarım.