Dynamically add google maps div into DOM

Question

I'm wanting to add the Google Maps API div,

within a card that's dynamically added to the DOM, after a user has input a search. I'm able to append it the main div, as a test, but not within the card one I'm appending after the the card is inserted into the DOM.

Code is below.

const APIURL = 'https://restcountries.eu/rest/v2/name/'
const GOOGLE_MAPS_API = 'https://maps.googleapis.com/maps/api/js?key=AIzaSyDhlU1KMTlTh4C__bTJBxbVA-s7wvQbO9E&callback=initMap'
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

            addGMapsEl()
            createCountryCard(countryData)
            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"), {
    center: { lat: 51, lng: 9},
    zoom: 7
  });
}

function createCountryCard(country) {
    const cardHTML = `
    
        
         
             
              ${country.name}
              Capital: ${country.capital}
              Population: ${country.population.toLocaleString('en')}
        
        
          
        
      
      
        
        
        
          
            Region: ${country.region}
            Subregion: ${country.subregion}
            Currency: ${country.currencies[0].name} ${country.currencies[0].symbol}
            Spoken Language: ${country.languages[0].name}
            Timezone: ${country.timezones}
          
        
      
    
  
  `
  main.innerHTML += cardHTML
}

// Creates error card after no results found
function createErrorCard(msg) {
    const cardHTML = `
    
        ${msg}
    
    `
    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 = ''
    }
})

webdev-dan · Accepted Answer

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

. 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 = `
    
        
         
             
              ${country.name}
              Capital: ${country.capital}
              Population: ${country.population.toLocaleString('en')}
        
        
          
        
      
      
        
        
        
          
            Region: ${country.region}
            Subregion: ${country.subregion}
            Currency: ${country.currencies[0].name} ${country.currencies[0].symbol}
            Spoken Language: ${country.languages[0].name}
            Timezone: ${country.timezones}
          
        
      
    
  
  `
  main.innerHTML += cardHTML
}

// Creates error card after no results found
function createErrorCard(msg) {
  const cardHTML = `
    
        ${msg}
    
    `
  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;
}

Looks like it works now ...you probably want to use setCenter on yor map later to move the view to the new location - do it after mapInit

Added some CSS also - to give a size for the map element and shrink that huge flag you had.

Dynamically add google maps div into DOM

Answers (2)

Related Questions