<script src="jquery.js"></script>
<script>
$.get('http://localhost/ajax_send_key.php',function (data){
api_key = data;
});
</script>
<script type="text/javascript"
src="https://maps.googleapis.com/maps/api/js?key= - my api key - &libraries=places">
// this one work
// src="https://maps.googleapis.com/maps/api/js?key={api_key}&libraries=places">
// Google Maps JavaScript API error: InvalidKeyMapError
// src="https://maps.googleapis.com/maps/api/js?key=" + api_key + "&libraries=places">
// TypeError: Cannot read properties of undefined (reading 'Autocomplete') at initialize
</script>
<script>
lat = '';
function initialize() { // google places wohl für ortseingabe und dann vorschläge
var input = document.getElementById('in');
var places = new google.maps.places.Autocomplete(input);
google.maps.event.addListener(places, 'place_changed', function () {
var place = places.getPlace();
var lat = place.geometry.location.lat();
});
return (lat);
}
window.addEventListener('load', initialize);
</script>
<html>
input
<input id='in' type = 'text' STYLE = 'width: 220px' ;></input>
</html>
hello,
I have a problem with my Api Key, when I try to use it as a variable. how do I put it into the src="https://maps.googleapis.com/maps/api/js?key=
It works if it is not a variable.
thanks georg
Don't create the script tag on load. Wait for the key response to come back first before creating it, and then you can create the src appropriately. You'll also have to wait for Google's script to load before calling initialize.
$.get('http://localhost/ajax_send_key.php',function (data){
const script = document.body.appendChild(document.createElement('script'));
script.src = `https://maps.googleapis.com/maps/api/js?key=${data}&libraries=places`;
script.addEventListener('load', initialize);
});