How to call javascript google map api function correctly?
Question
I'm trying to get google maps to show up on my site with Los Angeles being at its center. I am doing so with a javascript google maps api key. I checked the key by downloading platform API checker and it said it's successful. I'm getting an error on the map that "this page can't load google maps successfully." What am I doing wrong below? Thanks!
personInfo.html
<head>
<meta charset="UTF-8">
<title> Covid 19 Patient Map </title>
<style>
#map{
height: 400px;
width: 50%;
}
</style>
</head>
<body>
<p style="text-decoration: underline;"><a href="http://127.0.0.1:5000"/> Back to home </a></p>
<h2 id="displayName" ></h2>
<div class="block">
<label>Lives at: </label>
<p id="address"></p>
</div>
<div class="block">
<label>Covid status?: </label>
<p id="covidPos"></p>
</div>
<h1> Covid 19 Patient Map </h1>
<div id="map"></div>
<script>
var personInfoList = JSON.parse(sessionStorage.getItem("newList1"));
for(let item of personInfoList) {
document.getElementById("displayName").innerHTML = item[0] + " " + item[1];
document.getElementById("address").innerHTML = item[2];
document.getElementById("covidPos").innerHTML = item[3];
}
function initMap(){
var opts = {zoom: 10, center: {lat: 34.0522, lng: 118.2437}
}
var map = new google.maps.Map(document.getElementById('map'),opts);
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDzRLuKxf5Xa4oTwp5o_PErnB8u88br3MU&callback=initMap">
</script>
</body>
</html>
1 answers
solution1
-1 ACCPTED 2020-05-02 09:54:28
I found that the api key you're currently used to is the api key for development purpose only. As the documentation said here .
You have to create your own API key here .
A little bit suggestion to not put your api key like that (front-end side), instead of retrieve the key from the back-end (you might want to use.env file).
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.