Ok - so - to create a MAP you need to use new google.maps.Map( ELEMENT_TO_CONTAIN_THE_MAP, MAP_OPTIONS) which is in your mapInit func.
You should also load the API only once - so i moved things a little bit in your code...
I have removed the callback=initMap from your maps url - because your element doesn't exist in the DOM at the moment when google's script is loaded.
Then placed the call to mapInit after your createCountryCard call - because it adds your map element to the DOM - and now we can place the map within it.
Given your element the id argument <div class="map-content" id="map-content">. And then changed the id in mapInit function to match your elements id which is map-content.
const APIURL = 'https://restcountries.eu/rest/v2/name/'
const GOOGLE_MAPS_API = 'https://maps.googleapis.com/maps/api/js?key=AIzaSyDhlU1KMTlTh4C__bTJBxbVA-s7wvQbO9E'
const main = document.getElementById('main')
const form = document.getElementById('form')
const search = document.getElementById('search')
async function getCountryData(name) {
try {
const {
data
} = await axios.get(APIURL + name)
data.forEach(res => {
const countryData = res
//gmaps element is on card
createCountryCard(countryData);
initMap();
getLatLngPos(countryData)
})
} catch (err) {
if (err.response.status == 404) {
createErrorCard('No countries found')
setTimeout(() => {
main.innerHTML = ''
}, 1500);
}
}
}
// Google Map API
function addGMapsEl() {
const script = document.createElement('script');
script.src = GOOGLE_MAPS_API;
script.defer = true;
document.head.appendChild(script);
const mapDiv = document.createElement('div')
mapDiv.id = 'map'
main.appendChild(mapDiv)
}
let map;
function initMap() {
map = new google.maps.Map(document.getElementById("map-content"), {
center: {
lat: 51,
lng: 9
},
zoom: 7
});
}
function createCountryCard(country) {
const cardHTML = `
<div class="content-container">
<div class="card">
<div class="wrapper">
<div class="card-title">
<h2>${country.name}</h2>
<h4>Capital: ${country.capital}</h4>
<h5>Population: ${country.population.toLocaleString('en')}</h5>
</div>
<div class="card-image">
<img
src="${country.flag}"
alt="${country.name +'-flag'}"
/>
</div>
</div>
<div class="wrapper">
<div id="map-content" class="map-content">
</div>
<div class="card-content">
<ul class="card-list">
<li><strong>Region:</strong> ${country.region}</li>
<li><strong>Subregion:</strong> ${country.subregion}</li>
<li><strong>Currency:</strong> ${country.currencies[0].name}<span> ${country.currencies[0].symbol}</span></li>
<li><strong>Spoken Language:</strong> ${country.languages[0].name}</li>
<li><strong>Timezone:</strong> ${country.timezones}</li>
</ul>
</div>
</div>
</div>
</div>
`
main.innerHTML += cardHTML
}
// Creates error card after no results found
function createErrorCard(msg) {
const cardHTML = `
<div class="card">
<h1>${msg}</h1>
</div>
`
main.innerHTML = cardHTML
}
// Clears the DOM on search
function clearDOM() {
main.innerHTML = ''
}
// Search Input
form.addEventListener('submit', (e) => {
e.preventDefault()
clearDOM()
const countryName = search.value
if (countryName) {
getCountryData(countryName)
search.value = ''
}
})
addGMapsEl();
.map-content {
width: 100%;
height: 300px;
}
.card-image img {
max-height: 50px;
box-shadow: 1px 1px 5px #aaa;
}
<body>
<div class="search-container">
<form id="form" class="form">
<input type="text" id="search" placeholder="Search for country..." />
</form>
</div>
<main id="main"></main>
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.21.1/axios.min.js"></script>
<script src="script.js"></script>
</body>
与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
