I have been trying with little luck to get The auto complete api to function in my code. Sometimes it works other times it throws this error code Uncaught (in promise) message: "initMap is not a function" name:"InvalidValueError" stack:"Error\n. Maybe 1/10 it works or it just throws the error, im not sure why its saying initMap is not a function when i have it as a function in my javascript. Any help would be greatly appreciated.
function initMap() {
var input = document.getElementById('searchTextField');
var autocomplete = new google.maps.places.Autocomplete(input);
autocomplete.addListener('place_changed', function() {
var place = autocomplete.getPlace();
document.getElementById("address").value = JSON.stringify(place.address_components);
});
}
var viewModal = document.querySelector(".view");
var modal = document.querySelector(".modal");
var closeModal = document.querySelector("#closeBtn");
var saveBtn = document.querySelector(".saveBtn");
// var submitBtnEl = document.querySelector(".submitBtn");
// var userInputEl = document.querySelector(".userInput");
// viewModal.addEventListener("click", () => {
// modal.classList.add("is-active");
// });
// console.log(submitBtnEl);
closeModal.addEventListener("click", function () {
modal.classList.remove("is-active");
});
$("#viewListing1").on("click", function () {
modal.classList.add("is-active");
});
$("#viewListing2").on("click", function () {
modal.classList.add("is-active");
});
$("#viewListing3").on("click", function () {
modal.classList.add("is-active");
});
$("#viewListing4").on("click", function () {
modal.classList.add("is-active");
});
$("#viewListing5").on("click", function () {
modal.classList.add("is-active");
});
$("#viewListing6").on("click", function () {
modal.classList.add("is-active");
});#slogan {
display: flex;
justify-content: center;
padding: 100px;
}
#favSlogan {
display: flex;
justify-content: center;
padding-bottom: 10px;
}
.searchBox {
display: flex;
justify-content: center;
text-align: center;
}
nav {
position: absolute;
}
.is-child {
transition: ease-in-out;
transition-duration: 0.5s;
}
.is-child:hover {
transition: ease-in-out;
transition-duration: 0.5s;
background-color: rgba(131, 129, 129, 0.25);
box-shadow: 5px 5px 10px;
}
.homeBackground {
/* background-image: url("/wave-haikei.svg");
padding-bottom: 10px; */
background-repeat: no-repeat;
background-size: cover;
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' version='1.1' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:svgjs='http://svgjs.com/svgjs' width='1440' height='560' preserveAspectRatio='none' viewBox='0 0 1440 560'%3e%3cg mask='url(%26quot%3b%23SvgjsMask1089%26quot%3b)' fill='none'%3e%3cpath d='M -702.0372766742543%2c456 C -606.04%2c415.2 -414.04%2c246.4 -222.0372766742543%2c252 C -30.04%2c257.6 65.96%2c491.6 257.96272332574574%2c484 C 449.96%2c476.4 545.96%2c236.6 737.9627233257457%2c214 C 929.96%2c191.4 1077.56%2c369.8 1217.9627233257456%2c371 C 1358.37%2c372.2 1395.59%2c250.2 1440%2c220' stroke='rgba(255%2c 56%2c 96%2c 1)' stroke-width='2'%3e%3c/path%3e%3c/g%3e%3cdefs%3e%3cmask id='SvgjsMask1089'%3e%3crect width='1440' height='560' fill='white'%3e%3c/rect%3e%3c/mask%3e%3c/defs%3e%3c/svg%3e");
}
.favouritesBackground {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' version='1.1' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:svgjs='http://svgjs.com/svgjs' width='1440' height='560' preserveAspectRatio='none' viewBox='0 0 1440 560'%3e%3cg mask='url(%26quot%3b%23SvgjsMask1155%26quot%3b)' fill='none'%3e%3cpath d='M -463.11916332779174%2c429 C -367.12%2c366 -175.12%2c104.6 16.880836672208268%2c114 C 208.88%2c123.4 304.88%2c456.2 496.88083667220826%2c476 C 688.88%2c495.8 784.88%2c225 976.8808366722083%2c213 C 1168.88%2c201 1364.26%2c413 1456.8808366722083%2c416 C 1549.5%2c419 1443.38%2c265.6 1440%2c228' stroke='rgba(0%2c 209%2c 178%2c 1)' stroke-width='2'%3e%3c/path%3e%3c/g%3e%3cdefs%3e%3cmask id='SvgjsMask1155'%3e%3crect width='1440' height='560' fill='white'%3e%3c/rect%3e%3c/mask%3e%3c/defs%3e%3c/svg%3e");
/* background-repeat: no-repeat; */
background-size: cover;
}
.listingBackground {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' version='1.1' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:svgjs='http://svgjs.com/svgjs' width='1440' height='560' preserveAspectRatio='none' viewBox='0 0 1440 560'%3e%3cg mask='url(%26quot%3b%23SvgjsMask1275%26quot%3b)' fill='none'%3e%3cpath d='M -285.29597321531037%2c140 C -189.3%2c195 2.7%2c400.8 194.70402678468963%2c415 C 386.7%2c429.2 482.7%2c194.8 674.7040267846896%2c211 C 866.7%2c227.2 962.7%2c518.6 1154.7040267846896%2c496 C 1346.7%2c473.4 1577.64%2c141 1634.7040267846896%2c98 C 1691.76%2c55 1478.94%2c244.4 1440%2c281' stroke='rgba(32%2c 156%2c 238%2c 1)' stroke-width='2'%3e%3c/path%3e%3c/g%3e%3cdefs%3e%3cmask id='SvgjsMask1275'%3e%3crect width='1440' height='560' fill='white'%3e%3c/rect%3e%3c/mask%3e%3c/defs%3e%3c/svg%3e");
background-repeat: no-repeat;
background-size: cover;
padding-bottom: 200px;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Renters</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.4/css/bulma.min.css" />
<script async defer src='https://maps.googleapis.com/maps/api/js?key=<MYKEY>&callback=initMap&libraries=places'></script>
<link rel="stylesheet" href="/assets/style/style.css">
</head>
<body>
<nav class="navbar " role="navigation" aria-label="main navigation">
<div class="navbar-brand">
<a class="navbar-item" href="/index.html">
<img src="/house-solid.svg" width="112" height="28" />
</a>
<a role="button" class="navbar-burger" aria-label="menu" aria-expanded="false" data-target="navbarBasicExample">
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
</a>
</div>
<div id="navbarBasicExample" class="navbar-menu">
<div class="navbar-start">
<a class="navbar-item " href="/index.html"> Home </a>
<a class="navbar-item " href="/favourites.html"> My Listings </a>
<a class="navbar-item " href="/listings.html"> Search </a>
</div>
</div>
</div>
</div>
</nav>
<main class="homeBackground">
<div id="slogan">
<h1 class="is-size-1 has-text-weight-bold has-text-danger">Renters</h1>
<p class="is-size-5">Always walking around like they rent the place.</p>
</div>
<div class="columns is-mobile is-centered is-primary is-flex is-vcentered">
<div class="column box is-half is-primary p-6 m-6 is-vcentered has-background-light ">
<div class="field">
<label class="label">Search</label>
<div class="control">
<input class="input searchTextField" type="text" size="50">
<input class ="address" name="address" value="" type="hidden" placeholder="Search Here">
</div>
</div>
<div class="field">
<div class="control">
<label class="checkbox">
<input type="checkbox">
I agree to the <a href="#">terms and conditions</a>
</label>
</div>
</div>
<div class="field is-grouped">
<div class="control">
<button class="button is-link submitBtn">Submit</button>
</div>
<div class="control">
<button class="button is-link is-light">Cancel</button>
</div>
</div>
</div>
</div>
</div>
</div>
</main>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.13.1/jquery-ui.min.js"
integrity="sha256-eTyxS0rkjpLEo16uXTS0uVCS4815lc40K2iVpWDvdSY=" crossorigin="anonymous"></script>
<script src="./assets/js/script.js"></script>
</body>
</html>